/* ============================================================
   IMPORT PLAYFUL FONTS
   ============================================================ */
   @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&family=Lobster&display=swap');


   /* ============================================================
      GLOBAL SETTINGS
      ============================================================ */
   * {
     box-sizing: border-box; /* Ensures consistent box-sizing model across all elements */
   }
   
   html, body {
     height: 100%; /* Ensure both html and body take the full height of the viewport */
     margin: 0;
     padding: 0;
     font-family: 'Poppins', sans-serif; /* Default font */
   }
   
   
   /* ============================================================
      BODY SETTINGS - FLEX CONTAINER FOR STICKY FOOTER
      ============================================================ */
   body {
     display: flex;
     flex-direction: column;
     background-color: #FFFAF0; /* Soft background color */
   }
   
   
   /* ============================================================
      HEADER / BLOG TITLE
      ============================================================ */
   .header {
     padding: 20px;
     font-size: 50px;
     font-family: 'Lobster', cursive;
     color: #fff;
     margin: 0;
     text-align: center;
     background-color: #FF6F61; /* Soft coral color */
     transition: font-size 0.3s ease-in-out, padding 0.3s ease-in-out; /* Smooth transition for font-size and padding */
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     z-index: 1000;
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Shadow effect for header */
   }
   
   /* Header shrink effect */
   .header.shrink {
     font-size: 30px; /* Shrinks font size */
     padding: 10px;  /* Shrinks padding */
   }
   
   /* Header text styling */
   .header h2 {
     font-size: 60px;
     margin: 0;
   }
   
   .header h3 {
     font-size: 20px;
     font-weight: 300;
     color: #F0F0F0;
     font-style: italic;
   }
   
   
   /* ============================================================
      LAYOUT FOR COLUMNS (FLEXBOX)
      ============================================================ */
   .row {
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
     padding: 0 20px;
   }
   
   /* Column styling */
   .leftcolumn, .middlecolumn, .rightcolumn {
     padding: 20px;
   }
   
   /* Left column - occupies 25% of the width */
   .leftcolumn {
     flex: 1;
     min-width: 25%;
   }
   
   /* Middle column - main content area, takes up more space */
   .middlecolumn {
     flex: 3;
     min-width: 50%;
     padding-left: 20px;
   }
   
   /* Right column - occupies 25% of the width */
   .rightcolumn {
     flex: 1;
     min-width: 25%;
     padding-left: 20px;
   }
   
   
   /* ============================================================
      CARD STYLING
      ============================================================ */
   /* Card image */
   .cardimg {
     width: 100%;
     height: 200px;
     object-fit: cover;
     border-radius: 10px;
     transition: all 0.4s ease-in-out; /* Smooth transition for all properties */
   }
   
   /* Hover effect for card images */
   .middlecolumn .cardimg:hover {
     filter: brightness(0.8) saturate(1.3); /* Increase brightness and saturation */
     box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1); /* Shadow for depth */
   }
   
   /* Card hover effect */
   .middlecolumn .card:hover {
     background-color: #f3ebeb; /* Light background on hover */
     box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
     padding-right: 120px; /* Space for the sliver to slide in */
   }
   
   /* Card content styling */
   .card {
     background-color: #FFFFFF;
     padding: 20px;
     margin-top: 20px;
     border-radius: 15px;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
     position: relative;
     overflow: hidden;
     transition: all 0.4s ease-in-out;
   }

      /* Retirement calc card content styling */
      .retirementcalccard {
        background-color: #FFFFFF;
        padding: 20px;
        margin-top: 20px;
        border-radius: 15px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        position: relative;
        overflow: hidden;
        transition: all 0.4s ease-in-out;
      }
   
   
   /* ============================================================
      "READ MORE" SLIVER - SHOWS ON HOVER
      ============================================================ */
   .read-more {
     position: absolute;
     top: 0;
     right: -100%; /* Initially hidden */
     width: 10%; /* Sliver width */
     height: 100%;
     background-color: #ffa480; /* Soft coral */
     color: white;
     display: flex;
     text-align: center;
     align-items: center;
     justify-content: center;
     font-size: 18px;
     font-weight: bold;
     opacity: 0; /* Initially hidden */
     transition: all 0.4s ease-in-out; /* Smooth transition for all properties */
     cursor: pointer;
   }
   
   /* Show and slide in the "Read More" sliver on card hover */
   .card:hover .read-more {
     opacity: 1;
     right: 0; /* Slide in to the right */
   }
   
   
   /* ============================================================
      TEXT STYLING WITHIN CARDS
      ============================================================ */
   /* Remove default margin from h2 elements */
   .card h2 {
     margin: 0;
     padding: 0;
     font-size: 24px;
     line-height: 1.2;
   }
   
   /* Optional: Add spacing below h2 */
   .card h2 {
     margin-bottom: 10px;
   }
   
   /* Optional: Padding around paragraphs */
   .card p {
     margin-top: 10px;
   }
   
   
   /* ============================================================
      LINK STYLING
      ============================================================ */
   a {
     text-decoration: none; /* Removes underline */
     color: inherit; /* Inherit color from the parent element */
     outline: none; /* Remove outline on focus */
   }
   
   
   /* ============================================================
      HOME ICON
      ============================================================ */
   .home-icon {
     position: absolute;
     left: 20px;
     top: 50%;
     transform: translateY(-50%); /* Center vertically */
     font-size: 50px;
     color: #fff;
     transition: transform 0.3s ease;
   }
   
   .home-icon:hover {
     transform: translateY(-50%) scale(1.1); /* Slightly enlarge icon on hover */
     cursor: pointer;
   }
   
   
   /* ============================================================
      MAIN CONTENT AREA
      ============================================================ */
   .main-content {
     flex-grow: 1; /* Allow the main content to grow */
     display: flex;
     flex-direction: column;
   }
   
   
   /* ============================================================
      FOOTER
      ============================================================ */
   .footer {
     background-color: #FF6F61;
     color: white;
     text-align: center;
     padding: 20px;
     width: 100%;
     margin-top: auto; /* Push footer to the bottom */
   }
   
   
   /* ============================================================
      MOBILE RESPONSIVE STYLING
      ============================================================ */
   @media screen and (max-width: 800px) {
     .leftcolumn, .middlecolumn, .rightcolumn {
       width: 100%;
       padding: 10px;
       padding-left: 0;
       padding-top: 0;
     }
   
     .header.shrink {
       font-size: 25px; /* Even smaller font size on mobile */
     }
   
     /* Stack layout for mobile view */
     .row {
       flex-direction: column;
       align-items: center;
       padding: 10px;
     }
   }