body{
    font-family: 'Montserrat', sans-serif;
    background:#f8f9fa;
    transition:0.4s;
}

/* ===== GOLD THEME ===== */
.text-gold{
    color:#842020 !important;
}

.btn-gold{
    background:#893838;
    color:white;
    border:none;
    transition:0.3s;
}

.btn-gold:hover{
    background:#842929;
    transform:scale(1.05);
}

/* ===== NAV ===== */
.premium-nav{
    background:#111;
}

/* ===== HEADER ===== */
.premium-header{
    padding:100px 20px;
    color:white;
    text-align:center;

    /* Background image + overlay */
    background:
      linear-gradient(rgba(0,0,0,0.65), rgba(0,0,0,0.65)),
      url("../img/MSBC1.png");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.dark-mode .premium-header{
    background:
      linear-gradient(rgba(0,0,0,0.75), rgba(0,0,0,0.75)),
      url("../img/MSB12.png");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* ===== 3D CARD EFFECT ===== */
.plan-card{
    background:white;
    border-radius:15px;
    overflow:hidden;
    box-shadow:0 15px 35px rgba(12, 12, 12, 0.356);
    transform-style:preserve-3d;
    transition:0.5s ease;
    animation:fadeUp 1s ease forwards;
}

.plan-card:hover{
    transform:rotateY(8deg) rotateX(5deg) scale(1.05);
}

.plan-card img{
    width:100%;
    height:250px;        /* fixed height */
    object-fit:cover;    /* prevents distortion */
    display:block;
}

.img-wrapper{
    height:250px;
    overflow:hidden;
}

.img-wrapper img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:0.5s;
}

.plan-card:hover img{
    transform:scale(1.1);
}

/* Smooth animation */
@keyframes fadeUp{
    from{
        opacity:0;
        transform:translateY(50px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

/* ===== MODAL ===== */
.premium-modal{
    background:#1c1c1c;
    color:white;
    border:1px solid #772424;
}

/* ===== DARK MODE ===== */
.dark-mode{
    background:#121212;
    color:white;
}

.dark-mode .plan-card{
    background:#1e1e1e;
}

.dark-mode .premium-nav{
    background:#000;
}

.btn-outline-warning {
    border: 2px solid #6f1d1d;
    color: #8d2d2d;
    transition: 0.3s;
}

.btn-outline-warning:hover {
    background: #6c1f1f;
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(104, 29, 29, 0.4);
}

#threeContainer canvas {
  border-radius: 15px;
  background: #000;
}

#threeContainer {
  width: 100%;
  height: 500px;
  background: #000;
}

.modal-footer {
    border-top: none;
    padding-bottom: 1.5rem;
}

/* ================= MOBILE FIX (≤768px) ================= */
@media (max-width: 768px) {

  /* ===== NAVBAR ===== */
  .premium-nav .container{
    flex-direction: column;
    gap: 10px;
  }

  .navbar-brand{
    font-size: 18px;
    text-align: center;
  }

  #darkModeToggle{
    width: 100%;
    font-size: 14px;
  }

  /* ===== HEADER ===== */
  .premium-header{
    padding: 70px 15px;
  }

  .premium-header h1{
    font-size: 26px;
  }

  .premium-header p{
    font-size: 14px;
  }

  /* ===== PLAN CARDS ===== */
  .plan-card{
    margin-bottom: 20px;
  }

  .plan-card img{
    height: 180px;
  }

  .plan-card h4{
    font-size: 18px;
  }

  .plan-card p{
    font-size: 13px;
  }

  .btn-gold{
    padding: 8px 16px;
    font-size: 14px;
  }

  /* Disable 3D hover on mobile */
  .plan-card:hover{
    transform: none;
  }

  .plan-card:hover img{
    transform: none;
  }

  /* ===== MODAL ===== */
  .modal-dialog{
    margin: 10px;
  }

  .modal-body img{
    max-height: 300px;
    object-fit: contain;
  }

  .modal-title{
    font-size: 18px;
  }

  .modal-footer button{
    font-size: 14px;
    padding: 8px 18px;
  }

  /* ===== BACK BUTTON ===== */
  .btn-outline-warning{
    width: 80%;
    font-size: 14px;
  }
}