/* Default styles for mobile devices (max-width: 640px) */
.fwrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px; /* Use gap for modern browsers */
  margin-bottom: 40px;
}

.container {
  max-width: 1000px;
  padding: 12px;
  margin: 20px auto;
}

.container > h1 {
  text-align: center;
  margin-bottom: 20px;
}

.poster img {
  max-width: 100%; /* Make it responsive */
  border: 3px solid #333;
  border-radius: 10px;
}

.info {
  min-width: 250px;
}

.wrapper {
  background: #f5f7f9;
  padding: 12px;
  margin-bottom: 20px;
  border-radius: 8px;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.infoC {
  display: flex;
  margin-bottom: 12px;
}

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

.colX {
  align-self: center;
  flex: 1; /* Flex for responsive layout */
  margin-right: 12px;
}

.colX img {
  width: 64px;
}

.colY {
  flex: auto;
}

/* Media Queries [START] */

/* For Tablets & Laptops (min-width: 640px) */
@media only screen and (min-width: 640px) {
  .fwrapper {
    flex-direction: row; /* Change to row for larger screens */
  }
  .linkC {
    justify-content: normal;
  }
}

/* For Large Screens (min-width: 766px) */
@media only screen and (min-width: 766px) {
  .wrapper {
    display: flex;
  }
  .colA {
    min-width: 350px; /* Consider using percentage for better responsiveness */
  }
  .linkC {
    justify-content: normal;
  }
}

/*  MEDIA QUERIES [END] */

/*--------------------
  Other Styles (etc)
----------------------*/

/* Typography */

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/poppins/v21/pxiEyp8kv8JHgFVrJJfecg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

html {
  font-size: 16px; /* Set base font size */
}

* {
  box-sizing: border-box; /* Ensure consistent box-sizing */
  font-family: "Poppins", sans-serif;
}

h1, h2, h3, h4, p {
  line-height: 1.5;
  margin: 0;
}

h1 { font-size: clamp(24px, 2vw + 5px, 32px); }
h2 { font-size: clamp(20px, 2vw + 5px, 28px); }
h3 { font-size: clamp(18px, 2vw + 5px, 24px); }
h4 { font-size: clamp(16px, 2vw + 5px, 20px); }
h5 { font-size: 15px; }
h6 { font-size: 13px; }

.txtM, .info > p {
  font-size: 18px;
  line-height: 1.8;
}

.containerA, .containerB {
  margin: 0 auto; /* Combined margin properties */
}

.wrapperP {
  padding: 1em;
  margin: 0 2px 2px 0;
  background: #f5f7f9;
  border-radius: 8px;
  box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1);
}

/* Colors */
.hlight { color: #EF4444; }
.hlight-b { color: #598FB8; }

.alert {
  color: #155724;
  padding: 16px;
  font-weight: 500;
  text-align: center;
  background: #d4edda;
  border-radius: 8px;
  border: 1px solid #c3e6cb;
}

/* Button Styles */
.btnA {
  background: #598FB8;
  border-radius: 50px;
  box-shadow: #598FB8 0 10px 12px -10px;
  color: #ffffff;
  cursor: pointer;
  font-family: inherit;
  font-size: 16px;
  font-weight: 500 !important;
  line-height: 24px;
  padding: 8px 18px !important;
  margin: 4px;
  width: 150px;
  border: 0;
}

.btnA:hover {
  background: #DA4453;
}