.container {
  padding-top: 10px;
  padding-bottom: 5px;
  min-width: 1480px;
}

/* navbar */

/* Page 1 */

body {
  background-color: #fffcf0; /* Fallback color in case the image doesn't load */
}

.img-bg-pg1 {
  background-image: url("../assets/Page1.png");
  background-repeat: no-repeat;
  height: auto;
  width: 1480px;
  min-height: 62rem;
  padding: 0;
  position: relative;
}

p {
  text-align: justify;
}

.fixed-icon-page1 {
  position: absolute; /* Set position to absolute */
  line-height: 0px;
  background-color: #de8533;
  top: 10px; /* Adjust top position */
  left: 10px; /* Adjust right position */
  border-radius: 50%;
  height: 70px;
  width: 70px;
  padding: 0px;
  border: 0;
  font-size: 70px;
}

.center-img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

.bi-info-color {
  color: white;
}

.transparent-btn {
  background-color: transparent;
  border: none;
  padding: 0;
}

/* Page 2 */

.img-bg-pg2 {
  background-image: url("../assets/Page2.png");
  background-size: contain;
  background-repeat: no-repeat;
  height: auto;
  width: 1480px;
  min-height: 62rem;
  padding: 0px;
  margin: 0;
  position: relative;
}

.fixed-icon-page2-1 {
  position: absolute; /* Set position to absolute */
  line-height: 0px;
  opacity: 0.8;
  background-color: orange;
  top: 431px; /* Adjust top position */
  left: 765px; /* Adjust right position */
  border-radius: 50%;
  height: 50px;
  width: 50px;
  padding: 0px;
  border: 0;
  font-size: 50px;
}

.fixed-icon-page2-2 {
  position: absolute; /* Set position to absolute */
  line-height: 0px;
  opacity: 0.8;
  background-color: orange;
  top: 335px; /* Adjust top position */
  left: 991px; /* Adjust right position */
  border-radius: 50%;
  height: 50px;
  width: 50px;
  padding: 0px;
  border: 0;
  font-size: 50px;
}

.fixed-icon-page2-2-1 {
  position: absolute; /* Set position to absolute */
  line-height: 0px;
  opacity: 0.8;
  background-color: orange;
  top: 335px; /* Adjust top position */
  left: 535px; /* Adjust right position */
  border-radius: 50%;
  height: 50px;
  width: 50px;
  padding: 0px;
  border: 0;
  font-size: 50px;
}

.fixed-icon-page2-3 {
  position: absolute; /* Set position to absolute */
  line-height: 0px;
  opacity: 0.8;
  background-color: orange;
  top: 261px; /* Adjust top position */
  left: 915px; /* Adjust right position */
  border-radius: 50%;
  height: 50px;
  width: 50px;
  padding: 0px;
  border: 0;
  font-size: 50px;
}

.fixed-icon-page2-3-1 {
  position: absolute; /* Set position to absolute */
  line-height: 0px;
  opacity: 0.8;
  background-color: orange;
  top: 261px; /* Adjust top position */
  left: 608px; /* Adjust right position */
  border-radius: 50%;
  height: 50px;
  width: 50px;
  padding: 0px;
  border: 0;
  font-size: 50px;
}

.fixed-icon-page2-4 {
  position: absolute; /* Set position to absolute */
  line-height: 0px;
  opacity: 0.8;
  background-color: orange;
  top: 543px; /* Adjust top position */
  left: 355px; /* Adjust right position */
  border-radius: 50%;
  height: 50px;
  width: 50px;
  padding: 0px;
  border: 0;
  font-size: 50px;
}

.fixed-icon-page2-5 {
  position: absolute; /* Set position to absolute */
  line-height: 0px;
  opacity: 0.8;
  background-color: orange;
  top: 532px; /* Adjust top position */
  left: 640px; /* Adjust right position */
  border-radius: 50%;
  height: 50px;
  width: 50px;
  padding: 0px;
  border: 0;
  font-size: 50px;
}

.fixed-icon-page2-5-1 {
  position: absolute; /* Set position to absolute */
  line-height: 0px;
  opacity: 0.8;
  background-color: orange;
  top: 532px; /* Adjust top position */
  left: 1128px; /* Adjust right position */
  border-radius: 50%;
  height: 50px;
  width: 50px;
  padding: 0px;
  border: 0;
  font-size: 50px;
}

.fixed-icon-page2-6 {
  position: absolute; /* Set position to absolute */
  line-height: 0px;
  opacity: 0.8;
  background-color: orange;
  top: 113px; /* Adjust top position */
  left: 765px; /* Adjust right position */
  border-radius: 50%;
  height: 50px;
  width: 50px;
  padding: 0px;
  border: 0;
  font-size: 50px;
}

.fixed-icon-page2-7 {
  position: absolute; /* Set position to absolute */
  line-height: 0px;
  opacity: 0.8;
  background-color: orange;
  top: 886px; /* Adjust top position */
  left: 267px; /* Adjust right position */
  border-radius: 50%;
  height: 50px;
  width: 50px;
  padding: 0px;
  border: 0;
  font-size: 50px;
}

.fixed-icon-page2-8 {
  position: absolute; /* Set position to absolute */
  line-height: 0px;
  opacity: 0.8;
  background-color: orange;
  top: 390px; /* Adjust top position */
  left: 1279px; /* Adjust right position */
  border-radius: 50%;
  height: 50px;
  width: 50px;
  padding: 0px;
  border: 0;
  font-size: 50px;
}

/* Effects */

.fixed-icon-page1:hover {
  height: 90px;
  width: 90px;
  font-size: 90px;
}

