body {
  background: linear-gradient(to bottom,#313131,#212121);
  /*background-image: url('/Images/3d/Wood1.jpg');
  background-size: cover;
  background-attachment: fixed; */
  font-family: 'Montserrat', sans-serif;
}

.navbar-image {
  height : 2rem;
}

.hero {
  min-height : 40vh;
  user-select: none;
  background: linear-gradient(to bottom,#313131,#212121);

}

.container1,.container2,.container3,.container4
{
  color :#ffffff;
  background: linear-gradient(to bottom,#272727,#111111);
}

.container1 {
  background-color: #111111;
  xbackground: linear-gradient(to bottom,"#111111",);
}

.container2 {
  xbackground-color: #272727;
}

.container3 {
  xbackground-color: #212121;
}

.container4 {
  xbackground-color: #676767;
}

.containergx {
  position: relative;
  width:100vw!important;
  height:100vh!important;
}


.text-justify {
  text-align: justify;
  text-align-last: left;
}

.text-shadow {
  text-shadow: 1px 1px 1px #111111;
}

/* Carousel */
.carousel-item {
  position : relative;
}

/* Boxes */
.box {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  max-width: 50%;       /* max width on medium/large screens */
  min-width: 150px;      /* optional */
  position: absolute;
  z-index: 5; 
}

.box-dark 
{
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  padding: 1rem;
  border-radius: 0.5rem;
}

/* Horizontal positions */
.box-left {
  left: 3rem;
  text-align: left;
}

.box-center {
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.box-right {
  right: 3rem;
  text-align: right;
}

.box-bottomright {
  right: 3rem;
  bottom : 3rem;
  text-align: right;
}


.toolbar {
  border-radius: 0.5rem;
  padding: 0.5rem 1rem;
}

.toolbar-bottom {
  position: absolute;
  bottom: -1.5rem;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 4px 6px rgba(0,0,0,0.15);
  z-index: 10;
}

.canvas {
  background-color: #111111;
  position:relative;
}

.canvas-box {
  border-radius:1rem;
  box-shadow: 0 4px 6px rgba(0,0,0,0.15);
  background-color: rgba(255,255,255,0.8);
  color:#111111;
  position:absolute;
  max-width:50%;
  max-height:70%;
  right:1rem;
  top: 50%;
  transform: translateY(-50%);
}


/* Buttons */
.btn-primary 
{
  background-color: #1111aa!important;
  box-shadow: 0 4px 6px rgba(0,0,0,0.15);
  border-radius : 0.75rem;
  border:none;

}

.btn-survey
{
  min-height : 120px;
  max-width : 240px;
  font-size : 1.5rem;
}

/* responsive adjustments for small screens */
@media (max-width: 767.98px) {
  .box ,.box-left,.box-center,.box-right {
      max-width: 90%;      /* almost full width on mobile */
      left: 50% !important;
      right: auto !important;
      transform: translate(-50%, -50%);
      text-align: center;  /* always center on small screens */
      text-justify: jusify;
      padding: 0.75rem;    /* slightly smaller padding */
  }

  .canvas-box {
    width:90%;
    border-radius:0;
    overflow:hidden;
    bottom:1rem;
    max-width:100%;
    max-height:25%;
    left: 50%;
    transform: translateX(-50%) translateY(0);;
    top: auto;
    height:20%;
  }
}