body{
    background-color: #88867e;
}

.bg-custom{
    background-color: #292929;
}

.nav-link{
    color: #fff !important;
}
.nav-item:hover{
    cursor:pointer;
    font-style:oblique; 
    font-weight: 600;
    font-size: larger;
}

.navbar {
    display: inline-flex;
    list-style: none;
       
}

.navbar .menu li:hover {
    cursor:pointer;
    font-style:oblique; 
    font-weight: 600;
 }
 
 .navbar li {
     margin: 0 10px;
     position: relative;
 }
 .navbar li a {
     color: white;
     text-decoration: none;
 }
 .navbar li .dropdown {
     display: none;
     position: absolute;
     top: 100%;
     left: 0;
     background-color: #444;
     list-style: none;
     padding: 10px;
 }
 .navbar li:hover .dropdown {
     display: block;
 }
 .navbar li .dropdown li {
     margin: 5px 0;
 }

.jumbotron{
    background-image: url('../images/Moraine\ Lake.jpg');
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 91vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
       
}

        /* Animation Text */
/* 1. Register the content property so the browser knows how to animate it */
@property --animated-string {
    syntax: "<string>";
    inherits: false;
    initial-value: "";
  }
  
  /* 2. Apply the animation to the pseudo-element */
  #hero #animtext::after {
      content: var(--animated-string); /* Uses the registered custom property */
      animation-name: animtext;
      animation-duration: 10s;        /* Increased duration so words are actually readable */
      animation-iteration-count: infinite;
      animation-timing-function: steps(1); /* Crucial: Swaps words instantly instead of trying to blend them */
  }
  
  /* 3. The updated keyframes targeting the custom property */
  @keyframes animtext {
      0%, 100% {
          --animated-string: "Vision";
          color: rgb(38, 107, 235);
      }
      17% {
          --animated-string: "Inspirational";
          color: crimson;
      }
      34% {
          --animated-string: "Action-Oriented";
          color: rgb(192, 236, 102);
      }
      51% {
          --animated-string: "Values";
          color: violet;
      }
      68% {
          --animated-string: "Character";
          color: ivory;
      }
      85% {
          --animated-string: "Future";
          color: goldenrod;
      }
  }
  

#textbck h1{    
    color: #fcde58;
    text-shadow: 2px 2px 3px #000;
    font-family: "Josefin Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;     
    font-size: 5rem;
    
}

#textbck h2{    
    color: #eee3b5;
    text-shadow: 2px 2px 3px #000;
    font-family: "Josefin Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;     
    font-size: 3rem;
    margin-top: 20px;
    
}

#textbck hr{
    width: 60%;
    background-color: #fff;
    height: 5px;  
    margin: 0 auto;
}


.btn{
    box-shadow: 3px 2px 5px #000;
}

.card img:hover{
    opacity: 0.5;
    
}

  /* FORM SECTION */
  #bkform form {
    display: flex;
    flex-direction:column;
    
}
    
#bkform label, #bkform input, #bkform select, #bkform textarea, #bkform button {
    margin-bottom: 10px;
}
.column {
    width: 48%;
}

#booknow .row{
    background-color: #1ea7d9;
    border: #0445bd;
    border-top-left-radius: 20px;
    border-bottom-right-radius: 20px;
    box-shadow: 2px 3px 5px #000;
    box-shadow: -2px -3px -15px #000;
    padding: 20px;
}

#admission-form label{
    text-align: left;
    font-size: 1.2rem;
    color: #f7f2d7;
    text-transform: uppercase;
    text-shadow: 2px 2px 3px #000000;
}

#admission-form button{
    background-color: #f7f2d7;
    color: #0498bd;
    font-weight: bold;
    font-size: large;
    border-radius: 15px;
    padding: 5px;
    border-color: #0905eb;
}

#admission-form button:hover{
    background-color: #0905eb;
    color: #f7f0ec;
    
}

/*Package Gallery*/
#package h1 span, #booknow h1 span{
    text-align: center;
    font-family: "Edu AU VIC WA NT Guides", cursive;
    text-decoration: underline;
    color: #0498bd;
}

#package hr, #booknow hr{
    width: 30%;
    background-color: #0445bd;
    height: 2px;  
    margin: 0 auto;
    
}

#package i{
    color: rgb(243, 160, 6);
}

#package .card{
    border-top-left-radius: 50px;
    border-bottom-right-radius: 50px;
    background-color: azure;
    box-shadow: 2px 2px 5px #292929;
}

#package h1, #booknow h1{
    text-align: center;
    font-family: "Edu AU VIC WA NT Guides", cursive;
}