.fixed-icon-page2-1:hover,
.fixed-icon-page2-2:hover,
.fixed-icon-page2-2-1:hover,
.fixed-icon-page2-3:hover,
.fixed-icon-page2-3-1:hover,
.fixed-icon-page2-4:hover,
.fixed-icon-page2-5:hover,
.fixed-icon-page2-5-1:hover,
.fixed-icon-page2-6:hover,
.fixed-icon-page2-7:hover,
.fixed-icon-page2-8:hover {
  height: 60px;
  width: 60px;
  font-size: 60px;
}

/* Page 3 */

#Page3 {
  position: relative;
  font-size: 40px;
  text-decoration: solid;
  font-weight: bold;
  text-align: center;
  top: 1025px;
}

.img-bg-pg3 {
  background-image: url("../assets/Page3.png");
  background-size: contain;
  background-repeat: no-repeat;
  height: auto;
  width: 1480px;
  min-height: 93rem;
  padding: 0px;
  margin: 0;
  position: relative;
}

.fixed-icon-page3 {
  position: absolute; /* Set position to absolute */
  line-height: 0px;
  opacity: 0.8;
  background-color: orange;
  border-radius: 50%;
  height: 80px;
  width: 80px;
  padding: 0px;
  border: 0;
  font-size: 80px;
}

.fixed-icon-page3:hover {
  height: 90px;
  width: 90px;
  font-size: 90px;
}

/* Page 4 */

.img-bg-pg4 {
  background-image: url("../assets/page4/solid.png");
  transition: background-image 0.5s ease;
  background-size: contain;
  background-repeat: no-repeat;
  height: auto;
  width: 1480px;
  min-height: 40rem;
  padding: 0px;
  margin: 0;
  position: relative;
}

.sel-botton {
  position: absolute;
  width: 132px;
  height: 42px;
  background-color: transparent;
  color: red;
  text-decoration: solid;
  font-weight: bold;
  font-size: 50px;
}

.sel-botton:hover {
  background-color: black;
  opacity: 0.2;
}

/* Solid */

.fixed-icon-page4 {
  position: absolute; /* Set position to absolute */
  line-height: 0px;
  background-color: #de8533;
  top: 10px; /* Adjust top position */
  left: 10px; /* Adjust right position */
  border-radius: 50%;
  height: 70px;
  width: 70px;
  padding: 0px;
  border: 0;
  font-size: 70px;
}

.square-1 {
  position: absolute; /* Set position to absolute */
  line-height: 0px;
  opacity: 0.8;
  background-color: orange;
  border-radius: 20%;
  height: 50px;
  width: 50px;
  padding: 0px;
  border: 0;
  font-size: 50px;
}

.square-2 {
  position: absolute; /* Set position to absolute */
  line-height: 0px;
  opacity: 0.8;
  background-color: orange;
  border-radius: 20%;
  height: 50px;
  width: 50px;
  padding: 0px;
  border: 0;
  font-size: 50px;
}
.square-2-2 {
  position: absolute; /* Set position to absolute */
  line-height: 0px;
  opacity: 0.8;
  border-radius: 20%;
  background-color: orange;
  height: 50px;
  width: 50px;
  padding: 0px;
  border: 0;
  transform: rotate(90deg) skew(15deg);
  font-size: 50px;
}

.rotate-2 {
  position: absolute;
  top: 0px;
  left: 0px;
  transform: rotate(270deg);
}

.square-3 {
  position: absolute; /* Set position to absolute */
  line-height: 0px;
  opacity: 0.8;
  background-color: orange;
  border-radius: 20%;
  height: 50px;
  width: 50px;
  padding: 0px;
  border: 0;
  font-size: 50px;
}

/* Contacts */

.circle-1 {
  position: absolute;
  line-height: 0px;
  background-color: orange;
  opacity: 0.8;
  top: 186px;
  left: 845px;
  border-radius: 50%;
  height: 50px;
  width: 50px;
  padding: 0px;
  border: 0;
  font-size: 50px;
}

/* Effects */

.fixed-icon-page4:hover {
  height: 90px;
  width: 90px;
  font-size: 90px;
}

.square-1:hover,
.square-2:hover,
.square-2-2:hover,
.square-3:hover {
  height: 60px;
  width: 60px;
  font-size: 60px;
}

.circle-1:hover {
  height: 60px;
  width: 60px;
  font-size: 60px;
}

/* Bottom selection */

.bot-select {
  background-color: black;
  opacity: 0.2;
}

/* Set custom position for the carousel controls */
.carousel-control-prev,
.carousel-control-next {
  width: 50px; /* Adjust as needed */
  height: 100%; /* Occupy full height of carousel */
  opacity: 0.5; /* Adjust opacity as needed */
  background: rgba(0, 0, 0, 0.3); /* Background color */
}

/* Style for the carousel control icons */
.carousel-control-prev-icon,
.carousel-control-next-icon {
  position: absolute;
  top: 50%; /* Vertically center the icons */
  transform: translateY(-50%); /* Vertically align to center */
}

/* Adjust the position of the previous button */
.carousel-control-prev {
  left: 0; /* Position on the left side */
}

/* Adjust the position of the next button */
.carousel-control-next {
  right: 0; /* Position on the right side */
}

/* Indicators */

.carousel-indicators [data-bs-target] {
  position: relative;
  font-weight: bold;
  top: -20px;
  text-indent: 0px;
  font-size: 20px;
  text-align: center;
}

/* Python code web page */

.Python {
  position: relative;
  text-align: center;
}

#Pyhton_code {
  background-color: #0c2d48;
  color: white;
}

/* Increase the height of the modal */
.modal-application {
  width: 100%; /* You can adjust the viewport height (vh) as needed */
}

.line-separator {
  border-left: 2px solid #ffffff; /* Adjust the line color and thickness as needed */
  height: 100%; /* This makes the line span the full height of the columns */
}