/*************************************************** Banner Headline Styling*********************************************************/ 

/*.hero-text{
	color:  #54585A;
	line-height: 1.5;
  	animation: fadeIn 2s ease-in-out;
}*/
.hero-text>.lead, .hero-text>.text-uppercase{
	 transform: translateY(-100%);
	 opacity: 0; 
	color: white;
  animation: slide-in 1s ease-in-out forwards;
}

.hero-text #exam-sch-btn{
	 transform: translateX(-100%);
	 opacity: 0; 
	color: white;
  animation: slide-in-btn 1s ease-in-out forwards;
}
.hero-text #exam-sch-btn:hover{
	background-color: rgba(84,88,90,.4);
}
@keyframes slide-in{
  0% {
    transform: translateY(-100%);
	  opacity: 0;
  }
  100% {
       transform: translateY(0);
	  opacity: 1;
	  
  }
}
@keyframes slide-in-btn{
  0% {
    transform: translateX(-100%);
	  opacity: 0;
  }
  100% {
       transform: translateX(0);
	  opacity: 1;
	  
  }
}


/****************************** Formatting the hero text*****************************************/
.hero-text > h1, .hero-text > p  {
	color: white;
	
}
.hero-text{
	background-color: rgba(0,0,0,.3);
	width: 50vw;
	padding: 35px;
	border-radius: 10px;
}
@media (max-width: 767px)
	{
.hero-text{
	
	width: 100%;

		}
	}
@media (max-width: 1090px)
	{
.hero-text{
	
	width: 100%;

		}
	}

@keyframes fadeIn {
  0% { opacity: 0; transform: translateY(-20px); }
  100% { opacity: 1; transform: translateY(0); }
}

.caption-wrapper >.container > .caption{
	background: rgba(255,249,217, .8);
	border-radius: 5px;
	width: 45vw;
	text-align: center;
}

@media (max-width: 767px)
	{
.caption-wrapper >.container > .caption{
	background: rgb(255, 249, 217) !important;
    color: #54585A;
	width: 100% !important;
}
#main-content>h2, #main-content>p {
	padding-left: 40px !important;
	padding-right: 40px !important;
}
.casa-services-image{
  float: none !important; 
}
}
/************************** Formatting the accrodion  ********************************************/
.accordion-button{
	font-size: 1.1em;
	background-color: rgba(136,139,141, .1);  
	font-weight: bold;
}
.accordion-item{
	margin-bottom: 10px !important;
	border: 1px solid silver;
	
}

.accordion .btn-primary{
	width: 20rem;
}

/************************* Formatting accrodion llst of links**************************************/
#content-well>ul>li>a, .accordion-body>ul>li>a {
	font-size: 1.05em;
	line-height: 2;
	
}
/*************************************************** CASA Icons Section Styling *********************************************************/ 
.icon-container{
	 display: flex;
     gap: 15px;
     justify-content: space-evenly;
     align-items: center;
	flex-wrap: wrap;
	
}
	.icon-link{
	display: block;
	text-align: center;
    border: 1px solid rgba(84, 88, 90, .3);
	width: 260px;
    height: auto;
    border-radius: 25px;
	background-color: white;
    transition: transform 0.3s ease;

}
.icon-link:hover {
       transform: scale(1.1);   
        }
/*************************************************** Heading Styling *********************************************************/ 
#main-content>h2, #main-content>p {
	padding-left: 80px;
	padding-right: 80px;
}
/*************************************************** CASA images Section Styling *********************************************************/ 
.grid-image-wrapper>img{
	border: 1px solid silver;
	border-radius: 15px;
}
.casa-services-image{
	
	border-radius: 50%;
	border: 1px solid #C8102E;
	 box-shadow: -10px 0px 0px #C8102E; 
}
/*************************************************** CASA Contact Us Section Styling *********************************************************/ 
.flex-contact-container{
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 75px;
	flex-wrap: wrap;
}
	.casa-contact{
		width: 600px;
		border: 1px solid silver;
		border-radius: 8px;
	}
.section-heading{
	border-bottom: 3px solid #C8102E;
	
}

/*************************************************** CASA Services Section Styling *********************************************************/ 
@media (max-width: 991px)
	{
		.cs>img{
			width: 75% !important;
			display: block;
			margin: 0 auto;
			
		}
		.cs>p,.cs>h3
		{
			text-align: center;
		}
	}
	@media (max-width: 700px)
	{
		.cs>img{
			width: 90% !important;
			display: block;
			margin: 0 auto;
		}
		.cs>p,.cs>h3
		{
			text-align: center;
		}
		
	}
@media (max-width: 768px) { 
    #main-content-span {
        width: 100%; 
		margin: auto;
    }
}