/* ----------------------------
RESET
---------------------------- */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: 'Poppins', sans-serif;
background: #f5f7fa;
color: #222;
margin: 0;
padding-top: 76px; /* for fixed navbar */
line-height: 1.5;
}

/* ----------------------------
NAVBAR
---------------------------- */
.navbar {
background: white !important;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
padding: 10px 0;
animation: slideDown 0.8s ease;
}

.navbar-brand img {
max-height: 60px;
}

.navbar-nav .nav-link {
color: #7c3a6e !important;
font-size: 1.2rem;
font-weight: 500;
margin-right: 18px;
transition: color 0.2s;
}

.navbar-nav .nav-link:hover {
color: #7c3a6e !important;
}

/* Navbar Hamburger */
.navbar-toggler {
border: none;
font-size: 1.6rem;
background: linear-gradient(135deg, #7b2cbf, #ff66b2);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

/* ----------------------------
BANNER
---------------------------- */
.banner {
height: 56vh;
min-height: 320px;
background-image: url('src/img/3532.jpg'); /* change to your image */
background-size: cover;
background-position: center;
display: flex;
align-items: center;
justify-content: center;
position: relative;
color: #fff;
animation: fadeIn 1.2s ease-in;
}

.banner::before {
content: "";
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.45);
}

.banner-content {
position: relative;
z-index: 2;
padding: 0 18px;
text-align: center;
animation: slideUp 1.2s ease-in-out;
}

.banner h1 {
font-size: 38px;
margin-bottom: 10px;
}

.banner p {
font-size: 16px;
opacity: 0.95;
}

/* ----------------------------
CONTACT SECTION
---------------------------- */
.contact-section {
display: flex;
justify-content: center;
padding: 50px 20px;
}

.contact-card h2 {
text-align: center;
font-size: 2rem !important;
font-weight: 700;
background: linear-gradient(135deg, #7b2cbf, #ff66b2);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
display: inline-block;
margin: 0 auto 20px;
}

.contact-card p {
text-align: left;
margin-bottom: 12px;
}

.contact-card {
width: 100%;
max-width: 600px;
margin: auto;
border-radius: 14px;
border: none;
box-shadow: 0 8px 28px rgba(20, 20, 20, 0.08);
padding: 30px;
background: #fff;
animation: fadeInUp 1.3s ease;
}

.contact-card .icon {
color: transparent;
background: linear-gradient(135deg, #7b2cbf, #ff66b2);
-webkit-background-clip: text;
font-size: 16px;
}

.map-btn {
background: linear-gradient(135deg, #7b2cbf, #ff66b2);
color: #fff;
border-radius: 10px;
padding: 10px 14px;
display: inline-block;
text-decoration: none;
transition: 0.3s;
}

.map-btn:hover {
opacity: 0.95;
transform: translateY(-2px);
}

/* ----------------------------
FORM
---------------------------- */
.card form {
display: block !important;
margin: 0;
}

.card form .form-control {
border-radius: 10px;
border: 1px solid #ddd;
padding: 12px 14px;
font-size: 15px;
width: 100%;
box-shadow: none;
height: 48px;
line-height: 1.2;
transition: border-color .15s ease, box-shadow .15s ease;
}

.card form .row > [class*="col-"] .form-control {
width: 100%;
}

.card form .form-control:focus {
border-color: (135deg, #7b2cbf, #ff66b2);
box-shadow: 0 0 6px rgba(123, 44, 191, 0.18);
outline: none;
}

.card form textarea.form-control,
#contactForm textarea.form-control {
height: 160px;
min-height: 160px;
max-height: 160px;
resize: none;
overflow-y: auto;
padding-top: 12px;
padding-bottom: 12px;
line-height: 1.6;
box-sizing: border-box;
}

.submit-btn {
background: linear-gradient(135deg, #7b2cbf, #ff66b2);
color: #fff;
border: none;
padding: 12px 18px;
border-radius: 10px;
font-weight: 500;
font-size: 16px;
transition: transform 0.15s ease, opacity 0.15s ease;
cursor: pointer;
}

.submit-btn:hover {
transform: translateY(-2px);
opacity: 0.95;
}

@media (max-width: 480px) {
.card form .form-control { height: 44px; }
.card form textarea.form-control { height: 140px; min-height: 140px; max-height: 140px; }
}

/* ----------------------------
HELP & SUPPORT SECTION
---------------------------- */
.support-card {
background: #fff;
border-radius: 14px;
border: 3px solid transparent;
background-clip: padding-box, border-box;
background-origin: border-box;
background-image: linear-gradient(#fff, #fff),
linear-gradient(135deg, #7b2cbf, #ff66b2);
box-shadow: 0 10px 28px rgba(20, 20, 20, 0.05);
transition: 0.3s;
text-align: center;
padding: 25px;
animation: fadeInUp 1s ease;
}

.support-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 32px rgba(123, 44, 191, 0.25);
}

.support-card .card-icon,
.support-card i {
font-size: 40px;
margin-bottom: 14px;
background: linear-gradient(135deg, #7b2cbf, #ff66b2);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
display: inline-block;
animation: iconPop 1s ease;
}

.support-card h3 {
color: #7b2cbf;
margin-bottom: 8px;
}

.section-title,
.card h2 {
font-size: 2rem;
font-weight: 700;
background: linear-gradient(135deg, #7b2cbf, #ff66b2);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
display: inline-block;
animation: fadeIn 1.1s ease;
}


/* Card Styling */
.support-card {
background: #fff;
border-radius: 14px;
border: 3px solid transparent;
background-clip: padding-box, border-box;
background-origin: border-box;
background-image: linear-gradient(#fff, #fff),
linear-gradient(135deg, #7b2cbf, #ff66b2);
box-shadow: 0 10px 28px rgba(20, 20, 20, 0.05);
transition: 0.3s;
padding: 25px;
}

.support-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 32px rgba(123, 44, 191, 0.25);
}

.support-card i {
font-size: 36px;
margin-bottom: 12px;
background: linear-gradient(135deg, #7b2cbf, #ff66b2);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
display: inline-block;
}

.section-title {
font-size: 2rem;
font-weight: 700;
background: linear-gradient(135deg, #7b2cbf, #ff66b2);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
display: inline-block;
}

/* Modal Styling */
.modal-box {
border-radius: 14px;
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
}

.modal-header h5 {
font-weight: 700;
background: linear-gradient(135deg, #7b2cbf, #ff66b2);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

/* Gradient Button */
.btn-gradient {
background: linear-gradient(135deg, #7b2cbf, #ff66b2);
color: #fff;
border: none;
border-radius: 8px;
padding: 10px 16px;
transition: 0.3s;
}

.btn-gradient:hover {
opacity: 0.9;
}

/* Scroll inside modal body only */
.scroll-box {
max-height: 350px;
overflow-y: auto;
padding-right: 10px;
}



/*footer*/



.yellow-footer {
background-color: #9b4d81;
background: linear-gradient(135deg, #7b2cbf #ff66b2);
padding: 40px 5%;
font-family: 'Poppins', sans-serif;
color: #ececec;
}

.footer-container {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 30px;
}

/* Left Section */
.footer-left {
flex: 1;
min-width: 250px;
}

.footer-left h3 {
font-weight: bold;
margin-bottom: 10px;
}

.footer-left p {
margin: 6px 0;
line-height: 1.5;
}

.travel-message {
margin-top: 20px;
font-weight: bold;
}

/* Right Section */
.footer-right {
display: flex;
gap: 60px;
min-width: 300px;
justify-content: flex-end;
}

.footer-links {
display: flex;
gap: 60px;
}

.footer-links div {
display: flex;
flex-direction: column;
gap: 10px;
}

.footer-links a {
text-decoration: none;
font-weight: bold;
color: #dfdfdf;
}

.footer-links a:hover {
text-decoration: underline;
}

/* Social Icons */
.social-icons {
display: flex;
flex-direction: column;
gap: 20px;
align-items: center;
}

.social-icons svg {
width: 35px;
height: 35px;
transition: transform 0.3s ease;
}

.social-icons svg:hover {
transform: scale(1.2);
}

.copy{
font-family: 'Poppins', sans-serif;
text-align: center;
font-size: 15px;
padding: 5px;
padding-top: 15px;
}

/* Bottom Text */
.footer-description {
margin-top: 20px;
font-size: 0.9rem;
line-height: 1.6;
}

/* Responsive */
@media (max-width: 768px) {
.footer-container {
flex-direction: column;
text-align: center;
}
.footer-right {
justify-content: center;
flex-direction: column;
align-items: center;
gap: 30px;
}
}

/* ----------------------------
RESPONSIVE
---------------------------- */
@media (max-width: 991px) {
.banner h1 { font-size: 30px; }
.banner p { font-size: 15px; }
body { padding-top: 70px; }
}

@media (max-width: 576px) {
.banner { height: 40vh; }
.navbar-brand img { max-height: 46px; }
.banner h1 { font-size: 24px; }
.banner p { font-size: 14px; }
}

/* ----------------------------
ANIMATIONS
---------------------------- */
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}

@keyframes slideUp {
from { transform: translateY(40px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}

@keyframes slideDown {
from { transform: translateY(-40px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}

@keyframes fadeInUp {
from { transform: translateY(20px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}

@keyframes iconPop {
0% { transform: scale(0.7); opacity: 0; }
60% { transform: scale(1.2); opacity: 1; }
100% { transform: scale(1); }
}