/* CSS Document */


body {margin-top:140px; color: #1C1C1C; display:flex; flex-direction: column; justify-content:center;}
body div{margin:auto; flex 1 100%;}
form {display:flex; flex-direction: column; justify-content:center; gap:10px; width:50%;  margin:auto}
.work_example_tm img {max-height: 400px; width:auto; max-width:90%; display: block; margin-left: auto; margin-right: auto;}
.work_example img {max-height: 400px; width:auto; max-width:90%;}
.nav {background-color: #E9CDF9; position:fixed; top:0; left:0; height:125px; width:100vw; z-index: 2}
.nav a{text-decoration: none; color: #1C1C1C; font-size:18px; padding-left:20px;}
.nav a:hover{color:#999999}
.website_title{color: #1C1C1C; text-align: center; font-size: 4em;}
.website_name{color: #999999; text-align: center; font-size: 2em;}
.ctgdlogo{position: absolute;                            
         top: 50%;                            
         left: 50%;                            
         transform: translate(-50%, -50%);  
}
.work_tm{display:flex; flex-direction: row; flex-wrap: wrap; justify-content:flex-start; align-items:flex-start; gap:20px; width:100%}
.work_example_tm{width:25%;overflow: hidden;position:relative;}
.work{display:flex; flex-direction: row; flex-wrap: wrap; justify-content:center; align-items:center; gap:20px; width:100%}
.work_example{}
.text-danger{
  color: #a6192e;
  background-color: #ffe5e5;
  border-left: 5px solid #a6192e;
  padding: 10px;
}
.overlay-text {
  position: absolute; /* Positions text relative to the container */
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0; /* Initially hide the text */
  transition: opacity 0.5s ease; /* Smooth transition for appearance */
  background-color: rgba(255, 255, 255, 0.8); /* Optional: Adds a dark overlay for better readability */
  color: black; /* Sets the text color to white */
  display: flex; /* Centers content using flexbox */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.work_example_tm:hover .overlay-text {
  opacity: 1; /* Makes the text visible when hovering over the container */
}

.twocolumn{display:flex; flex-direction: row; justify-content:flex-start; align-items:flex-start; gap:20px;}
.abitlarger{color: #1C1C1C;
  font-family: clby;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  padding-bottom: 10px;
  padding-top: 10px;
  text-transform: none;
}
.abitlarger a{text-decoration: none; color: #1C1C1C; font-size:18px; padding-left:20px;}
.abitlarger a:hover{color:#999999}
.top{align-self:flex-start; margin:0 auto;}
.center{text-align: center;}
.hcenter{
  display: flex;
  align-items: center; /* Centers vertically */
  /* Add height to the container, e.g., if you want to center in the viewport: */
  height: 125px;
}
.submit-button {
  background-color: #000;
  color: #fff;
  border: none;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
  border-radius: 12px;     /* Add rounded corners */
  width:150px;
}

.submit-button:hover {
  background-color: #333; 
}