/*--------------------------------------------------------------
# URBAN THEME — travel site override
# Loaded after style.css to apply the dark/gradient/glass look
--------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800;900&family=Space+Grotesk:wght@500;600;700;800&display=swap');

:root{
  --urban-bg:        #0b0c14;
  --urban-bg-alt:    #11121f;
  --urban-surface:   rgba(255,255,255,0.05);
  --urban-border:    rgba(255,255,255,0.08);
  --urban-text:      #e7e8f3;
  --urban-text-dim:  #9a9cb8;
  --urban-grad-1:    #6d5bff;
  --urban-grad-2:    #ff5cb3;
  --urban-grad-3:    #36e2d6;
  --urban-gradient:  linear-gradient(135deg, var(--urban-grad-1) 0%, var(--urban-grad-2) 55%, var(--urban-grad-3) 100%);
}

*{ scrollbar-color: var(--urban-grad-1) var(--urban-bg); }

::-webkit-scrollbar{ width: 10px; height: 10px; }
::-webkit-scrollbar-track{ background: var(--urban-bg); }
::-webkit-scrollbar-thumb{
  background: var(--urban-gradient);
  border-radius: 10px;
}

::selection{
  background: var(--urban-grad-1);
  color: #fff;
}

/*--------------------------------------------------------------
# Global
--------------------------------------------------------------*/
html, body{
  background: var(--urban-bg);
  color: var(--urban-text);
}

body{
  font-family: 'Outfit', 'Poppins', sans-serif;
  position: relative;
}

/* soft glowing blobs floating in the background */
body::before,
body::after{
  content: "";
  position: fixed;
  border-radius: 50%;
  filter: blur(120px);
  z-index: 0;
  opacity: 0.35;
  pointer-events: none;
}
body::before{
  width: 480px; height: 480px;
  top: -120px; right: -120px;
  background: var(--urban-grad-1);
  animation: urban-float-1 16s ease-in-out infinite alternate;
}
body::after{
  width: 520px; height: 520px;
  bottom: -160px; left: 10%;
  background: var(--urban-grad-2);
  animation: urban-float-2 18s ease-in-out infinite alternate;
}

@keyframes urban-float-1{
  0%   { transform: translate(0,0) scale(1); }
  100% { transform: translate(-60px, 80px) scale(1.15); }
}
@keyframes urban-float-2{
  0%   { transform: translate(0,0) scale(1); }
  100% { transform: translate(80px, -40px) scale(1.1); }
}

h1, h2, h3, h4, h5, h6, .heading{
  font-family: 'Space Grotesk', sans-serif;
}

a{ color: var(--urban-grad-3); }
a:hover{ color: var(--urban-grad-2); }

section{
  position: relative;
  z-index: 1;
  background: transparent !important;
}

/*--------------------------------------------------------------
# Headings
--------------------------------------------------------------*/
.heading{
  color: var(--urban-text);
  background: var(--urban-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 2px;
}

/*--------------------------------------------------------------
# Header / Navbar
--------------------------------------------------------------*/
.header{
  background: rgba(11,12,20,0.85) !important;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--urban-border);
  box-shadow: 0 4px 30px rgba(0,0,0,0.4);
}

.header.active{
  background: rgba(11,12,20,0.97) !important;
  box-shadow: 0 4px 30px rgba(0,0,0,0.5) !important;
}

