/* ========== Default Style (Desktop First ) ========== */

#hostel { 
  background-image: url("img/hostel/hostel_header.jpg");
  background-position: center center;  
  background-repeat: no-repeat;
  background-size: cover;
  height: 100vh;                
  display: flex;
  align-items: flex-end;     /* ? bottom */
  justify-content: center;   /* ? horizontal center */
}

.heroContent{
  width:100%;
  padding-bottom:10px;
}

.note{
font-family: "Gordita", Sans-serif;
  font-size: 14px;
  color:#333333;
  line-height: 30px;
  font-weight: 400;
}

.redstar{
font-family: "Gordita", Sans-serif;
  font-size: 16px;
  color:#FF0000;
  line-height: 30px;
  font-weight: 600;
}

.welcomeText1{
  font-family: "Butler", Sans-serif;
  font-size: clamp(30px, 6vw, 55px);
  color: #FBFBFB;
  font-weight:600;
  transform: translate(0%,0%);
  text-shadow:0px 0px 10px rgba(0, 0, 0, 0.78);
  padding:0px;
  margin:0;
  text-align:center;
 }

.welcomeText2{
 font-family: "Butler", Sans-serif;
 font-size: clamp(35px, 12vw, 100px);
 color: #FBFBFB;
 font-weight:600;
 transform: translate(0%,0%);
 text-shadow:0px 0px 10px rgba(0, 0, 0, 0.78);
 padding:0px;
 margin:0;
 text-align:center;
 }
  
  .heading-title{
    font-family: Butler;
    font-weight: 700;
	font-size:52px;
	line-height:1.3em;
    letter-spacing: 0em;
	color:#000000;
	}
	.HeadingBar{
	  width:100px;margin:0 auto;height:3px;border-width:0;background-color:#9b0000;opacity:1
  		   }
		   
.ParaText_Campus,.Para_Achievers {
  margin-top: 40px;
  font-family: "Gordita", Sans-serif;
  font-size: 18px;
  color:#666666;
  line-height: 30px;
  font-weight: 500;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.ParaText_Campus {
  width: 620px;
} 

.Para_Achievers{
  width: 700px;
}
		   
.campusLifeSection{
  background-image: url("img/decorate-bg-01.png");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  padding: 80px 0;
  position: relative;
}

.campusLifeSection::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(230,230,230,0.30);
}

.campusLifeSection .container-fluid{
  position:relative;
  z-index:2;
}

.mainheading2{
	font-family: "Butler", Sans-serif;
    font-size: 50px;
    font-weight: 700;
    line-height: 1.47em;
	color:#000000;
}

.ParaText_Normal{
    text-align: left;
    color: #716F6F;
    font-family: "Gordita", Sans-serif;
    font-size: 16px;
    font-weight: 400;
	line-height: 1.7em;
}

.headingRed{
    font-family: "Gordita", Sans-serif;
    font-size: 17px;
    font-weight: 600;
    text-transform: uppercase;
    line-height: 26px;
    letter-spacing: 3px;
    color: #B80924;
}

.carousel-item-custom-af img {
  height: 300px !important; 
}

.HeadingBarFullDark{
		  width:100%;margin:0 auto;height:1px;border-width:0;background-color:#666666;opacity:1
			 }	
			 
.heading3 {
    font-family: "Gordita", Sans-serif;
    font-size: 22px;
    font-weight: 500;
    text-transform: none;
    color: #9b0000;
}	
.ShineStarName{
	background-color:#003728;
	text-align:center;
	padding-top:3px;
	padding-bottom:3px;
	font-weight:500;
	color:#FFFFFF;
	font-family:'Gordita', Sans-serif;
	font-size: 13px;
	text-transform:uppercase;
  }
  
  .button-green {
    background-color: #003728;
	color:#FFFFFF;
}

 .button-gray {
    background-color:#E4E4E4;
	color:#003728;
}
  .button-style2 {
            transition: background-color 0.3s ease;
			padding:15px 0;
			transform: translate(0%,0%);						
			text-align:center;
			font-family:Butler;
			font-size: 22px;
			font-weight:500;
			margin:0px 0;
			display:block;
			text-decoration: none;
        }

        .button-style2:hover {
            background-color: #9b0000; /* Background color on mouseover */
			color:#FFFFFF;
			font-weight:600;
		/*	box-shadow:0px 0px 10px rgba(0, 0, 0, 0.78);*/
        }
		.button-style2:hover i {
              transform: translateX(6px);
         }
		 .button-style2 i {
		 font-size:16px;	
         }

  @media (min-width: 992px) {
  .col-lg-5th {
    flex: 0 0 20%;
    max-width: 20%;
  }
  
  .col-lg-1th {
    flex: 0 0 10%;
    max-width: 10%;
  }
  
  
  .col-lg-4th {
    flex: 0 0 25%;
    max-width: 25%;
  }
   .col-lg-3rd {
    flex: 0 0 33.3%;
    max-width: 33.3%;
  } 
  }
  
/* ========== Tablet View (Below 992px) ========== */

@media (max-width: 992px) {

#hostel{
height:400px;
}

.heading-title{   
	font-size:48px;
	line-height:1.3em;
    letter-spacing: 0em;
	}
	
	 .ParaText_Campus {
    font-size: 18px;
    line-height: 33px;
    width:620px;
  }
 
 
  
}
@media (min-width: 768px) and (max-width: 991.98px) {
  .col-md-4th {
    flex: 0 0 25%;
    max-width: 25%;
  }

}

/* ========== Mobile View (Below 576px) ========== */

@media (max-width: 576px) {

#hostel{
height:300px;
}
   .heading-title{   
	font-size:35px;
	line-height:1.5em;
    letter-spacing: 0em;
	}

  .ParaText_Campus {
    font-size: 16px;
    line-height: 30px;
    width: 100%;
    margin-top: 20px;
    padding: 0 20px;
    text-align: center;
  }
  .mainheading2{
  font-size:30px;
  }
  
 .Para_Achievers{
  width:100%;
  font-size:16px;
}


 .button-style2 {           
			padding:10px 0;			
			font-size: 18px;			
        }
		
.ParaText_Normal{ font-size: 15px; }
}