.packages {
list-style: none; /* removes the default bullets */
padding: 0; /* removes default padding */
margin: 0; /* optional: remove margin */
}

.check {
color: gold;
margin-right: 8px; /* space between check and text */
font-weight: bold;
}

.packages-grid {
display: flex;
flex-wrap: wrap;
gap: 20px;
}

.packages-grid .package:last-child {
flex-basis: 100%; /* takes full width */
text-align: center;
}

.center-card {
flex: 0 0 auto; /* keeps the card its natural width */
margin: 0 auto; /* centers it horizontally in the row */
}

.request-appointment {
background: #0b0b0b;
padding: 60px 20px;
text-align: center;
}

.request-appointment h2 {
color: #d4af37;
margin-bottom: 25px;
}

.appointment-form {
max-width: 900px;
margin: auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 15px;
}

.appointment-form input,
.appointment-form select {
background: transparent;
border: 2px solid #d4af37;
padding: 12px;
color: white;
border-radius: 6px;
}

.appointment-form input::placeholder {
color: #aaa;
}

.appointment-form button {
background: #d4af37;
border: none;
padding: 14px;
font-weight: bold;
cursor: pointer;
}

/* Instagram Icon Theme */
.social-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 45px;
height: 45px;
border: 2px solid #d4af37;
border-radius: 50%;
color: #d4af37;
font-size: 22px;
transition: 0.3s ease;
}

/* Hover effect */
.social-icon:hover {
background: #d4af37;
color: black;
box-shadow: 0 0 12px #d4af37;
transform: translateY(-3px);
}

.gold-btn {
background: transparent;
border: 2px solid #d4af37;
color: #d4af37;
padding: 10px 26px;
border-radius: 5px;
font-weight: 600;
cursor: pointer;
transition: 0.25s ease;
text-decoration: none;
}

.gold-btn:hover {
background: #d4af37;
color: black;
}

/* FORCE submit + book buttons */

.gold-btn {
background: transparent !important;
border: 2px solid #d4af37 !important;
color: #d4af37 !important;
padding: 10px 26px;
border-radius: 5px;
font-weight: 600;
cursor: pointer;
transition: 0.25s ease;
}

/* Hover */

.gold-btn:hover {
background: #d4af37 !important;
color: black !important;
}

.full-detail-wrapper {
grid-column: 1 / -1;
display: flex;
justify-content: center;
margin-top: -5px;
}

/* Make Full Detail slightly bigger */

.full-detail-wrapper .card {
width: 260px;
}

/* ===== ABOUT SECTION ===== */

.about-section {
background: #0b0b0b;
padding: 80px 20px;
}

.about-container {
max-width: 1100px;
margin: auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
align-items: center;
}

.about-image img {
width: 100%;
border-radius: 10px;
border: 2px solid #d4af37;
}

.about-text h2 {
color: #d4af37;
margin-bottom: 20px;
}

.about-text p {
color: #ccc;
line-height: 1.6;
margin-bottom: 15px;
}

/* Mobile */

@media(max-width: 800px) {
.about-container {
grid-template-columns: 1fr;
text-align: center;
}
}

.appointment-form button {
background: #d4af37;
border: none;
padding: 14px;
font-weight: bold;
cursor: pointer;
border-radius: 6px;
transition: 0.3s ease;
}

.appointment-form button:hover {
background: transparent;
color: #d4af37;
border: 2px solid #d4af37;
}

.book-now {
background: #d4af37;
color: black;
padding: 12px 30px;
text-decoration: none;
border-radius: 6px;
font-weight: bold;
transition: 0.3s ease;
}

.book-now:hover {
background: transparent;
color: #d4af37;
border: 2px solid #d4af37;
}

.card h3 {
white-space: nowrap;
text-align: center;
font-size: 18px;
}

.packages {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.package-card {
display: flex;
flex-direction: column;
}

@media (max-width: 768px) {

.packages {
grid-template-columns: 1fr;
}

.package-card h3 {
white-space: normal;
font-size: 16px;
}

}

.appointment-form select {
background: transparent;
color: white;
}

.appointment-form select:hover,
.appointment-form select:focus {
background: transparent;
color: white;
outline: none;
}

/* Dropdown options */
.appointment-form option {
background: #0b0b0b;
color: white;
}

.appointment-form select:focus {
box-shadow: 0 0 8px #d4af37;
}

.appointment-form input,
.appointment-form select {
background: transparent;
color: white;
border: 2px solid #d4af37;
padding: 12px;
border-radius: 6px;
outline: none;
}

/* Hover + focus states */
.appointment-form input:hover,
.appointment-form input:focus,
.appointment-form select:hover,
.appointment-form select:focus {
background: transparent;
color: white;
}

/* Placeholder text */
.appointment-form input::placeholder {
color: #aaa;
}

/* Dropdown options */
.appointment-form option {
background: #0b0b0b;
color: white;
}

/* Kill browser styling */
.appointment-form input,
.appointment-form select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
}

