.text-primary {
    color : #fff;
  }
  
  
  .header-img {
    width: 100%;
    height: auto; /* Maintain aspect ratio */
  }
  
  .header {
    width: 100%;
    height: 200px; /* Default height */
    /*background: url('assets/img/kahaniyan-hindi.png') no-repeat center center;*/
    background-size: 100% auto; /* Ensure the background scales horizontally */
    margin: 0; /* Remove any margin that may cause a gap */
    padding: 0; /* Remove padding that may cause spacing issues */
  }
  
  /* For smaller devices */
  @media (max-width: 420px) {
    .header {
     /* height: 141px;*/ /* Reduce the height for smaller screens */
      background-size: cover; /* Ensure the entire SVG fits */
    }
  }

  @media (min-width: 421px) and (max-width: 560px) {
    .header {
      /* height: 141px;*/ /* Reduce the height for smaller screens */
      background-size: cover; /* Ensure the entire SVG fits */
    }
  }
  
  /* For tablets */
  @media (min-width: 561px) and (max-width: 1024px) {
    .header {
      height: 250px; /* Adjust the height for tablet screens */
      background-size: cover; /* Ensure the image fills the header */
    }
  }
  
  /* For larger screens */
  @media (min-width: 1025px) {
    .header {
      height: 300px; /* Set a larger height for desktops */
      background-size: cover; /* Fill the header area */
    }
  }
  
  
  
  
  .globe-icon {
    font-size: 40px; /* Adjust the size of the globe icon */
    color: #000; /* Black color for the globe */
  }
  
  
  @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600&display=swap'); /* Import Montserrat SemiBold */

  .styled-text {
    font-family: 'Montserrat', sans-serif; /* Apply Montserrat font */
    font-weight: 600; /* SemiBold weight */
    font-size: 14px; /* Font size */
    color: #000; /* Light gray text color (Bootstrap's text-secondary) */
    margin-top: 16px; /* Add spacing from the top */
  }

  
  .story-of-the-day {
    width: 251px; /* Fixed width */
    height: 154px; /* Same as width to make it square */
    background-color: #f8f9fa; /* Light background color */
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    position: relative; /* For positioning inner elements */
    display: flex; /* Flexbox for vertical alignment */
    flex-direction: column; /* Stack content vertically */
    justify-content: flex-end; /* Push the text to the bottom */
    align-items: center; /* Center-align horizontally */
    padding: 16px; /* Inner padding for spacing */
    margin-top:20px;
  }

  .story-div{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-decoration: none;
  }

  .story-image{
    /*box-shadow: rgb(255, 255, 255) 10px -10px 0px -3px, #D1D9E6 10px -10px, rgb(255, 255, 255) 20px -20px 0px -3px;
    border-radius: 0 25px 25px 25px;*/

    border-radius:10px;box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  }

  .story-title {
    /* position: absolute;
    bottom: 0; */ /* Stick the text at the bottom */
    /* width: 100%; */ /* Full width of the card */
    /* background-color: rgba(0, 0, 0, 0.6);  *//* Semi-transparent background */
    color: black; /* White text for contrast */
    font-family: 'Montserrat', sans-serif; /* Montserrat font */
    font-weight: 600; /* SemiBold */
    font-size: 20px; /* Adjust font size */
    text-align: center; /* Center-align the text */
    padding: 5px 10px; /* Padding around the text */
    margin-top: 5px;
  }
  
  .corner-label {
    width: 70px; /* Adjusted size */
    height: 70px; /* Adjusted size */
    background-color: #ffc107; /* Yellow color */
    position: absolute;
    top: 0;
    right: 0;
    border-top-right-radius: 10px; /* Match card's rounded corners */
    clip-path: polygon(0 0, 100% 0, 100% 100%); /* Triangle shape */
  }
  
  .corner-label span {
    position: absolute;
    top: 15%; /* Adjusted to position at the top of the triangle */
    right: 10%; /* Adjusted to position near the edge */
    font-size: 14px;
    font-weight: bold;
    color: #000; /* Black text */
  }
  
  .bottom-text {
    margin-bottom: 10px; /* Add margin for better spacing */
    color: #007bff; /* Blue color for the text */
    text-align: center;
  }
  
  
  .highlight-card {
    height: 150px;
    border: 2px solid #d9e7f5;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }


  .stories-title {
    font-family: 'Montserrat', sans-serif; /* Apply Montserrat font */
    font-weight: 600; /* SemiBold weight */
    font-size: 28px; /* Font size */
    color: #000; /* Black text color */
    margin: 0; /* Remove default margins */
  }

  .rocket-full {
    width: 100%; /* Adjust the width of the image */
    height: 60px; /* Maintain the aspect ratio */
    margin-left: auto; /* Align the rocket image to the right */
    max-width:343px;
  }

  .story-card {
    width: 116px; /* Fixed width */
    height: 154px; /* Fixed height */
    position: relative;
    margin: auto; /* Center-align the card */
  }
  
  .border-outline {
    position: absolute;
    top: -10px; /* Distance from the top of the card */
    left: -10px; /* Distance from the left of the card */
    width: calc(116px + 20px); /* Border outline extends 10px on each side */
    height: calc(154px + 20px); /* Border outline extends 10px on each side */
    border-radius: 0 25px 25px 25px; /* Top-left corner is straight, others are rounded */
    z-index: -1; /* Send the border behind the card */
  }
  
  .story-age-image{
    height: 154px;
    width: 116px;
    border-radius: 0 25px 25px 25px;
    box-shadow: rgb(255, 255, 255) 10px -10px 0px -3px, #D1D9E6 10px -10px, rgb(255, 255, 255) 20px -20px 0px -3px  /* Outer box shadow */
  }

  .inner-card {
    width: calc(100% - 10px); /* Slightly smaller width to create an inner effect */
    height: calc(100% - 10px); /* Slightly smaller height for inner effect */
    background-color: #e9ecef; /* Slightly darker background */
    border-radius: 15px; /* Same rounded corners as the outer card */
    position: absolute;
    top: 5px; /* Positioned slightly down */
    left: 5px; /* Positioned slightly right */
    box-shadow: none; /* Remove shadow for the inner card */
  }

  .rocket-image {
    height: 30px; /* Adjust height to match the heading */
    margin-left: 10px; /* Add spacing between the heading and the image */
    margin-right:20px;
  }
  
  .line-separator {
    border: none;
    border-top: 2px solid #ffc107; /* Orange color for the line */
    width: 100%; /* Full width of the container */
  }
  
  
  .footer {
    background-color: #FFF0DB; /* Background color */
    border-radius: 10px; /* Rounded corners for the footer */
    padding: 20px;
    text-align: center;
    margin-top: 20px;
  }
  
  .language-section {
    display: inline-flex;
    align-items: center;
    justify-content: start;
    border: 1px solid #FFC074; /* Border around the language section */
    border-radius: 5px;
    padding: 5px 10px;
    width: fit-content;
    margin: 0 auto;
    background-color: #FFF0DB; /* Same as footer background */
    cursor:pointer;
  }
  
  .globe-icon {
    font-size: 20px; /* Size of the globe icon */
    color: #000; /* Black globe icon */
  }
  
  .language-text {
    font-family: 'Montserrat', sans-serif; /* Font style for the text */
    font-weight: 300; /* SemiBold */
    color: #000; /* Black text */
    font-size: 14px; /* Text size */
  }
  
  .footer-logo {
    height: 40px; /* Consistent height for logos */
  }
  
  .attribution-text {
    font-family: 'Montserrat', sans-serif; /* Font family */
    font-weight: 300; /* Light weight */
    font-size: 12px; /* Font size */
    line-height: 1.5; /* Readable line height */
    color: #6C757D; /* Secondary color */
  }
  
  .language-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent background */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
  }
  
  .language-popup.d-none {
    display: none;
  }
  
  .popup-content {
    background-color: #FFF;
    padding: 20px 30px;
    border-radius: 10px;
    text-align: center;
    width: 80%;
    max-width: 400px;
  }
  
  .popup-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 20px;
  }
  
  .language-option {
    padding: 10px;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    cursor: pointer;
  }
  
  .language-option:hover {
    background-color: #f1f3f5;
  }
  
  .close-popup {
    font-size: 16px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    cursor: pointer;
  }
  
  .footer {
    background-color: #FFF0DB !important; /* Footer background */
    border-radius: 10px 10px 0 0; /* Rounded corners */
    padding-left: 20px;
    padding-right: 20px;
    text-align: center;
    margin-top: 20px;
    margin-left:20px;
    margin-right:20px;
  }