.fas {
            font-size: 20px;
        }
		
		.fa-2x {
			font-size: 2.5em!important;
		}
       
       .fa-1x {
			font-size: 1.5em!important;
		}
		
		.ai-grid {
    display: grid;
    grid-template-columns: 5fr 2fr;
   grid-gap: 15px; 
}

	.ai-announce-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 8fr;

}

.ai-announce-img {
    color: rgb(89, 20, 121);
    background-color: rgb(89, 20, 121);
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    /*background-image: url("../images/announcement-uen-puple-rd.png");
    background-size: contain;
    background-repeat: no-repeat;*/
    padding-top: 15px;
    padding-bottom: 10px;
    padding-left: 10px;
    
}

.ai-announce-lgtxt {
    color: #fff;
    background-color: rgb(89, 20, 121);
    font-size: 30px;
    font-weight: bold;
    text-align: center;
    line-height: 35px;
    padding-top: 30px;
    padding-bottom: 30px;
}

.ai-announce-text {
    color: #fff;
    background-color: rgb(89, 20, 121);
    padding: 30px 20px 20px 20px;
   border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

.ai-announce-text a{
    color: #d6bbe5;
    text-decoration: underline;
}
    
       
      .ai-nav {
           padding-bottom: 10px;
           padding-left: 20px;
       }
       
       .ai-banner {
           margin-top: 10px;
           background-color: rgb(89, 20, 121);
           color: #fff;
           padding: 30px;
           text-transform: uppercase;
           font-size: 40px;
           text-align: center;
           font-weight: bold;
           border-radius: 5px;
       }
        .ai-button a {
           background-color: rgb(89, 20, 121);
           color: #fff;
           padding: 10px 25px;
           text-transform: uppercase;
           font-size: 16px;
           text-align: center;
           font-weight: bold;
           border-radius: 5px;
            text-decoration: none;
            margin-top: 10px;
       }
       
        .ai-button a:hover {
           background-color: rgba(89, 20, 121, .75);
           color: #fff;
           padding: 10px 25px;
           text-transform: uppercase;
           font-size: 18px;
           text-align: center;
           font-weight: bold;
           border-radius: 5px;
            text-decoration: none;
       }

.text-over {
    color: #fff;
    font-size: 25px;
}

.image-container {
  position: relative; /* Container for positioning context */
  display: inline-block; /* Adjust as needed for layout */
}

.image-container img:hover {
  opacity: 60%;
}

.image-container img {
  display: block; /* Avoid unwanted spacing */
  width: 100%; /* Make the image responsive */
  height: auto; /* Maintain aspect ratio */
}

.overlay-text {
  position: absolute; /* Position relative to the container */
  top: 50%;
    /* width: 94%;
left: 50%;*/
   margin-left: auto;
    margin-right: auto;
  /*transform: translate(-50%, -50%);*/ /* Center the text */
  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
  color: #fff; /* White text color */
  padding: 10px 20px; /* Add some padding around the text */
  font-size: 35px;
  text-align: center;
}




       
       @media only screen and (min-width: 992px) and (max-width: 1221px) {
           .ai-grid {
    display: grid;
    grid-template-columns: 3fr 2fr;
    grid-gap: 15px;  
}
    .ai-announce-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 5fr;

}
            .a-nav {
           padding-bottom: -10px;
           padding-left: 20px;
       }
             .overlay-text {
  line-height: 30px;
  font-size: 30px;
  text-align: center;
}
       }
       
	@media only screen and (min-width: 768px) and (max-width: 991px) {
        
        .ai-grid {
    display: grid;
    grid-template-columns: 3fr 2fr;
    grid-gap: 15px;  
}
         .ai-announce-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 4fr;

}
          .ai-nav {
           padding-bottom: 10px;
           padding-left: 10px;
       }
        
      .ai-banner {
                 margin-top: 10px;
       }
        
        .overlay-text {
  line-height: 30px;
  font-size: 25px;
  text-align: center;
}
        
      
}
       
       @media only screen and (min-width: 480px) and (max-width: 767px) {
           
               .ai-grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 15px;  
}
           
            .ai-announce-grid {
    display: grid;
    grid-template-columns: 1fr;

}
           
        .ai-announce-img {
            display: none;
            padding: none;
           }
           
           .ai-announce-lgtxt {
    padding-top: 10px;
    padding-bottom: 10px;
               border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
           
                .ai-announce-text {
    padding-top: 0px;
    padding-bottom: 15px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border-top-right-radius: 0px;
}
           
           
            .grid-2 {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 15px;  
}
             .ai-banner {
                 margin-top: 10px;
        padding: 20px;
        font-size: 27px;
        line-height: 30px;
       }
                 .overlay-text {
  line-height: 25px;
  font-size: 20px;
  text-align: center;
}
    
       }
       
       @media only screen and (max-width: 479px) {
              .ai-grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 15px;  
}
           
            .ai-announce-grid {
    display: grid;
    grid-template-columns: 1fr;

}
           
        .ai-announce-img {
            display: none;
            padding: none;
           }
           
           .ai-announce-lgtxt {
    padding-top: 10px;
    padding-bottom: 10px;
               border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
           
                .ai-announce-text {
    padding-top: 0px;
    padding-bottom: 15px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border-top-right-radius: 0px;
}
           
            .grid-2 {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 15px;  
}
      .ai-banner {
        margin-top: 10px;
        padding: 15px;
        font-size: 27px;
        line-height: 30px;
       }
           
       
       .ai-nav {
           padding-bottom: 10px;
           padding-left: 20px;
       }
      
       
		.grid- .bluebutton {
			margin:0;
		}
       
 
.img-left {
    float: left;
    margin: 5px 10px 5px 5px;
 }
		
		.bluebutton {
			 background: #346abd;
    border: 1px solid #bbb;
    padding: 4px 6px;
    border-radius: 5px;
			margin: 5px 3px;
    display: inline-block;
		}
	
		a.bluebutton {
			color: #fff!important;
			transition: all .3s ease-in-out;
		}
        
.bluebutton:hover {
    background: #FFF;
    border: 1px solid #aaa;
    padding: 4px 6px;
	color: #346abd!important;
	transition: all .3s ease-in-out;
}
.overlay-text {
  line-height: 25px;
  font-size: 20px;
  text-align: center;
}
}