/*Css calinfo
Vesion-4*/


       /* Mobile View Setup (Screens 768px wide or smaller) */
@media (max-width: 768px) {
  
  body {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centers everything cleanly on mobile */
    padding: 15px;
  }

.top-image-container {
    position: static !important;  /* Strips desktop absolute positioning */
    display: block !important;    
    transform: none !important;   
    width: 139px !important;      
    height: 200px !important;
    align-self: flex-start;       /* Snaps the image container to the left edge */
    margin: 0 0 20px 52px !important; /* Resets margins so it rests neatly against the left */
    order: 1;            
  }

  /* Target the actual image element directly to prevent the explosion */
  #cross.responsive-img {
    width: 139px !important;
    height: 200px !important;
    object-fit: contain;
  }

#mobile-links-wrapper {
    order: 2;            
    align-self: flex-start;    /* Snaps the entire links box to the left edge of the screen */
    margin-top: 0 !important;   
    margin-bottom: 20px !important;
    width: 100%;
    max-width: 250px !important; /* Maintains your clean button width */
    display: flex;
    flex-direction: column;
    align-items: stretch;      /* Makes both buttons fill the 250px width evenly */
  }

#content {
    order: 3;            
    align-self: flex-start;    /* Snaps the text content to the left edge of the screen */
    width: 100%;
    padding: 5px;        
  }


/* Base state for the body when loading fresh */
body {
  opacity: 0;
  animation: fadeInPage 0.8s ease-out forwards;
}

/* Active trigger for leaving a page */
body.fade-out-active {
  animation: fadeOutPage 0.4s ease-in forwards !important;
}


  /* Keeps your background watermark scale beautifully balanced on smaller screens */
  #bg-image {
    max-width: 80% !important;
    top: 50%;
  }
}

/* ============= navigatio code =============================*/

       .nav-btn {
            display: block;
            text-align: center;
            color: white !important; /* Forces text to stay white even if visited */
            padding: 10px 15px;
            text-decoration: none;
            border-radius: 4px;
            font-family: sans-serif;
            font-size: 14px;
            transition: background-color 0.2s ease, transform 0.1s ease;
        }

        /* The original state for the two buttons */
        .btn-home { background-color: #1a5276; } /* Rich Navy/Royal Blue */
        .btn-calendar { background-color: #2e4053; } /* Slate Blue/Gray */

        /* HOVER: Lightens the blue slightly and lifts the button up */
        .nav-btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.15);
        }
        .btn-home:hover { background-color: #2980b9; } /* Brighter Blue */
        .btn-calendar:hover { background-color: #4a5d6e; } /* Brighter Slate */

        /* VISITED: Keeps text white but subtly shifts the background to a deeper hue 
           so the user knows they have been there, without looking messy */
        .nav-btn:visited {
            opacity: 0.9; 
        }

        /* ACTIVE: Pressing down effect */
        .nav-btn:active {
            transform: translateY(1px);
            box-shadow: none;
        }

/*Vesion-3 navagation*/


        .nav-btn {
            display: block;
            text-align: center;
            color: white !important; /* Forces text to stay white even if visited */
            padding: 10px 15px;
            text-decoration: none;
            border-radius: 4px;
            font-family: sans-serif;
            font-size: 14px;
            transition: background-color 0.2s ease, transform 0.1s ease;
        }

        /* The original state for the two buttons */
        .btn-home { background-color: #1a5276; } /* Rich Navy/Royal Blue */
        .btn-calendar { background-color: #2e4053; } /* Slate Blue/Gray */

        /* HOVER: Lightens the blue slightly and lifts the button up */
        .nav-btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.15);
        }
        .btn-home:hover { background-color: #2980b9; } /* Brighter Blue */
        .btn-calendar:hover { background-color: #4a5d6e; } /* Brighter Slate */

        /* VISITED: Keeps text white but subtly shifts the background to a deeper hue 
           so the user knows they have been there, without looking messy */
        .nav-btn:visited {
            opacity: 0.9; 
        }

        /* ACTIVE: Pressing down effect */
        .nav-btn:active {
            transform: translateY(1px);
            box-shadow: none;
        }

/*============end of navigation code=====================*/

  /* ============fadecode1fx===========================================*/ 
/* 1. Define the Fade-In Animation Rules */
@keyframes fadeInPage {
  from {
    opacity: 0;
    transform: translateY(10px); /* Subtly lifts the element up as it fades in */
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 2. Create the Animation Class Fade in */
.fade-in-element {
  opacity: 0; /* Starts completely invisible */
  animation: fadeInPage 1.2s ease-out forwards; /* 0.8 seconds duration */
}

/* 3. Optional: Stagger the timings so things load in a beautiful sequence */
.delay-1 { animation-delay: 0.3s; }
.delay-2 { animation-delay: 0.6s; }
.delay-3 { animation-delay: 0.9s; }


/* 1. Define the Fade-Out Animation Script */
@keyframes fadeOutPage {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-10px); /* Subtly lifts the page up as it vanishes */
  }
}

/* 2. Create the Fade-Out Trigger Class */
.fade-out-active {
  animation: fadeOutPage 0.8s ease-in forwards !important;
}
/* Core Keyframes */
@keyframes fadeInPage {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeOutPage {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-10px); }
}
/*============Fade code 1 end==============================*/


        /* Main Body & Layout Adjustments */
        body {
            background-color: #F4D03F; /* Example Gold Background - matches your setup */
            margin: 0;
            padding: 20px;
        }

   .top-image-container {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%); /* Centers the absolute element perfectly */
      z-index: 9;                 /* Layer 1: Sits in the background */
      width: auto;
      display: flex;
      justify-content: center;
      margin-top: 3px
    } 

#bg-image {
  position: absolute;
  top: 47%;
  left: 50%;
  transform: translate(-50%, -50%); /* Keeps the image perfectly centered */
  z-index: 2; /* Places the image on the bottom layer */
  max-width: 50%;
  height: auto;
  opacity: 0.25; /* Scale from 0.0 (fully invisible) to 1.0 (fully solid) */
}

#cross {
        border: 5px solid #ffffff; /* Width, Style, and Color */
       }



