/* globals.css */
:root{
  --accent: #ffcf2b;
  --brand: #0b4f8a;
  --muted: #6b7280;
  --card: #ffffff;
  --bg-start: #eaf6fb;
  --bg-end: #dff3fb;
  --max-width: min(100%, 720px);
  --radius: 12px;
  --primary-dark: #0b2b86;
  --light-bg: #f4f9ff;
  --muted-bg: #eef2f6;
}

/* Reset & base */
*{box-sizing:border-box; margin:0; padding:0;}
html,body{height:100%}
body{
  margin:0;
  background:#0b2b86;
  color:#fff;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  line-height: 1.6;
}
img{max-width:100%;height:auto;display:block}

/* App container */
.app{
  width:100%;
  max-width:var(--max-width);
  min-height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  margin: 0 auto;
  padding-top: 70px; /* Fixed header height compensation */
}

/* Accessibility / utilities */
button, .btn, a.btn { 
  min-height:44px; 
  padding:12px 20px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 16px;
}
[style*="width: 720px"] { max-width:100%; width:100% !important; }

/* Generic small helpers */
.icon-small{ width:12px; height:auto; }
.body-ref7 { margin:0; padding-top:70px; background:var(--brand); color:#fff; }
.Mohammad { background-color:#0b4f8a; text-align:center; padding: 20px; }

/* Responsive defaults */
@media (max-width:1024px){
  :root{ --max-width:100%; }
  body{ padding-left:12px; padding-right:12px; }
}

@media (max-width:768px){
  body{ padding-left:8px; padding-right:8px; }
  .app{ padding-top: 60px; }
}

/* header.css */
.header-ref1 {
  position:fixed;
  top:0;
  left:0;
  width:100%;
  background:var(--brand);
  color:white;
  padding:12px 16px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  z-index:1000;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.div-ref2{ display:flex; align-items:center; gap:10px; }
.img-ref3{ height:40px; width:auto; display:block; }
.span-ref4{ font-size:18px; font-weight:bold; color:#fff; }
.div-ref5{
  display:flex;
  align-items:center;
  gap:8px;
  background:var(--brand);
  color:white;
  padding:8px 12px;
  border-radius:6px;
  font-weight:bold;
}
.img-ref6{ width:32px; height:32px; border-radius:50%; object-fit:cover; }

/* Mobile header adjustments */
@media (max-width:480px){
  .header-ref1{ padding:10px 12px; }
  .span-ref4{ font-size:16px; }
  .img-ref3{ height:35px; }
}

/* hero-search.css */  
.hero {  
  display: flex; 
  justify-content: center; 
  margin-top: 20px;
  margin-bottom: 20px;
  flex: 0;  
}  

.search-card {  
  width: 95%;  
  background: #ffffff;
  border-radius: 16px;  
  padding: 20px;  
  box-shadow: 0 8px 30px rgba(10, 40, 60, 0.08);  
  position: relative;  
  overflow: visible;  
}  

/* Tabs */  
.tabs {  
  display: flex; 
  justify-content: space-between;  
  border-bottom: 2px solid #e5e7eb; 
  margin-bottom: 20px;  
}  

.tab {  
  flex: 1; 
  text-align: center; 
  padding: 12px 0; 
  font-weight: 600; 
  font-size: 14px;  
  color: #6b7280;
  background: transparent; 
  border: 0; 
  cursor: pointer;  
  position: relative; 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  gap: 6px;  
}  

.icon { width: 28px; height: 28px; object-fit: contain; }  

.tab.active { color: #f59e0b; }
.tab.active::after {  
  content: ""; 
  position: absolute; 
  bottom: -2px; 
  left: 20%; 
  right: 20%; 
  height: 3px;  
  background: #f59e0b; 
  border-radius: 3px;  
}  

/* Form layout */  
.search-form { padding: 10px 0; }  

.field-row {  
  display: flex; 
  justify-content: center; 
  gap: 12px; 
  flex-wrap: wrap;  
}  

.field-row .dropdown, .fixed-field {  
  flex: 1 1 45%; 
  max-width: 220px; 
  text-align: center; 
  min-width: 140px;  
}  

/* Dropdown */  
.dropdown {  
  position: relative; 
  background: #f8fbff; 
  padding: 15px 12px; 
  border-radius: 12px;  
  cursor: pointer; 
  user-select: none;  
  color: #111827;
  border: 1px solid #e5e7eb;
}  

.dropdown .label-title, .fixed-field .label-title {  
  font-size: 12px; 
  font-weight: 600; 
  color: #6b7280;
  text-align: center;  
  margin-bottom: 5px;
}  

.dropdown-selected, .fixed-field .dropdown-selected {  
  font-size: 16px; 
  font-weight: 700; 
  margin-top: 4px; 
  text-align: center;  
  color: #111827;
}  

.dropdown-list {  
  display: none; 
  position: absolute; 
  top: calc(100% + 8px); 
  left: 0;
  width: 100%;
  background: #ffffff; 
  border-radius: 12px; 
  padding: 8px 0;  
  box-shadow: 0 8px 24px rgba(10, 40, 60, 0.12); 
  list-style: none; 
  text-align: center; 
  z-index: 1200;
  max-height: 200px;
  overflow-y: auto;
}  

.dropdown-list li {  
  padding: 12px 16px; 
  cursor: pointer; 
  font-weight: 600;  
  color: #111827;
  transition: background 0.2s;
}  

.dropdown-list li:hover { background: #f1f5f9; }  
.dropdown.open .dropdown-list { display: block; }  

/* Fixed field (visa type) */  
.fixed-field { 
  background: #f8fbff; 
  padding: 15px 12px; 
  border-radius: 12px; 
  color: #111827;
  border: 1px solid #e5e7eb;
}  

/* Actions */  
.actions { text-align: center; margin-top: 20px; }  
.btn-search {  
  background: #f59e0b; 
  border: 0; 
  padding: 14px 50px; 
  font-weight: 700; 
  font-size: 16px;
  border-radius: 12px;  
  cursor: pointer; 
  box-shadow: 0 8px 20px rgba(255, 207, 43, 0.15);
  color: #ffffff;
  transition: background 0.3s;
  min-width: 180px;
}  

.btn-search:hover {
  background: #e6900a;
}

/* Responsive adjustments */
@media (max-width: 768px) {  
  .search-card { padding: 16px; }  
  .icon { width: 24px; height: 24px; }  
  .field-row .dropdown, .field-row .fixed-field { 
    max-width: 100%; 
    flex: 1 1 100%;
  }  
  .tabs{ margin-bottom: 15px; }
  .tab{ padding: 10px 0; font-size: 13px; }
}  

@media (max-width: 480px) {  
  .search-card { width: 100%; padding: 12px; }  
  .field-row { gap: 8px; }  
  .dropdown, .fixed-field { padding: 12px 8px; }
  .btn-search { padding: 12px 30px; min-width: 160px; }
  .hero{ margin-top: 15px; margin-bottom: 15px; }
}

/* hot-deals.css */
.hot-deals{ 
  padding: 30px 15px; 
  background: var(--brand); 
  color: var(--light-bg); 
}
.hot-deals h2{ 
  font-size: 28px; 
  font-weight: 700; 
  margin-bottom: 25px; 
  color: var(--light-bg); 
  text-align: center;
}

/* Tabs */
.deal-tabs{ 
  display:flex; 
  gap: 10px; 
  margin-bottom: 25px; 
  flex-wrap: wrap;
  justify-content: center;
}
.deal-tabs .tab{
  padding: 10px 20px; 
  border-radius: 25px; 
  border: 2px solid var(--light-bg);
  background: transparent;
  color: var(--light-bg);
  cursor: pointer; 
  font-weight: 500; 
  transition: all 0.3s;
}
.deal-tabs .tab.active{ 
  background: var(--accent); 
  color: var(--primary-dark);
  border-color: var(--accent);
}

/* Swiper + cards */
.deals-swiper{ padding-bottom: 40px; }
.deal-card{
  background: #fff; 
  border-radius: 16px; 
  padding: 20px; 
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  transition: transform 0.3s, box-shadow 0.3s; 
  display: flex; 
  flex-direction: column; 
  height: 100%;
  margin: 10px;
}
.deal-card:hover{ 
  transform: translateY(-5px); 
  box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}
.deal-banner-img{ 
  width: 100%; 
  height: 180px; 
  border-radius: 12px; 
  overflow: hidden; 
  margin-bottom: 15px; 
}
.deal-banner-img img{ 
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
  transition: transform 0.3s;
}
.deal-card:hover .deal-banner-img img{ 
  transform: scale(1.05);
}

.deal-content{ 
  flex: 1; 
  display: flex; 
  flex-direction: column; 
}
.deal-content h3{ 
  font-size: 18px; 
  margin-bottom: 10px; 
  color: var(--primary-dark); 
  line-height: 1.3;
}
.deal-content p {
  color: var(--muted);
  line-height: 1.5;
  margin-bottom: 15px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.deal-footer{ 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  margin-top: auto;
  padding-top: 15px;
}
.coupon{ 
  background: #eef1f8; 
  padding: 8px 15px; 
  border-radius: 8px; 
  font-weight: 700; 
  font-size: 14px; 
  color: var(--primary-dark); 
}
.btn-learn{
  background: var(--accent); 
  padding: 10px 20px; 
  border-radius: 8px; 
  text-decoration: none; 
  font-size: 14px; 
  font-weight: 600;
  color: var(--primary-dark); 
  transition: all 0.3s;
  display: inline-block;
}
.btn-learn:hover{ 
  background: #e0a800; 
  transform: translateY(-2px);
}

.swiper-slide{ 
  display: flex; 
  justify-content: center; 
  align-items: stretch; 
  height: auto;
}

/* Mobile adjustments for hot deals */
@media (max-width: 768px){
  .hot-deals{ padding: 20px 10px; }
  .hot-deals h2{ font-size: 24px; margin-bottom: 20px; }
  .deal-tabs{ gap: 8px; }
  .deal-tabs .tab{ padding: 8px 16px; font-size: 14px; }
  .deal-card{ padding: 15px; margin: 5px; }
  .deal-banner-img{ height: 150px; }
}

/* popular.css - common for Popular Destinations, Tours, Services */
.section-title{
  font-size: 32px; 
  font-weight: 800; 
  color: var(--light-bg); 
  margin: 40px 0 30px; 
  text-align: center;
  font-family: 'Poppins', sans-serif;
}

/* Common card design for pop-card */
.pop-card{
  text-decoration: none; 
  border-radius: 16px; 
  overflow: hidden; 
  position: relative;
  width: 100%; 
  height: 280px; 
  color: white; 
  border: 2px solid rgba(255,255,255,0.1);
  background: #fff;
  transition: all 0.3s ease;
  display: block;
}
.pop-card:hover{ 
  transform: scale(1.03); 
  border-color: var(--accent); 
  box-shadow: 0 8px 25px rgba(0,0,0,0.3); 
}
.pop-img{ 
  width: 100%; 
  height: 100%; 
  position: relative;
}
.pop-img img{ 
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
  filter: brightness(0.7); 
  transition: filter 0.3s ease; 
}
.pop-card:hover .pop-img img{ 
  filter: brightness(0.9); 
}

.pop-caption{
  position: absolute; 
  left: 20px; 
  bottom: 20px; 
  font-family: 'Poppins', sans-serif;
  z-index: 2;
}
.pop-caption h3{ 
  margin: 0; 
  font-size: 20px; 
  font-weight: 700; 
  color: #fff; 
  text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}
.pop-caption p{ 
  margin: 5px 0 0 0; 
  color: rgba(255,255,255,0.9); 
  font-size: 14px; 
  text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

/* Swiper pagination shared */
.swiper{ 
  padding-bottom: 50px; 
  width: 100%;
}
.swiper-pagination-bullet{ 
  width: 12px; 
  height: 12px; 
  opacity: .4; 
  background: #e0e0e0; 
  transition: all 0.3s;
}
.swiper-pagination-bullet-active{ 
  background: var(--accent); 
  opacity: 1; 
  transform: scale(1.2); 
}

/* Mobile adjustments for popular sections */
@media (max-width: 768px){
  .section-title{
    font-size: 24px;
    margin: 30px 0 20px;
  }
  .pop-card{
    height: 220px;
  }
  .pop-caption{
    left: 15px;
    bottom: 15px;
  }
  .pop-caption h3{
    font-size: 18px;
  }
  .pop-caption p{
    font-size: 13px;
  }
}

@media (max-width: 480px){
  .pop-card{
    height: 200px;
  }
  .swiper{
    padding-bottom: 40px;
  }
}

/* services.css */
.services-section{ 
  padding: 60px 20px; 
  background: #fff; 
  color: #111; 
}
.services-grid{
  display: grid; 
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); 
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
}
.service-card{
  background: #f9fafc; 
  border-radius: 20px; 
  padding: 30px; 
  text-align: center;
  box-shadow: 0 4px 15px rgba(0,0,0,0.08); 
  transition: all 0.3s ease;
  border: 1px solid #e5e7eb;
}
.service-card:hover{ 
  transform: translateY(-8px); 
  box-shadow: 0 12px 30px rgba(0,0,0,0.15);
}
.service-card img{ 
  width: 70px; 
  height: 70px; 
  margin: 0 auto 20px; 
  display: block;
}
.service-card h3{ 
  font-size: 22px; 
  margin: 0 0 15px; 
  color: var(--primary-dark); 
  font-weight: 700;
}
.service-card p{ 
  font-size: 15px; 
  color: #666; 
  margin: 0; 
  line-height: 1.6;
}

/* Mobile adjustments for services */
@media (max-width: 768px){
  .services-section{
    padding: 40px 15px;
  }
  .services-grid{
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .service-card{
    padding: 25px 20px;
  }
  .service-card img{
    width: 60px;
    height: 60px;
    margin-bottom: 15px;
  }
  .service-card h3{
    font-size: 20px;
  }
}

/* testimonials.css - FIXED VERSION */
.testimonials-section{
  padding: 60px 20px;
  background: var(--light-bg);
}
.testimonial-card{
  background: #fff; 
  border: 2px solid #e0e0e0; 
  border-radius: 20px; 
  padding: 30px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.08); 
  transition: all 0.3s ease; 
  max-width: 700px; 
  margin: 0 auto;
  position: relative;
}
.testimonial-card:hover{ 
  transform: translateY(-8px); 
  box-shadow: 0 12px 30px rgba(0,0,0,0.15); 
  border-color: var(--accent);
}

.testimonial-text{ 
  font-size: 16px; 
  font-style: italic; 
  color: #444; 
  margin-bottom: 25px; 
  line-height: 1.7; 
  position: relative;
  padding-left: 20px;
}
.testimonial-text::before{
  content: '"';
  font-size: 60px;
  color: var(--accent);
  position: absolute;
  left: -10px;
  top: -20px;
  opacity: 0.3;
  font-family: serif;
}

.testimonial-author{ 
  display: flex; 
  align-items: center; 
  gap: 15px; 
}
.testimonial-author img{ 
  width: 70px; 
  height: 70px; 
  border-radius: 50%; 
  object-fit: cover; 
  border: 3px solid var(--accent); 
}
.author-info h4{ 
  margin: 0; 
  font-size: 18px; 
  font-weight: 700; 
  color: black; /* Changed to dark color for better visibility */
}
.author-info span{ 
  font-size: 14px; 
  color: black; 
  display: block;
  margin-top: 5px;
}
.author-info .testimonial-address {
  font-size: 14px;
  color: black;
  margin-top: 3px;
  font-style: italic;
}

/* center the testimonials section title */
#testimonials .section-title{ 
  text-align: center; 
  color: var(--primary-dark);
}

/* Mobile adjustments for testimonials */
@media (max-width: 768px){
  .testimonials-section{
    padding: 40px 15px;
  }
  .testimonial-card{
    padding: 25px 20px;
  }
  .testimonial-text{
    font-size: 15px;
    padding-left: 15px;
  }
  .testimonial-author{
    flex-direction: column;
    text-align: center;
    gap: 10px;
  }
  .author-info h4{
    font-size: 16px;
    color: black; /* Ensure color remains dark on mobile */
  }
  .author-info span,
  .author-info .testimonial-address {
    font-size: 13px;
    color: black; /* Ensure address is visible */
  
}


/* footer.css - consolidated */
.site-footer{
  background-color: #0b2b86; 
  color: #fff; 
  width: 100%; 
  box-sizing: border-box;
  padding-top: 50px; 
  padding-bottom: 20px; 
  margin-top: 60px; 
}
.site-footer__inner{
  width: 100%; 
  max-width: 1200px; 
  margin: 0 auto; 
  display: grid; 
  grid-template-columns: repeat(4, 1fr);
  gap: 30px; 
  padding: 0 20px; 
  box-sizing: border-box;
}
.site-footer__col{ 
  margin-bottom: 20px; 
}
.site-footer__title{ 
  font-size: 20px; 
  font-weight: 700; 
  margin-bottom: 20px; 
  color: #fff; 
  position: relative;
  padding-bottom: 10px;
}
.site-footer__title::after{
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 40px;
  height: 3px;
  background: var(--accent);
  border-radius: 2px;
}
.site-footer ul{ 
  list-style: none; 
  margin: 0; 
  padding: 0; 
}
.site-footer li{
  margin-bottom: 12px;
}
.site-footer a{ 
  color: #e0e0e0; 
  text-decoration: none; 
  font-size: 15px; 
  transition: color 0.3s;
  display: inline-block;
}
.site-footer a:hover{ 
  color: var(--accent); 
  transform: translateX(5px);
}

/* Discover 2-col links */
.site-footer__links-grid{ 
  display: grid; 
  grid-template-columns: repeat(2, 1fr); 
  gap: 12px; 
  max-width: 280px; 
}

/* Socials */
.site-footer__socials{
  display: flex;
  gap: 10px;
  margin-top: 15px;
}
.site-footer__socials a{
  display: inline-flex; 
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.1); 
  color: #fff; 
  padding: 10px; 
  border-radius: 8px;
  font-size: 16px; 
  font-weight: 600; 
  text-decoration: none; 
  transition: all 0.3s;
  width: 40px;
  height: 40px;
}
.site-footer__socials a:hover{ 
  background: var(--accent); 
  color: var(--primary-dark);
  transform: translateY(-3px);
}

/* bottom */
.site-footer__bottom{
  text-align: center; 
  margin-top: 50px; 
  border-top: 1px solid rgba(255,255,255,0.15);
  padding-top: 20px; 
  font-size: 14px; 
  color: rgba(255,255,255,0.8);
  grid-column: 1 / -1;
}

/* Address section in footer - FIXED */
.footer-address {
  margin-top: 15px;
}
.address-title, .support-title{
  margin:12px 0 6px 0;
  font-weight:700;
  color:#fff;
  font-size:15px;
}
.address{
  margin:0 0 8px 0;
  color:#e0e0e0;
  line-height: 1.5;
  font-size: 14px;
}
.hotline{
  margin:0 0 8px 0;
  font-weight:700;
  color:#ffd700;
  font-size:18px;
}

/* Responsive footer */
@media (max-width: 992px){
  .site-footer__inner{ 
    grid-template-columns: repeat(2, 1fr); 
    gap: 30px 20px;
  }
  .site-footer__links-grid{ 
    grid-template-columns: 1fr; 
  }
}
@media (max-width: 600px){
  .site-footer__inner{ 
    grid-template-columns: 1fr; 
    padding: 0 15px; 
    gap: 25px;
  }
  .site-footer{
    padding-top: 40px;
    margin-top: 40px;
  }
  .site-footer__title{
    font-size: 18px;
  }
  .address-title, .support-title {
    font-size: 14px;
  }
  .address {
    font-size: 13px;
  }
  .hotline {
    font-size: 16px;
  }
}

/* swiper.css - generic pager styling */
.swiper{ 
  padding-bottom: 50px; 
  width: 100%;
}
.swiper-pagination{ 
  bottom: 0 !important;
}
.swiper-pagination-bullet{ 
  width: 12px; 
  height: 12px; 
  opacity: .4; 
  background: #e0e0e0; 
  border-radius: 999px; 
  transition: all 0.3s;
}
.swiper-pagination-bullet-active{ 
  background: var(--accent); 
  opacity: 1; 
  transform: scale(1.2); 
  width: 30px;
  border-radius: 6px;
}

/* Mobile adjustments for swiper */
@media (max-width: 768px){
  .swiper{
    padding-bottom: 40px;
  }
  .swiper-pagination-bullet{
    width: 10px;
    height: 10px;
  }
  .swiper-pagination-bullet-active{
    width: 25px;
  }
}

/* Additional responsive utilities */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
}

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

.mb-20 {
  margin-bottom: 20px;
}

.mt-20 {
  margin-top: 20px;
}

/* Loading animation for better UX */
.loading {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 3px solid rgba(255,255,255,.3);
  border-radius: 50%;
  border-top-color: #fff;
  animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Focus styles for accessibility */
button:focus,
a:focus,
.dropdown:focus {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  :root {
    --accent: #ff9900;
    --brand: #003366;
    --primary-dark: #001a33;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
                }