.booking-section {
padding: 80px 20px;
text-align: center;
}

.booking-grid {
max-width: 1000px;
margin: auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
align-items: start;
}

.contact-info {
text-align: left;
}

.appointment-form {
grid-template-columns: 1fr 1fr;
}

.appointment-form button {
grid-column: 1 / -1;
}

/* MOBILE */

@media (max-width: 768px) {
.booking-grid {
grid-template-columns: 1fr;
}

.contact-info {
text-align: center;
}

.appointment-form {
grid-template-columns: 1fr;
}
}

.insta-link {
color: #d4af37;
text-decoration: none;
font-weight: bold;
transition: 0.3s ease;
}

.insta-link:hover {
text-decoration: underline;
}

.instagram-icon {
font-size: 32px;
color: #d4af37;
display: inline-block;
margin-top: 15px;
transition: 0.3s ease;
}

.instagram-icon:hover {
transform: scale(1.1);
}

.request-appointment {
    margin-top: 10px;
}

#contact {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}

.contact-center {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}

.contact-center a {
color: inherit;
transition: 0.3s ease;
}

.contact-center a:hover {
transform: scale(1.2);
}

.contact h2 {
color: #ffb347;
}

.contact a {
color: #ffb347;
}

.contact a:hover {
color: white;
transform: scale(1.1);
}

#contact h2,
#contact i {
color: #d4af37 !important;
}

#contact i {
font-size: 28px;
}

#contact p {
    color: white !important;
}

#contact a {
color: #d4af37 !important;
transition: 0.3s ease;
}

#contact a:hover {
color: white !important;
transform: scale(1.2);
}

#contact i {
font-size: 40px;
color: #ffb347;
transition: 0.3s ease;
text-shadow: 0 0 8px rgba(255,179,71,0.6);
}

#contact i:hover {
transform: scale(1.2);
text-shadow: 0 0 15px rgba(255,179,71,1);
}

.form-grid input,
.form-grid select {
width: 100%;
box-sizing: border-box;
}

/* Inputs + selects */
.form-grid input,
.form-grid select {
width: 100%;
}

/* CENTER Select Area */
#area {
grid-column: span 2;
justify-self: center;
width: 80%;
}

/* Center Submit */
.form-grid button {
grid-column: span 2;
justify-self: center;
margin-top: 20px;
}

.form-grid {
column-gap: 35px;
}

.form-grid input,
.form-grid select {
border-radius: 8px;
}

.work-video {
display: flex;
justify-content: center;
align-items: center;
margin: 60px 0;
}

.work-video video {
width: 30%;
max-width: 300px;
aspect-ratio: 9 / 16;
object-fit: cover;
border-radius: 12px;
border: 2px solid #ffb347;
box-shadow: 0 0 20px rgba(255,179,71,0.4);
}

.showcase {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 40px;
margin: 80px 0;
}

/* SIDE IMAGES */
.side-images {
display: flex;
flex-direction: column;
gap: 25px;
align-items: center;
}

.side-images img {
width: 200px;
border-radius: 12px;
border: 2px solid #ffb347;
box-shadow: 0 0 15px rgba(255,179,71,0.4);
}

/* CENTER VIDEO */
.showcase {
display: flex;
justify-content: center;
align-items: center;
gap: 25px;
margin: 80px 0;
flex-wrap: wrap;
}

.showcase img {
width: 160px;
border-radius: 12px;
border: 2px solid #ffb347;
box-shadow: 0 0 15px rgba(255,179,71,0.4);
}

.showcase {
display: flex;
justify-content: center;
align-items: center;
gap: 25px;
margin: 80px 0;
}

/* Images */
.showcase img {
width: 160px;
border-radius: 12px;
border: 2px solid #ffb347;
box-shadow: 0 0 15px rgba(255,179,71,0.4);
}

/* Center video */
.showcase video {
width: 220px;
aspect-ratio: 9 / 16;
object-fit: cover;
border-radius: 12px;
border: 2px solid #ffb347;
box-shadow: 0 0 20px rgba(255,179,71,0.5);
}

html {
scroll-behavior: smooth;
}

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

.cards {
display: flex;
flex-direction: column;
align-items: center;
}

.card {
width: 90%;
margin: 15px 0;
}

img,
video {
width: 100%;
height: auto;
}

}

/* MOBILE SHOWCASE COMPACT */
@media (max-width: 768px) {

.showcase {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
padding: 10px;
}

.showcase img {
width: 100%;
height: 160px;
object-fit: cover;
}

.showcase video {
grid-column: span 2;
width:90%;
height: 220px;
object-fit: cover;
justify-self: center;
border-radius: 12px;
}

}