@tailwind base;
@tailwind components;
@tailwind utilities;

#cards{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1.6rem;
}

#phone-mockup{
  width: 316px;
  height: 684px;
}

#message-box{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

#card-mockup{
  width: 90%; height: 100px;
}

.shrink{
transform:scaleX(1);
transform: scaleY(1);

}

/* Card Styling */
#card {
    width: 625px; 
    height: 250px ;
    padding: 1rem;
    display: block;
  }
  
  /* Content Container for Card */
  #content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
  }
  
  /* Card Image Styling */
  #card-image {
    width: 50%;
    height: 100%;
  }
  
  /* Card Content Styling */
  #card-content {
    padding-left: 1rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1rem;
  }
  
  /* Text Content Styling */
  #text-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  
  /* Responsive Design for Smaller Screens */
  @media screen and (max-width: 768px) {
    
    #card {
      width: 475px !important; /* Adjust card width for small screens */
      height: 250px;
      padding: 1rem;
    }

    #email-address-1{
      background-color: #f9fafb;
      
    }
  
    #cards {
      width: 100%;
    }
  }
  
  /* Truncate Text to 2 Lines */
  .truncate-2-lines {
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Limit text to 2 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
  }