@charset "UTF-8";
/* Body */     
 

   body {
            background-color: #f5f5f5;
           /* background:  rgba(0,112,159,0.55);*/
    }
    
     
          html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }
        .wrapper {
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }
        .content {
            flex: 1;
            padding: 20px;
        }
        .section {
            border:1px solid #ccc; 
            padding:20px; 
            border-radius:10px; 
            margin-bottom:20px;
            background: #fafafa;
        }
          /* .section { max-width:900px; margin:40px auto; padding:0 20px; }*/
           
           
        .profile-img { 
            width:120px; 
            height:120px; 
            border-radius:50%; 
        }
        .form-control { 
            width:100%; 
            padding:10px; 
            margin:8px 0; 
        }
        .btn { 
            padding:10px 10px; 
           /* background:#ee6b2b; */
            background:#ff6b00;
            color:white; 
            border:none; 
            cursor:pointer; 
            border-radius:10px; 
            transition:0.3s;
            text-decoration:none; 
            font-weight:600;
            display:inline-block; 
        }
        .btn:hover { 
            background:#00709f; 
            color:white;
        }
        .btn-danger { background:#dc3545; }
        .btn-danger:hover { background:#a71d2a; }
        
         .btn-custom {
            background-color: #007bff;
            color: white;
        }
        .btn-custom:hover {
            background-color: #00709f;
        }
       /* .btn { display:inline-block; background:#00b4d8; color:white; padding:12px 25px; border-radius:30px; text-decoration:none; font-weight:600; transition:0.3s; }
    .btn:hover { background:#0077b6; }*/
        footer {
            background: #333;
            color: white;
            text-align: center;
            padding: 25px;
        }
   .container {
    max-width: 1110px;
    margin-top: 40px;
 background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);

            
        }
.container2 {
   /* max-width: 500px;
    margin-top: 50px;
  background: white;*/
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
 
}
       
        
   /* Navbar background and text color */
.navbar {
    background-color: #ffcd00; /* bright yellow background */
    /*font-size:20px;*/
    position: sticky;
    top: 0;
    z-index: 1020;
    padding-top: 0.25rem; /* same as py-1 */
    padding-bottom: 0.25rem;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1); /* optional subtle shadow */
}

/* Navbar links */
.navbar-nav li a {
    transition: color 0.3s ease, font-weight 0.3s ease; /* smooth transition */
    color: #ee6b2b;           /* set orange for all navbar links */
    font-weight: 600;
    
}


/* Navbar links hover effect */
.navbar-nav li a:hover {
    color: #0a719e !important; /* change text to blue on hover */
    font-weight: 600;           /* bold text */
    /* optional alternative color:
       color: #ffde59 !important; 
    */
}
  /* Active link color */
.navbar-nav li.active a,
.navbar-nav li a.active {
    color: #0a719e !important;  /* blue for active link */
    font-weight: 600;
}


.navbar-brand img {
  max-height: 175px;
  margin: 0;
    padding: 0;
}

.navbar-toggler:focus {
      box-shadow: none;
    }
@media (max-width: 991px) {
  .navbar-brand {
    margin-left: auto;
    margin-right: auto;
  }
  .navbar-toggler {
    top: 10px;
   padding: 0.25rem;
    margin-right: 0.5rem; 
  }
}
/*.navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0,0,0, 0.8)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}*/
.main-nav {
  background-color: #ffcd00; /* JASE yellow */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
 /* gap: 12px;
  padding: 15px 10px;*/
}
/*
.nav-btn {
  background-color: #f266ab; 
  color: #fff;
  font-weight: bold;
  padding: 10px 18px;
  border-radius: 8px;
  text-decoration: none;
  font-size: 1rem;
  transition: all 0.3s ease;
}*/

/* Hover & focus effects */
.nav-btn:hover,
.nav-btn:focus {
  background-color: #ff6b00; /* bright orange hover */
  transform: translateY(-2px);
}

/* Active/selected page */
.nav-btn.active {
  background-color: #0077cc; /* blue highlight */
}

/* Logout button special */
.nav-btn.logout {
  background-color: #ff4b4b;
}

.nav-btn.logout:hover {
  background-color: red;
}

/* Responsive design */
@media (max-width: 600px) {
  .main-nav {
    flex-direction: column;
    align-items: center;
  }
  .nav-btn {
    width: 90%;
    text-align: center;
  }
}
  
  /* h1 { font-size:2.2em; margin-bottom:10px; }*/
   h2 { color:#0077b6; margin-top:30px; }
   
   /*  .package { 
          background:#f1f9ff; 
          border-radius:15px; 
          padding:20px; 
          margin-bottom:25px; 
          box-shadow:0 2px 5px rgba(0,0,0,0.05);
          }
          
    .package h3 { color:#0096c7; margin-top:0; }
    */
    
  
    
    form { 
        background:#f8f9fa; 
        padding:25px; 
        border-radius:12px; 
        box-shadow:0 2px 6px rgba(0,0,0,0.05);
        margin: auto;
        max-width: 500px;
        display: flex;
        flex-direction: column; gap: 10px; 
    }
    
     @media(max-width:600px){ body{font-size:15px;} h1{font-size:1.6em;} }
   h2 { text-align: center; }
    
    
    label { display:block; margin-top:5px; font-weight:600; font-weight: bold; }
         
         
    input, select, textarea{ padding: 10px; font-size: 1rem;border:1px solid #52BAD5; border-radius:8px; margin-top:6px;}
         
        
   
  /* .container { max-width: 600px; margin: auto; background: white; padding: 30px; border-radius: 10px; box-shadow: 0 0 10px rgba(0,0,0,0.1); }*/
    
    table { width: 100%; border-collapse: collapse; margin-top: 20px; }
    td { padding: 8px; vertical-align: top; }
    td.label { font-weight: bold; width: 35%; }
    #card-element { border: 1px solid #ccc; border-radius: 8px; padding: 12px; margin-top: 15px; }
    #payment-message { text-align: center; margin-top: 20px; font-weight: bold; }
    .button { display: block; width: 100%; margin-top: 25px; padding: 15px; font-size: 1.2rem; background: #28a745; color: white; border: none; cursor: pointer; text-align: center; text-decoration: none; border-radius: 5px; }
    .button:hover { background: #218838; }