/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
background-color:#FFF8F9;
  color: #C69B98;
  font-family: "Lora";
  font-weight: 400;
  font-size: 2rem;
  }
.non-clickable-button {
    /* General button styling */
    display: inline-block; /* Allows width/height and keeps it inline */
    padding: .625rem 0.938rem;
    background-color: #f0f0f0;
    border: .1rem solid #ccc;
    cursor: default; /* Changes cursor to default arrow (not a pointer) */
    text-align: center;
    border-radius: 0.313rem;

    /* Styling the image inside */
    /* Ensure image source is correct */
}

.non-clickable-button { 
  display: flex;
  align-items: center;
  position: relative;
  margin: 1rem;
  width: 20rem;
  justify-content: center;
      padding: .625rem 0.938rem;        /* Spacing around the content */
    border-radius: 0.313rem;        /* Rounded corners */
    border: .1rem solid #D06B92; /* Optional border */
    cursor: pointer; 
  font-size: 1rem;
  }
/* Optional: Make the image responsive within the button */
.non-clickable-button img {
    max-width: 2rem;
    height: auto;
    margin-right: .5rem;
    vertical-align: middle; /* Aligns image vertically with button padding */
}

.icon-button {
    /* Display & Layout */
    display: flex; /* Allows aligning items inside */
    align-items: center;  /* Vertically centers the items */
    position: relative;
    width: 20rem;
    justify-content: center; /* Horizontally centers the items (optional) */
    text-decoration: none; /* Removes the default link underline */
    margin: 1rem;
    /* Button Aesthetics *              /* Text color */
    padding: .625rem 0.938rem;        /* Spacing around the content */
    border-radius: 0.313rem;        /* Rounded corners */
    border: .1rem solid #D06B92; /* Optional border */
    cursor: pointer;           /* Ensures the cursor is a pointer */
    font-size: 1rem;           /* Text size */
}
image-container {
  background-image: url('sheher.png');
  background-size: cover;
  min-height: 50px; /* Example height for desktop */
}


/* Styling the image inside the button */
.icon-button img {
    width: 2rem;       /* Set the icon size */
    height: auto;      /* Maintain aspect ratio */
    margin-right: .5rem; /* Space between image and text */
    vertical-align: middle; /* Ensures consistent vertical alignment */
}

/* Styling the text span */
.icon-button span {
    vertical-align: middle; /* Ensures consistent vertical alignment */
}

/* Optional: Hover effect for better user experience */
.icon-button:hover {
    background-color: #FDD5D6;
}
@media only screen and (max-width: 50rem){
 .icon-button { 
   width: 40%;
   display: block;
   margin: 10px;
   }
 .non-clickable-button {
   width: 40%;
   margin: 10px;
   }
 .image-item {
   width: 50%;
 } 
 .nav-link { 
   font-size: 2.25vw;
   display: flex;
   margin-bottom : 36rem;
   margin-left: -8.35rem;
   text-align: left;
   }
 .image-border-container {
 width: 48rem;
 height: 27rem;
 
 }
 .image-container {
    /* Use a smaller, optimized image for mobile */
    background-image: url('shehersmall.png');
    background-size: cover;
    /* Adjust height for mobile screens using vh units */
    height: 80vh;
    min-height: 80vh;
  }
 
 }
 
.image-border-container { 
  border: 1vw solid transparent;
    width: 90%;
    height: 80%;
    margin: auto;
    padding: 1.875rem;
  border-image: url(border1.png)50 round;
   display: flex;
  flex-wrap: wrap;
  gap: 2px;
  }
  
  a:link {
  color: #E0A8AD; /* Unvisited link color */
}

a:visited {
  color: #E0A8AD; /* Visited link color */
}

a:hover {
  color: #E0A8AD; /* Color when the user hovers over the link */
}

a:active {
  color: #E0A8AD; /* Color when the link is clicked (active state) */
}

.flex-container {
  display: flex; /* Enables flexbox layout for children */
  flex-wrap: wrap; /* Allows items to wrap onto new lines */
  /* Optional: Add spacing and alignment */
  justify-content: space-around; /* Distributes items evenly in each line */
  gap: 10px; /* Adds space between items */
}

 /* Centers the image within the container */


.text-overlay {
   font-size: 2vw;
    position: absolute; /* Positions the text relative to its parent container */
    top: 25rem; /* Starts the top edge of the text at the vertical midpoint */
    left: 10.75rem; /* Starts the left edge of the text at the horizontal midpoint */
    transform: translate(-50%, -50%); /* Centers the text element itself perfectly */
    color: white; /* Example styling for readability */
    text-align: center;
    padding: 10px;
}