/* header seection  */


.headerMain{
    
    /* background-color: #687FE5; */
    /* color: #f59577; */
    font-size:20px;
    padding:10px 15%;
}

.headerMain {
  background: linear-gradient(135deg, #1e3c72, #2a5298);
  color: #ffffff;
}
.headerMain h1 {
  color: #ffdd57; /* highlight main heading */
}
.headerMain h3 {
  color: #e0e0e0;
}
.headerMain {
  padding: 20px;
  text-align: center;
}

.headerMain h1 {
  font-size: 3.5rem; /* scales better than fixed px */
  margin-bottom: 10px;
  word-wrap: break-word;
}

.headerMain h3 {
  font-size: 1.2rem;
  line-height: 1.5;
  margin: 5px 0;
}

/* Mobile devices */
@media (max-width: 768px) {
  .headerMain h1 {
    font-size: 2.5rem;
  }
  .headerMain h3 {
    font-size: 1rem;
  }
}

/* Very small devices */
@media (max-width: 480px) {
  .headerMain h1 {
    font-size: 2rem;
  }
  .headerMain h3 {
    font-size: 0.9rem;
  }
}


/* hero section  */

.responsive-container {
  display: flex;
  max-width: 1200px;
  margin: 0 auto;      /* center horizontally */
  padding: 20px;
  
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.responsive-container .image-box,
.responsive-container .text {
  flex: 1;             /* share equal space */
}

.responsive-container img {
  width: 100%;         /* fit inside its box */
  height: auto;
  border-radius: 10px;
  border: 1px solid #2a5298;
}

.responsive-container .text {
  font-size: 1.2rem;
  color: #2a5298;
}

/* Tablet */
@media (max-width: 992px) {
  .responsive-container .text {
    font-size: 1rem;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .responsive-container {
    flex-direction: column; /* stack */
    text-align: center;
  }
  .responsive-container .image-box,
  .responsive-container .text {
    width: 100%;   /* take full width */
  }
  .responsive-container .text {
    margin-top: 15px;
    font-size: 0.95rem;
  }
}

/* card section  */


.mainCard{
    margin: 10px 15%;
    
    
}

.submaincard{
     display:flex;
     flex-wrap: wrap;
}

.imagediv{
    display: flex;
    align-items: center;
    justify-content: center;
}

.insideCard{
    margin:5px;
     padding:10px; 
     border-radius:10px;
     border:1px solid #2a5298;
}

.insideCardImg{
    height:250px;
    width:230px; 
    border-radius:10px
}

.insideCardText{
    font-size:1.5rem;
    text-align: center;
}

.cardprice{
    font-weight:bold;
   
    
}

.carddiscount{
    color:grey;
    text-decoration:line-through;
}

@media (max-width: 1080px){
    .mainCard{
    overflow-x: hidden;
    margin: 10px 10px;
    padding:20px 2%;
    
  
    

}

.submaincard{
     display:flex;
     flex-wrap: wrap;
    
      
     
}

.insideCard{
    margin:10px;
     padding:15px; 
     border-radius:10px;
     border:1px solid #2a5298;
}

.insideCardImg{
    height:250px;
    width:230px; 
    border-radius:10px
}

.insideCardText{
    font-size:1.5rem;
}
}
 /* Tablet: 2 cards per row */
@media (max-width: 992px) {
  
.mainCard{
    overflow-x: hidden;
    margin: 10px 10px;
    padding:20px 2%;
    
  
    

}

.submaincard{
     display:flex;
     flex-wrap: wrap;
    
      
     
}

.insideCard{
    margin:10px;
     padding:15px; 
     border-radius:10px;
     border:1px solid #2a5298;
}

.insideCardImg{
    height:250px;
    width:230px; 
    border-radius:10px
}

.insideCardText{
    font-size:1.3rem;
    text-align: center;
}
}

/* Mobile: 1 card per row  */
 @media (max-width: 480px) {
 .mainCard{
    overflow-x: hidden;
    margin: 5px 5px;
    padding:10px 2%;
    
  
    

}

.submaincard{
     display:block;
     flex-wrap: wrap;
    
      
     
}

.insideCard{
    margin:10px;
     padding:15px; 
     border-radius:10px;
     border:1px solid #2a5298;
     
}



.insideCardImg{
   
    
    height:250px;
    width:230px; 
    border-radius:10px;

    
    
    
}

.insideCardText{
    font-size:1.2rem;
    text-align: center;
}
}  


/* location  */

.locdiv{
    margin: 20px 15%;
}

iframe{
    height: 30rem;
    width: 40rem;
}

@media (max-width: 1080px){
    .locdiv{
    margin: 20px 20px;
}

iframe{
    height: 30rem;
    width: 40rem;
}
}

@media (max-width: 776px){
    .locdiv{
    margin: 20px 20px;
}

iframe{
    height: 15rem;
    width: 25rem;
}
}

@media (max-width: 576px){
    .locdiv{
    margin: 20px 20px;
}

iframe{
    height: 10rem;
    width: 20rem;
}
}

@media (max-width: 480px){
    .locdiv{
    margin: 20px 20px;
}

iframe{
    height: 10rem;
    width: 20rem;
}
}