.header .logo{
  font-family: 'Space Grotesk', sans-serif;
  background: var(--urban-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.header .logo i{
  -webkit-text-fill-color: initial;
  background: var(--urban-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.header .navbar a{
  color: var(--urban-text-dim);
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
}

.header .navbar a:hover{
  color: var(--urban-grad-3);
}

.header .navbar #nav-close{
  color: var(--urban-text);
}

.header .icons a,
.header .icons div{
  color: var(--urban-text-dim);
}

.header .icons a:hover,
.header .icons div:hover{
  color: var(--urban-grad-3);
}

@media (max-width: 768px){
  .header .navbar{
    background: var(--urban-bg-alt) !important;
  }
}

/*--------------------------------------------------------------
# Search form
--------------------------------------------------------------*/
.search-form{
  background: rgba(11,12,20,0.92) !important;
}

.search-form form{
  border-bottom-color: var(--urban-border);
}

/*--------------------------------------------------------------
# Buttons
--------------------------------------------------------------*/
.btn{
  border: none !important;
  background: var(--urban-gradient);
  color: #fff !important;
  font-weight: 700;
  letter-spacing: 1px;
  border-radius: 50px;
  box-shadow: 0 10px 30px rgba(109,91,255,0.35);
  transition: all .35s ease;
}

.btn:hover{
  background: var(--urban-gradient);
  color: #fff !important;
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 14px 40px rgba(255,92,179,0.4);
}

/*--------------------------------------------------------------
# Home / hero slider
--------------------------------------------------------------*/
.home .box{
  position: relative;
}

.home .box::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11,12,20,0.35) 0%, rgba(11,12,20,0.85) 100%);
  z-index: 0;
}

.home .box .content{
  position: relative;
  z-index: 1;
}

.home .box .content span{
  color: var(--urban-grad-3);
  font-family: 'Space Grotesk', sans-serif;
}

.home .box .content h3{
  background: var(--urban-gradient);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: urban-gradient-shift 6s ease infinite;
}

