@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');

/* packages section start   */

.popular-packages-section{
    margin-right: 7rem;
    margin-left: 7rem;
    margin-top: 4rem;
  }

  .popular-packages-section h2{
    font-size: 2.5rem;
    text-align: center;
    color: #023047;
    margin-bottom: 1rem;
     font-family: 'Montserrat', sans-serif;
  
   }
  
   .popular-packages-section h3{
    font-size: 0.9rem;
    text-align: center;
    max-width: 900px;
    font-family: 'Lato', sans-serif;
    margin: auto;
    color: #FF5D06;
    font-weight: 600;
   
   }

  .packages-button-container {
    margin-top: 2rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding-left: 1%;
    
    
  }

  .packages-button {
    padding: 10px 20px;
    background-color: #ffffff;
    color: #a1a1a1;
    outline: 1px solid #a1a1a1;
    border: none;
    cursor: pointer;
   margin-right: 1rem;
   margin-bottom: 1rem;
    width: 120px;
    font-family: 'Lato', sans-serif;
   
  }

  .packages-button:hover{
    outline: 1px solid #FF5D06 ;
    color: #FF5D06;


  }
  .packages-button.active {
   color: #fff;
    background-image: linear-gradient(to right, rgb(251, 133, 0) 0%, rgb(255 93 6) 1% , rgb(53 0 90)100%);
    outline: none;
  }

  .popular-packages-content.active{
    display: block;


  }
  .popular-packages-content {
    display: none;
    padding-top: 20px;
    
    width: 100%;
  }


  .packages-container{
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    
  }

  .packages-main{
    width: 23%;
    
    position: relative;
    
  }


  .packages-imgbox{
    width: 100%;
    height: 130px;
    overflow: hidden;
    box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
    transition: 1s;
  }

  .packages-imgbox:hover{
    transform: perspective(200px) rotateX(0deg) rotateY(5deg);
  }

  .packages-imgbox img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 1s;
  
   
  }

  .packages-imgbox img:hover{
    transform: scale(1.3);
    
  }

  .packages-imgbox h3{
    position: absolute;
    top: 10px;
    padding: 3px;
    font-size: 0.8rem;
   color: #000000;
    left: 0;
    /* background-color: #ff9090; */
    font-family: 'Montserrat', sans-serif;

  }

  #content0 h3{
    background-color: #ff94df;
  }

  #content1 h3{
    background-color: #0fa102;
    
  }

  #content2 h3{
    background-color: #1e63f8;
  }

  #content3 h3{
    background-color: #fdff94;
  }

  #content4 h3{
    background-color: #cbff77;
    
  }

  #content5 h3{
    background-color: #91fff6;
  }

  .packages-text{
    padding: 0.5rem;
  }

  .packages-text p{
    font-size: 0.8rem;
    color: #4b4b4b;
    font-weight: 600;
    font-family: 'Montserrat', sans-serif;
  }

  .packages-text h4{
    font-size: 1.5rem;
    margin-top: 0.5rem;
    font-family: 'Montserrat', sans-serif;
  }
    
  /* packages section end   */


  /* mobile view */

  @media (max-width:1150px ) {
    .popular-packages-section{
    margin-right: 5rem;
    margin-left: 5rem;
  }
}


@media (max-width: 1000px) {

  .packages-container{
    justify-content: space-between;
  }
  .packages-main{
    width: 28%;
  }

  .packages-text h4{
    font-size: 1rem;
  }
}
    
  @media (max-width: 850px) {
    .popular-packages-section{
      margin-right: 4rem;
      margin-left: 4rem;
    }

  }

  @media (max-width:650px ) {

    .popular-packages-section{
      margin-right: 3rem;
      margin-left: 3rem;
    }

    .packages-main{
      width: 46%;
    }
    
    .popular-packages-section h2 {
    font-size: 1.2rem;
    margin-bottom:0.5rem;
      }
      
.popular-packages-section  h3 {
    font-size: 0.7rem;
          
      }

  }

  @media (max-width:480px ) {
    .popular-packages-section{
      margin-right: 1rem;
      margin-left: 1rem;
    }
  }