:root {
  --app-color1: #184e77;
  --app-color2: #1e6091 ;
  --app-color3: #168aad;
   --app-color4: #52b69a;
   --app-color5: #99d98c;
  --old-app-color1: #013241;
  --old-app-color2: #00857a ;
  --old-app-color3: #00ae9f;
}
.page-wrapper{  
    padding-bottom: 60px;
        min-height: 100vh;
}
a{ 
    text-decoration: none !important;
}
p {
    
    text-align: justify;
    word-spacing: -0.05em !important;
    -webkit-hyphens: auto !important;
    hyphens: auto !important;
}
.text-justify{
text-align: justify
}

#show_error_box , #show_warning_box , #show_message_box {
    white-space: unset;
}

.display_none{
    display: none !important;
}
.m0{
    margin: 0 !important;
}
.bg_none{
    background: none !important;
}
.navbar-brand-image {
    height:  2.5rem;
    width: auto;
}
.bg_my_color1{
    color:white ;
    background-color: var(--app-color1) !important;
        border: 1px solid var(--app-color1) !important;
}
.btn.bg_my_color1:hover {
  opacity: 0.9;  
}
.bg_my_color2{
     color:white ;
    background-color: var(--app-color2) !important;
        border: 1px solid var(--app-color2) !important;
}
.btn.bg_my_color2:hover {
  opacity: 0.9;  
}
.bg_my_color3 {
    background-color: var(--app-color3) !important;
        border: 1px solid var(--app-color3) !important;
        color:#ffffff;
}
.btn.bg_my_color3:hover {
    color:#ffffff;
  opacity: 0.9;  
}
.bg_my_color4{
     color:white ;
    background-color: var(--app-color4) !important; 
}
.text_my_color1{
    color: var(--app-color1) !important;
}
.text_my_color2{
    color: var(--app-color2) !important;
}
.text_my_color3{
    color: var(--app-color3) !important;
}
.text_my_color4{
    color: var(--app-color4) !important;
}
.text_my_color5{
    color: var(--app-color5) !important;
}
.border_my_color1{
    border: 1px solid var(--app-color1) !important;
    color: black !important;
}
.border_my_color1:hover{
    background:  var(--app-color1) !important;
    color: rgb(255, 255, 255) !important;
}
.border_my_color2{
    border: 1px solid var(--app-color2) !important;
    color: black !important;
}
.border_my_color2:hover{
    background:  var(--app-color2) !important;
    color: rgb(255, 255, 255) !important;
}
.border_my_color3{
    border: 1px solid var(--app-color3) !important;
    color: black !important;
}
.border_my_color3:hover{
    background:  var(--app-color3) !important;
    color: rgb(255, 255, 255) !important;
}
.bg-gradient-my1 {
    color: #ffffff;
    background: linear-gradient(90deg,var(--app-color1), var(--app-color3));
           transition: background 0.4s ease, transform 1s ease;
  }
  .bg-gradient-my1:hover {
    color: #ffffff;
    background: linear-gradient(90deg,var(--app-color3), var(--app-color1));
        transform: translateY(-1px);
  }
 .bg-gradient-my2 {
    color: #ffffff;
    background: linear-gradient(90deg, var(--app-color4), var(--app-color3));
    transition: background 0.4s ease, transform 1s ease;
}

.bg-gradient-my2:hover {
    color: #ffffff;
    background: linear-gradient(90deg, var(--app-color3), var(--app-color4));
    transform: translateY(-1px);
}