@keyframes urban-gradient-shift{
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.home .box .content p{
  color: var(--urban-text-dim);
}

.swiper-button-next::after,
.swiper-button-prev::after{
  color: var(--urban-text);
}

/*--------------------------------------------------------------
# Category boxes
--------------------------------------------------------------*/
.category .box-container .box{
  background: var(--urban-surface);
  border: 1px solid var(--urban-border);
  border-radius: 20px;
  transition: all .35s ease;
}

.category .box-container .box:hover{
  transform: translateY(-8px);
  border-color: transparent;
  box-shadow: 0 16px 40px rgba(109,91,255,0.25);
}

.category .box-container .box img{
  border: 3px solid transparent;
  background: var(--urban-gradient);
  padding: 3px;
  background-clip: border-box;
}

.category .box-container .box h3{
  background: var(--urban-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.category .box-container .box p{
  color: var(--urban-text-dim);
}

/*--------------------------------------------------------------
# About section
--------------------------------------------------------------*/
.about{
  background: var(--urban-bg-alt) !important;
  border-radius: 24px;
}

.about .image img{
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5) !important;
  border: 1px solid var(--urban-border);
}

.about .content h3{
  color: #fff;
  font-weight: 800;
  background: var(--urban-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.about .content p{
  color: var(--urban-text-dim);
}

/*--------------------------------------------------------------
# Shop / product slider
--------------------------------------------------------------*/
.shop .slide{
  border: 1px solid var(--urban-border) !important;
  border-radius: 16px;
  overflow: hidden;
  background: var(--urban-surface);
  transition: all .35s ease;
}

.shop .slide:hover{
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(109,91,255,0.25);
}

.shop .slide .image .icons a{
  background: var(--urban-gradient) !important;
  color: #fff;
}

.shop .slide .image .icons a:hover{
  filter: brightness(1.2);
}

.shop .slide .content h3{
  color: var(--urban-text);
}

.shop .slide .content .price{
  background: var(--urban-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 700;
}

.shop .slide .content .stars i{
  color: var(--urban-grad-3);
}

/*--------------------------------------------------------------
# Packages
--------------------------------------------------------------*/
.packages{
  background: var(--urban-bg-alt) !important;
  border-radius: 24px;
}

.packages .box-container .box{
  background: var(--urban-surface) !important;
  border: 1px solid var(--urban-border) !important;
  border-radius: 20px;
  transition: all .35s ease;
}

.packages .box-container .box:hover{
  background: rgba(109,91,255,0.08) !important;
  transform: translateY(-8px);
  box-shadow: 0 16px 40px rgba(109,91,255,0.25);
}

.packages .box-container .box .content h3{
  color: var(--urban-text) !important;
}

.packages .box-container .box .content p{
  color: var(--urban-text-dim) !important;
}

.packages .box-container .box .content .price{
  background: var(--urban-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 700;
}

.packages .box-container .box:hover .btn{
  border-color: transparent;
}

/*--------------------------------------------------------------
# Reviews
--------------------------------------------------------------*/
.reviews .slide .text{
  background: var(--urban-surface) !important;
  border: 1px solid var(--urban-border);
  color: var(--urban-text-dim) !important;
  border-radius: 16px;
}

.reviews .slide .text::before{
  background: var(--urban-surface) !important;
  border-left: 1px solid var(--urban-border);
  border-bottom: 1px solid var(--urban-border);
}

.reviews .slide .user h3{
  color: var(--urban-text);
}

.reviews .slide .user span{
  color: var(--urban-grad-3);
}

/*--------------------------------------------------------------
# Services
--------------------------------------------------------------*/
.services{
  background: var(--urban-bg-alt) !important;
  border-radius: 24px;
}

.services .box-container .box{
  background: var(--urban-surface) !important;
  border: 1px solid var(--urban-border) !important;
  border-radius: 20px;
  transition: all .35s ease;
}

.services .box-container .box:hover{
  background: rgba(54,226,214,0.08) !important;
  transform: translateY(-8px);
  box-shadow: 0 16px 40px rgba(54,226,214,0.2);
}

.services .box-container .box img{
  filter: none !important;
}

.services .box-container .box:hover img{
  filter: none !important;
}

.services .box-container .box h3{
  background: var(--urban-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.services .box-container .box p,
.services .box-container .box:hover p{
  color: var(--urban-text-dim) !important;
}

.services .box-container .box:hover .btn{
  border-color: transparent !important;
  color: #fff !important;
}

/*--------------------------------------------------------------
# Blogs
--------------------------------------------------------------*/
.blogs .slide img{
  border-radius: 16px;
}

.blogs .slide .icons{
  background: var(--urban-gradient) !important;
}

.blogs .slide .icons a{
  color: #fff;
}

.blogs .slide .icons a:hover{
  color: var(--urban-bg);
}

.blogs .slide .icons a i{
  color: #fff;
}

.blogs .slide h3{
  color: var(--urban-text);
}

.blogs .slide p{
  color: var(--urban-text-dim);
}

/*--------------------------------------------------------------
# Newsletter
--------------------------------------------------------------*/
.newsletter{
  background: var(--urban-bg-alt) !important;
  border-radius: 24px;
}

.newsletter .content p{
  color: var(--urban-text-dim);
}

.newsletter .content form{
  background: var(--urban-surface) !important;
  border: 1px solid var(--urban-border) !important;
  border-radius: 50px;
}

.newsletter .content form .email{
  color: var(--urban-text);
}

.newsletter .content form .email::placeholder{
  color: var(--urban-text-dim);
}

.newsletter .content form .btn{
  background: var(--urban-gradient) !important;
}

.newsletter .content form .btn:hover{
  color: #fff !important;
}

/*--------------------------------------------------------------
# Clients
--------------------------------------------------------------*/
.clients .silde img{
  opacity: 0.7;
  filter: grayscale(1) invert(1);
  transition: opacity .3s ease;
}

.clients .silde img:hover{
  opacity: 1;
}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
.footer{
  background: linear-gradient(rgba(11,12,20,0.9), rgba(11,12,20,0.97)), url(../images/footer-bg.jpg) no-repeat !important;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

.footer .box-container .box h3{
  background: var(--urban-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.footer .box-container .box a{
  color: var(--urban-text-dim);
}

.footer .box-container .box a i{
  color: var(--urban-grad-3);
}

.footer .box-container .box a:hover{
  color: var(--urban-grad-2);
}

.footer .credit{
  color: var(--urban-text-dim);
}

.footer .credit span{
  background: var(--urban-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 800;
}