main {
  background-color: #000000;
}

.topBranding-container {
  padding-top: 50px;
  background-color: #000000;
}

.topImageBranding {
  height: 450px;
  width: 100%;
}
.topTekstBranding1-2 {
  justify-content: center;
  margin-left: 20px;
}

.tekstBranding1 {
  color: #ffcc00;
  font-family: "Open Sans", sans-serif;
  font-weight: 800;
  font-size: 170px;
  letter-spacing: -2px;
  height: 140px;
}

.tekstBranding2 {
  color: #ffcc00;
  font-family: "Open Sans", sans-serif;
  font-weight: lighter;
  font-size: 167px;
  letter-spacing: -12px;
  height: 200px;
}

.topTekstImg {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-top: -80px;
}

.logoSaMuBranding {
  width: 401px;
  height: 255px;
  margin-top: 65px;
  margin-right: 30px;
}

.brandingContent {
  height: 2400px;
  width: 100%;
  background-color: #000000;
  padding-top: 100px;
  padding-bottom: 100px;
  padding-left: 100px;
  padding-right: 66px;
}

.Tekst2-ImgProjectBranding {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  text-align: flex-end;
}

.Tekst1ProjectBranding {
  width: 525px;
  margin-left: 35px;
}

.Tekst2ProjectBranding {
  width: 525px;
  margin-top: 20px;
  margin-right: 60px;
}

.BoxesProjectBranding {
  display: flex;
  flex-direction: row;
  gap: 60px;
  margin-top: 100px;
  margin-left: 30px;
  justify-content: left;
}

.Box1ProjectBranding {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 292px;
  height: 218px;
  border-radius: 15px;
  text-align: center;
  background: conic-gradient(
    at -20% -10%,
    #8134d4 -5%,
    #000000 40%,
    #8134d4 52%
  );
}

.Box2ProjectBranding {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 292px;
  height: 218px;
  border-radius: 15px;

  text-align: center;
  background: conic-gradient(
    at 114% 110%,
    #8134d4 70%,
    #000000 85%,
    #000000 89%,
    #8134d4 109%
  );
}

.Box3ProjectBranding {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 292px;
  height: 218px;
  border-radius: 15px;

  text-align: center;
  background: conic-gradient(
    at -10% 110%,
    #8134d4 -15%,
    #000000 20%,
    #8134d4 30%
  );
}

.Box1ProjectBranding,
.Box2ProjectBranding,
.Box3ProjectBranding {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  z-index: 2;
}

.Box1ProjectBranding:hover .overlay,
.Box2ProjectBranding:hover .overlay,
.Box3ProjectBranding:hover .overlay {
  opacity: 1;
}

.Box1ProjectBranding h1,
.Box2ProjectBranding h1,
.Box3ProjectBranding h1 {
  z-index: 1;
  position: relative;
  color: white;
}

.Tekst3ProjectBranding {
  width: 525px;
  margin-top: 95px;
  margin-left: 35px;
}

.Boxes1ProjectBranding {
  display: flex;
  flex-direction: row;
  gap: 20px;
  margin-top: 100px;
  justify-content: left;
}

.Box6ProjectBranding,
.Box4ProjectBranding,
.Box8ProjectBranding,
.Box9ProjectBranding,
.Box5ProjectBranding {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 222px;
  height: 281px;
  border-radius: 15px;
  text-align: center;
  left: 30px;
  background: rgb(63, 26, 94);
}

.Box4ProjectBranding:hover {
  border: 1px solid #ffffff;
}
.Box5ProjectBranding:hover {
  border: 1px solid #ffffff;
}
.Box6ProjectBranding:hover {
  border: 1px solid #ffffff;
}

.Box8ProjectBranding:hover {
  border: 1px solid #ffffff;
}
.Box9ProjectBranding:hover {
  border: 1px solid #ffffff;
}

.interviewImg,
.survayOutcome,
.personaSaMu,
.costumerJourneySaMu {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  background-size: cover;
  background-position: center;
}

.TekstTopBranding {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 130px;
  padding-bottom: 0px;
}

.tekst-SaMu-Datum {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
}