.text-content {
  position: relative;
  z-index: 5; /* Places the text layer above the image */
  /*max-width: 800px;
  width: 100%;
  padding: 20px; /* Prevents text from hitting screen edges on mobile */
}
      .container img {
       display: block; /* Removes baseline spacing issues */
}
    .responsive-img {
      width: 100%;
      height: auto;
      display: block;
    }

    #content {
      position: relative;
      z-index: 1;                 
    }

        #content {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            color: #2C3E50; /* A dark, deep slate gray—much softer and more premium than pure black */
            line-height: 1.65; /* Adds breathing room between lines of text */
            font-size: 15px;
            max-width: 800px; /* Limits paragraph width so it is easier to read across screens */
        }

/*Vesion-3 navagation end*/

        /* Heading Style */
        #content h1 {
            font-size: 28px;
            color: #1A5276; /* Matches your beautiful "Home" button dark blue */
            margin-top: 0;
            margin-bottom: 20px;
            border-bottom: 2px solid rgba(26, 82, 118, 0.15); /* Soft baseline divider */
            padding-bottom: 8px;
        }

        /* Paragraph Spacing */
        #content p {
            margin-top: 0;
            margin-bottom: 20px; /* Replaces messy <br><br> tags with clean, modern spacing */
        }

        /* Inline Text Links */
        #content a {
            color: #1A5276; /* Rich Navy/Royal Blue matching your layout */
            text-decoration: none; /* Removes the ugly default underline */
            font-weight: 600; /* Makes links bold so they pop clearly against gold */
            border-bottom: 1px dashed #1A5276; /* Adds an elegant, subtle dashed underline */
            transition: all 0.2s ease;
        }

        /* Inline Link Hover State */
        #content a:hover {
            color: #2980b9; /* Slightly brighter blue on hover */
            border-bottom: 1px solid #2980b9; /* Solid underline on hover */
            background-color: rgba(26, 82, 118, 0.05); /* Extremely soft blue background tint */
            padding: 2px 4px;
            margin: -2px -4px;
            border-radius: 3px;
        }

        /* Visited Inline Links */
        #content a:visited {
            color: #4A235A; /* Deep plum/burgundy—looks beautiful with gold and signals a visited site */
            border-bottom-color: #4A235A;
        }

        /* Specialized Email Link Styling */
        #content a[href^="mailto:"] {
            background-color: #1A5276;
            color: white !important;
            padding: 3px 8px;
            border-radius: 4px;
            font-size: 13px;
            font-weight: normal;
            border-bottom: none;
        }
        #content a[href^="mailto:"]:hover {
            background-color: #2980b9;
        }
    </style>