#packagefooter h5{
    float: right;
}
#packagefooter button{
    float: left;
    padding: 5px;
    border-radius: 5px;
    border-color: #f7f2d7;
    color: #292929
}

#packagefooter button:hover{
    background-color: #0905eb;
    color: #f7f0ec; 
}

button{
    box-shadow: 1px 2px 3px #352535;
}

.card p{
    text-align: justify;
    font-size: smaller;
    margin: 20px;
}



/* Services Container Card */
.responsive {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 20px;
    background: #ffffff; /* Gives a clean container look */
    border-radius: 12px;
    padding: 15px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); /* Soft shadow for a modern look */
}

/* Fixed Image Styling */
.responsive img {
   width: 100%;
   max-width: 400px;  /* Prevents the image from becoming huge */
   height: 250px;     /* Keeps a uniform height across your blocks */
   object-fit: cover; /* Crops image cleanly without distortion */
   border-radius: 8px; 
}

/* The Pill-Shaped Labels (School Theme) */
.responsive figcaption {
    text-align: center;
    margin-top: 15px;
    width: 100%;
    max-width: 250px;       /* Keeps the capsule button a uniform, readable width */
    height: 38px;
    line-height: 38px;      /* Vertically centers the text perfectly */
    background-color: #1a365d; /* Deep academic navy blue instead of dark gray */
    border: 1px solid #2b6cb0; /* Accent border color */
    border-radius: 30px;    /* Clean pill shape */
    color: #f7f2d7;
    font-weight: 600;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* Smooth hover effect on the pill button */
.responsive figcaption:hover {
    background-color: #2b6cb0;
    transform: translateY(-2px);
}

/* 1. Target the main parent container to display items in a row grid */
/* 1. Set the main container wrapper to a modern flex/grid alignment layout */
.responsive#services {
    display: grid;
    /* Automatically handles columns horizontally across rows instead of stacking */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;              /* Uniform spacing between cards */
    padding: 30px 15px;
    max-width: 1200px;
    margin: 0 auto;         /* Horizontal alignment center alignment */
}

/* 2. Style the internal layout cards wrapping each option row structure */
.responsive#services > div {
    display: flex;
    justify-content: center;
}

/* 3. Ensure figure dimensions flow predictably */
.responsive#services figure {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    width: 100%;
}

/* 4. FORCE ALL IMAGES TO HAVE THE EXACT SAME RESOLUTION / RATIO */
.responsive#services figure img {
    width: 100%;
    max-width: 280px;      /* Restricts upper box boundary limits */
    height: 180px;         /* ENFORCES FIXED UNIFORM HEIGHT FOR ALL IMAGES */
    
    /* CRUCIAL ASPECT: Crops the graphic cleanly to fit the box without warping proportions */
    object-fit: cover;     
    
    border-radius: 12px;   /* Clean rounded card border look */
    margin-bottom: 15px;   /* Spacer below the image box area */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.06);
}

/* 5. Pill-shaped buttons structure configuration */
.responsive#services figcaption {
    text-align: center;
    width: 100%;
    max-width: 220px;
    height: 40px;
    line-height: 40px;     /* Vertically shifts the inner text center precisely */
    background-color: #1a365d; 
    border-radius: 30px;
    color: #ffffff;
    font-weight: bold;
    letter-spacing: 0.5px;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease, background-color 0.2s ease;
}

/* Optional hover interaction styling rules */
.responsive#services figcaption:hover {
    background-color: #2b6cb0;
    transform: translateY(-2px);
}





/* Gallery Section */

iframe{
    width: 100%;
    height: 90vh;
}

/* About us */

#infrm{
    background-color: #292929;
    color: #f7f0ec;
    padding: 5px 20px;
    border-radius: 40px;
}

#infrm h1, h2{
    font-family: "Edu Guides";
}

#infrm p{
    text-align: justify;
    padding: 20px;
}

#rwtxt{
    position: absolute;
    top: 20%;
    left: 5%;
    color: #030450;
    font-weight: bold;
    text-shadow: 2px 2px 3px #000000;
}

@media screen and (max-width:600px ) {
    #rwtxt{
        position: relative;
    }
}

/* Footer Section */
#footer{
    background-color: #0498bd;
    padding: 30px 0;
    color: whitesmoke;
}

#footer a{
    text-decoration: none;
    color: whitesmoke;
    
}

#footer a:hover{
    font-weight: bold;
    color: #000;
}

.mdicn{
    align-items: center;
    justify-content: center;
    size: 150px;
    object-fit: contain;
}

/* REGISTRATION PART */

.form-control{
    margin-bottom: 20px;
}