.tekst-Sem2-MediaDesign {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.tekst-SalveMundiBranding {
  font-family: "Lato", sans-serif;
  font-weight: 300;
  font-size: 50px;
  line-height: 0.9;
  color: #ffffff;
}

.tekst-10Feb-14Mar {
  font-family: "Lato", sans-serif;
  font-weight: 300;
  font-size: 20px;
  color: #ffffff;
}

.tekst-SEMESTER-2-2025 {
  font-family: "Lato", sans-serif;
  font-weight: 300;
  font-size: 30px;
  color: #ffffff;
}

.tekst-MediaDesign {
  font-family: "Lato", sans-serif;
  font-weight: 300;
  font-size: 20px;
  color: #ffffff;
}

.coreValueSalveMundi {
  margin-top: 60px;
  margin-left: 80px;
  height: 324px;
}

.topContentUX {
  background-color: #ffffff;
  min-height: 800px;
}

.PicooUXProjectImage {
  width: 100%;
  height: 477px;
}

.topTekstPicoo1 {
  grid-column: 1;
  font-family: "Open Sans", sans-serif;
  font-weight: 800;
  font-size: 150px;
  letter-spacing: -8px;
  line-height: 1;
}

.topTekstPicoo2 {
  grid-column: 1;
  font-family: "Open Sans", sans-serif;
  font-weight: 300;
  font-size: 120px;
  letter-spacing: -8px;
  line-height: 0.6;
  margin-bottom: 30px;
}

.contentBoxUX {
  min-height: 1200px;
  width: 100%;
  background-color: #ffffff;
  padding: 140px;
}

.groupUX {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-bottom: 200px;
}

.groupUX4 {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.group1TekstUX,
.group2TekstUX,
.group3TekstUX,
.group4TekstUX {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.groupTekstUXTitel {
  font-family: "Open Sans", sans-serif;
  font-weight: 800;
  font-size: 35px;
  color: #000000;
  letter-spacing: -2px;
}

.groupTekstUX {
  font-family: "Open Sans", sans-serif;
  font-weight: 100;
  font-size: 20px;
  color: #000000;
  width: 515px;
}

.PicooUX1 {
  width: 515px;
  height: 455px;
  margin-top: 65px;
}

.PicooUX2 {
  width: 515px;
  height: 405px;
}

.PicooUX3 {
  width: 515.29px;
  height: 379px;
  margin-top: 70px;
}

.PicooUX4 {
  width: 510px;
  height: 100%;
  margin-top: 55px;
}

.processBtn-container {
  background-color: #ffffff;
  padding: 0px 150px 200px 150px;
}

.processBtN {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

.processBtnTopTekst {
  font-family: "Open Sans", sans-serif;
  font-weight: 700;
  font-size: 31px;
  color: #2e3192;
  margin-bottom: 30px;
}

.processBtN1,
.processBtN2,
.processBtN3,
.processBtN4,
.processBtN5,
.processBtN6 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 330px;
  height: 216px;
  border-radius: 10px;
  text-align: center;
  background-color: #d1eaf9;
  font-family: "Open Sans", sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: #2e3192;
  letter-spacing: -1px;
  transition: all 0.3s ease;
}

.processBtN1:hover,
.processBtN2:hover,
.processBtN3:hover,
.processBtN4:hover,
.processBtN5:hover,
.processBtN6:hover {
  background-color: #00adef;
  color: #ffffff;
  cursor: pointer;
}

.topImageDevelopment {
  width: 100%;
  height: 499px;
  margin-top: 20px;
}

.contentBoxDev2 {
  background-color: #000000;
  min-height: 3000px;
  width: 100%;
  padding: 140px;
}

.groupTekstDevTitel {
  font-family: "Open Sans", sans-serif;
  font-weight: 800;
  font-size: 35px;
  color: #ffffff;
  letter-spacing: -1px;
  margin-bottom: 10px;
}

.groupTekstDev {
  font-family: "Open Sans", sans-serif;
  font-weight: lighter;
  font-size: 20px;
  color: #ffffff;
  width: 515px;
}

.prototypeImageDev {
  position: absolute;
  width: auto;
  height: 1905px;
  margin-top: 200px;
  z-index: 0;
  margin-left: 700px;
}

.grouptekst2-3-4Dev {
  display: flex;
  flex-direction: column;
  margin-top: 360px;
  margin-left: 100px;
}

.group2TekstDev {
  position: relative;
  z-index: 10;
  margin-bottom: 170px;
}

.group3TekstDev {
  position: relative;
  z-index: 10;
  margin-bottom: 170px;
}

.group4TekstDev {
  position: relative;
  z-index: 10;
  margin-bottom: 100px;
}

.groupTekstDev1 {
  font-family: "Open Sans", sans-serif;
  font-weight: lighter;
  font-size: 17px;
  color: #ffffff;
  width: 410px;
}

.groupTekstDevTitel1 {
  font-family: "Open Sans", sans-serif;
  font-weight: 800;
  font-size: 30px;
  color: #ffffff;
  letter-spacing: -1px;
  margin-bottom: 10px;
}

.iphoneframe-container {
  justify-content: center;
  align-items: center;
  margin-top: 100px;
  min-height: 900px;
}

.iphoneframe-Btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 380px;
  margin-top: 80px;
  margin-bottom: 200px;
}

.iphoneFrameBox {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 615px;
  background-color: #000000;
  border-radius: 20px;
  z-index: 1;
}

.iphoneFrame {
  position: absolute;
  width: 274px;
  height: 550px;
  z-index: 1;
  margin-top: 30px;
}

.iphoneFrameTopTekst {
  font-family: "Open Sans", sans-serif;
  color: #ffffff;
  font-size: 31px;
  text-align: center;
}

.btnBoxDev {
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  z-index: 5;
}

.processBtn1,
.processBtn2,
.processBtn3,
.processBtn4,
.processBtn5 {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 195px;
  height: 46px;
  border-radius: 8px;
  background-color: #d1eaf9;
  font-family: "quicksand", sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: #2e3192;
  padding-left: 10px;
}

.processBtn1:hover,
.processBtn2:hover,
.processBtn3:hover,
.processBtn4:hover,
.processBtn5:hover {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 195px;
  height: 46px;
  border-radius: 8px;
  background-color: #00aeef;
  font-family: "quicksand", sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: #ffffff;
  padding-left: 10px;
}

.processBtnTitel {
  text-align: center;
  font-family: "quicksand", sans-serif;
  font-weight: 800;
  font-size: 20px;
  color: #2e3192;
  width: 170px;
  margin-bottom: 15px;
}

.top-container-sprintX {
  width: 100%;
  height: 800px;
}

.pipAI {
  position: absolute;
  width: auto;
  height: 690px;
  margin-left: 700px;
  margin-top: 75px;
  z-index: 0;
}

.top-container-sprintX-text {
  position: relative;
  z-index: 10;
  padding-top: 350px;
}

.sprintX-title {
  font-family: "Open Sans", sans-serif;
  font-weight: 800;
  font-size: 200px;
  color: #4f7fb8;
  letter-spacing: -2px;
}

.magazine-title {
  font-family: "Open Sans", sans-serif;
  font-weight: lighter;
  font-size: 136px;
  color: #a2afbc;
  letter-spacing: -2px;
  line-height: 0.2;
}

.sprintX-RowTekst {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-top: 50px;
  margin-bottom: 90px;
}

.sprintX-tekstLeft {
  width: 515px;
  margin-left: 170px;
}

.sprintX-tekstLeft-title {
  font-family: "Open Sans", sans-serif;
  font-weight: 700;
  font-size: 35px;
  color: #4f7fb8;
  margin-bottom: 10px;
}

.sprintX-BtnRight {
  margin: 140px;
}

.btnRight {
  align-content: center;
  text-align: center;
  width: 266px;
  height: 69px;
  border-radius: 15px;
  background-color: #000000;
  border: 2px solid #4f7fb8;
}

.btnRight:hover {
  align-content: center;
  text-align: center;
  width: 266px;
  height: 69px;
  border-radius: 15px;
  background-color: #4f7fb8;
  border: 2px solid #4f7fb8;
}