.custom_modal_height {
    height: 100vh; 
    align-items: center;
    justify-content: center;
    align-content: center;
    flex-direction: column;
}
.custom_modal_height_body{ 
    max-height: 80vh !important;
}
.modal-blur{
  background-color: #00000094 !important;
}
.page-title{
        text-transform: capitalize;
}
  .trumbowyg-box {
    min-height: 150px !important;
}
.btn_filter{
        width: max-content;
            align-self: end;
    display: block;
}
p {
    margin: 0 !important;
}
.navbar-nav .nav-item { 
    min-width: 120px;
}
.w-80{
    width:80%;
}
.w-20{
    width:20%;
}
.side_title{
     font-weight: 500;
    font-size: 15px;
    color:var(--app-color4);
}
 .card-title{
        text-transform: capitalize;
 }
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; 
    z-index: 1040; /* below modal (1050 default) */
}
 .custom-select {
         font-size: 12px;
         border: none;
         background-color: transparent;
         background-repeat: no-repeat;
         background-position: right 0.5rem center;
         background-size: 15px;
         appearance: none;
         /* removes system styling */
         -webkit-appearance: none;
         -moz-appearance: none;
         backdrop-filter: blur(10px) saturate(150%);
         -webkit-backdrop-filter: blur(10px) saturate(150%);
         border: 1px solid rgba(200, 200, 200, 0.5);
         box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
     }

     .custom-select:hover {
         border: none;
         cursor: pointer;
     }

     .custom-select:focus {
         border-color: none !important;
        
     }

     .custom-select2 {
         height: 45px;
         box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04) !important;
     }

      .scholarship-card {
    border: none;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  a:hover .scholarship-card {
    transform: translateY(-6px);
    box-shadow: 0 8px 18px rgba(0,0,0,0.15);
  }

  /* Gradient headers by type */
  .bg-gradient-fully-funded {
    color: #ffffff;
    background: linear-gradient(90deg, #198754, #28a745);
  }
  .bg-gradient-partial {
     color: #ffffff;
    background: linear-gradient(90deg, #ffc107, #ffb100);
  }
  .bg-gradient-self-funded {
     color: #ffffff;
    background: linear-gradient(90deg, var(--app-color2), var(--app-color3));
  }
  .bg-gradient-other {
     color: #ffffff;
    background: linear-gradient(90deg, #6c757d, #868e96);
  }
.price-badge .decimal {
    font-size: 0.8em;
    /* smaller */
    vertical-align: bottom;
    /* optional: makes it rise slightly */
    opacity: 1;
    /* optional: softens appearance */
}
  .card-body ul li {
    margin-bottom: 3px;
  }
  /* from package page */
  .btn.bg-orange {
    background: linear-gradient(135deg, #f97316, #f59e0b);
    color: #fff;
}

.btn.bg-orange:hover {
    background: linear-gradient(135deg, #f59e0b, #f97316);
}

.btn.bg-teal {
    background: linear-gradient(135deg, #14b8a6, #0d9488);
    color: #fff;
}

.btn.bg-teal:hover {
    background: linear-gradient(135deg, #0d9488, #14b8a6);
}

.btn.bg-azure {
    background: linear-gradient(135deg, #4c8efaff, #2563eb);
    color: #fff;
}

.btn.bg-azure:hover {
    background: linear-gradient(135deg, #2563eb, #4c8efaff);
}

.btn.bg-lime {
    background: linear-gradient(135deg, #74b816, #66a310ff);
    color: #fff;
}

.btn.bg-lime:hover {
    background: linear-gradient(135deg, #66a310ff, #74b816);
}
.price-badge,
.duration-badge {
    font-weight: 600;
    padding: 5px 10px;
    border-radius: 12px;
}

.price-badge {
    background: #e0f2fe;
    color: #0284c7;
}

.duration-badge {
    background: #f0fdfa;
    color: #059669;
}
.status-badge.active {
    background: linear-gradient(135deg, #a7f3d0, #10b981);
    color: #065f46;
    font-weight: 500;
    padding: 5px 10px;
    border-radius: 12px;
}
/*  -------------------------------- */

  a.text-decoration-none {
    color: inherit;
  }

  .small b {
    color: #212529;
  }

  
.featured-countries {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    margin: 20px 0;
}

.country-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    cursor: pointer;
    transition: transform 0.3s;
    text-decoration: none;
    color: inherit;
    width: calc(10% - 10px); /* Default width for larger screens */
}



.country-card.disabled {
    pointer-events: none;
    opacity: 0.5;
    cursor: not-allowed;
}


.country-card:hover {
    transform: scale(1.05);
}

.country-flag {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    overflow: hidden;
    background: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
    transition: all 0.3s;
}

.country-flag img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.package_des{
        align-content: center;
        font-size: 13px !important;
    min-height: 50px;
}
.country-name {
    font-size: 12px;
    font-weight: 500;
}
.btn-apply {
    position: sticky;
    top: 20px;
    background: linear-gradient(90deg, #198754, #28a745);
    color: #fff;
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    text-decoration: none;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    transition: 0.3s;
}

.btn-apply:hover {
    background: linear-gradient(90deg, #28a745, #198754);
    color: #fff;
}
.heart-icon-my {
    color: #aaa;
    transition: 0.2s;
}

.heart-icon-my.active {
    color: #e63946;
    /* red for whitelisted */
    fill: #e63946;
}
    .scholarship-card {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s ease-in-out;
}

.scholarship-card.visible {
    opacity: 1;
    transform: translateY(0);
}
/* hide for item */
.myNotSubUser-teaser {
      position: relative;
    background-size: cover;
    border-radius: 10px;
    overflow: hidden;
    min-height: 180px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-bottom: 15px;
    transition: transform 0.3s ease;
}

.myNotSubUser-teaser::before {
    content: '';
    position: absolute;
    inset: 0; 
    z-index: 0;
}

.myNotSubUser-teaser:hover {
    transform: none;
}

.myNotSubUser-content {
      display: flex;
    position: relative;
    z-index: 1;
    color: #fff; 
    padding: 0 10px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.myNotSubUser-title {
    font-size: 1.5rem;
    font-weight: 800; 
}

.myNotSubUser-detail {
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.2;
}
.myNotSubUser-detail2 {
    font-size: 1.2rem; 
    font-weight: 800;
    color: #FFD700; 
}
  

/* Mobile screens */
@media (max-width: 768px) {
    .navbar-brand-image {
    height: 2rem;
    width: auto;
}
header{
   height: 50px;
    min-height: 50px; 
}
    .country-card {
        width: calc(25% - 16px); /* 4 columns on mobile */
    }
    .myNotSubUser-title {
        font-size: 0.9rem; 
    }
    .myNotSubUser-detail {
        font-size: 0.7rem; 
    }
    .myNotSubUser-detail2 {
    font-size: 1rem;  
        }
    
}