.radioSelection {
  overflow: visible;
}

/* Initially hide the div */
.checkBoxInputText {
  display: none; /* Hide by default */
  position: relative;
  bottom: -105%; /* Positions the top edge of child at bottom edge of parent */
  right: -1.2em;
  width: 100%; /* Optional: matches parent width */
  padding: 0.8em;
  height: fit-content;
  background-color: lightcoral;
  /*: rgba(248, 184, 58, 0.249);*/
  /*transform: scale(1.1) translateY(-10px);*/
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  color: black;
  align-items: center;
  /* left: -50%; */
  animation: contactAdress 400ms ease-out both;
  /*width: calc(100% + 100px);*/
  border-radius: 20px;
  border: #ffffff 1px solid;
  /*overflow: hidden;*/
  /*overflow: auto;*/
}

/* Show the div if a parent container contains a checked checkbox */
.radioSelection:has(input[type="checkbox"]:checked) .checkBoxInputText {
  display: block;
}

/* body {
    position: relative;
  } */

 header {
    /* position: fixed;
    top: 4%;
    left: 7em;
    z-index: 5; */

    /* position: relative;
    top: 0;
    left: 0;
    z-index: 5;
    background: #ffffff;
    width: 80%;
    border-radius: 50px;
    justify-content: space-between;
    align-items: center;
    backdrop-filter: blur(10px);
    border: solid 1px rgba(244, 82, 147, 0.8);
    transition: all 0.3s ease;
    animation: navigationBg 0.4s ease-in-out forwards; */
  }

/* hamburger check */

/* Fixed Navbar Layout */

/*navigationLinks class begins */

.navigation {
  /* display: flex;
  justify-content: space-between;
  align-items: center;
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.429);
  padding: 15px 30px;
  border-radius: 50px;
  transition: all 0.3s ease;
  animation: navigationBg 0.4s ease-in-out forwards;

  border: none;
  width: 100%;
  margin: 0 auto;
  position: relative; */
}

/* @media (width > 1100px) {
  .navigation img{
  position: absolute;
  top: 90%;
  
  width: 22vw;
  }
} */


/* .navigationLinks {
  display: flex;
  list-style: none;
  gap: 30px;
  position: relative;
  right: -11vw;
  
} */

/* Hide Checkbox & Hamburger on Desktop */
.menu-toggle {
  display: none;
}


/* .logo{
  display: none;
} */


/* .nav-links{
  display: none;
} */

/* @media(880px <= width < 1100px){
  
  .navigation img{
    top: 70%;
  }

  .navigationLinks{
    gap: 20px;
    
  }

  .flexItem:nth-child(2){
  display: flex;
  }

  .logo{display: none;}

  .headingContent{
      font-size: 85%;
    }
} */

/* Responsive Mobile Styles */




/* flexbox column hidden, display test */
/* Make the container queryable */
.containerQuery {
  container-type: inline-size;
  width: 100%;
  /* max-width: 800px; */
  resize: horizontal; /* Allows you to drag and test the width in browsers */
  overflow: auto;
  border: 2px dashed #ccc;
}

/* Default state: hidden */
.flex-column {
  display: none;
  flex-direction: row;
  gap: 10px;
  padding: 20px;
}

/* Target element behavior when container crosses 600px */
@container (min-width: 600px) {
  .flex-column {
    display: flex;
  }

  .item:nth-child(2){
    display: none;
  }

  .item:nth-child(3){
    position: absolute;
    
  }
}

.item {
  background-color: #3498db;
  color: white;
  padding: 15px;
  border-radius: 4px;
}