/* General styles */
body {
  margin: 0;
  padding: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 100vh;
  color: white;
  font-family: Arial, sans-serif;
}

/* Page-specific backgrounds */
.software-page {
  background-image: url('software.jpg'); /* Replace with actual image filename */
}

.network-page {
  background-image: url('network.jpg');
}

.hardware-page {
  background-image: url('hardware.jpg');
}

/* Header and paragraph styling */
header {
  color: white;
  padding: 20px;
  text-align: center;
  font-size: 2em;
  background-color: rgba(0, 0, 0, 0.5);
}

p {
  color: white;
  padding: 15px;
  font-size: 1.1em;
  line-height: 1.6;
  background-color: rgba(0, 0, 0, 0.4);
}
/* Flip Card Layout */
.card-container {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin-top: 40px;
}

/* Flip Card Base */
.flip-card {
  position: relative;
  background-color: transparent;
  width: 540px;
  height: 250px;
  perspective: 1000px;
}

/* Inner Flip Mechanism */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Flip on Hover */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

/* Card Faces */
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 10px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2em;
}

/* Back Face Flip */
.flip-card-back {
  transform: rotateY(180deg);
}

/* SOFTWARE PAGE IMAGES */
.software-page .card1-front {
  background-image: url('software-front.jpg');
}
.software-page .card1-back {
  background-image: url('software-back.jpg');
}
.software-page .card2-front {
  background-image: url('software-front2.jpg');
}
.software-page .card2-back {
  background-image: url('software-back2.jpg');
}

/* NETWORK PAGE IMAGES */
.network-page .card1-front {
  background-image: url('network-front.jpg');
}
.network-page .card1-back {
  background-image: url('network-back.jpg');
}
.network-page .card2-front {
  background-image: url('network-front2.jpg');
}
.network-page .card2-back {
  background-image: url('network-back2.jpg');
}

/* HARDWARE PAGE IMAGES */
.hardware-page .card1-front {
  background-image: url('hardware-front.jpg');
}
.hardware-page .card1-back {
  background-image: url('hardware-back.jpg');
}
.hardware-page .card2-front {
  background-image: url('hardware-front2.jpg');
}
.hardware-page .card2-back {
  background-image: url('hardware-back2.jpg');
}