a {
    color: unset;
    text-decoration: none;
}
.modal-backdrop.blur {
      backdrop-filter: blur(8px);
      background-color: rgba(0, 0, 0, 0.3);
    }
.xscroll {
      max-width: 100%;
      overflow-y: auto;
      overflow-x: hidden;
      padding: 10px;
      box-sizing: border-box;

      /* Firefox scrollbar */
      scrollbar-width: thin;
      scrollbar-color: #6082f1 #1a1f2d;
    }

    /* WebKit browsers (Chrome, Edge, Safari) */
    .xscroll::-webkit-scrollbar {
      width: 6px;
    }

    .xscroll::-webkit-scrollbar-track {
      background: #ddd;
    }

    .xscroll::-webkit-scrollbar-thumb {
      background-color: #6082f1;
      border-radius: 4px;
    }

    .xscroll::-webkit-scrollbar-thumb:hover {
      background-color: #4a6ee0;
    }

    /* Optional: Prevent child content from breaking layout */
    .xscroll * {
      max-width: 100%;
      word-wrap: break-word;
    }



    .yscroll {
      max-width: 100%;

      overflow-y: hidden;
      overflow-x:  auto;
      padding: 10px;
      
      box-sizing: border-box;

      /* Firefox scrollbar */
      scrollbar-width: thin;
      scrollbar-color: #6082f1 #111827
    }

    /* WebKit browsers (Chrome, Edge, Safari) */
    .yscroll::-webkit-scrollbar {
      width: 6px;
    }

    .yscroll::-webkit-scrollbar-track {
      background: #ddd;
    }

    .yscroll::-webkit-scrollbar-thumb {
      background-color: #6082f1;
      border-radius: 4px;
    }

    .yscroll::-webkit-scrollbar-thumb:hover {
      background-color: #4a6ee0;
    }

    /* Optional: Prevent child content from breaking layout */
    .yscroll * {
      max-width: 100%;
      word-wrap: break-word;
    }
/* Extra small devices (phones) */
@media (max-width: 575px) {

/*view*/

.eventdate{width:100%;}

footer {
  background-color: #070a12;
  color: #fff;
  padding: 20px 0;
}
footer a {
    color: #b6bcd0;
    text-decoration: none;
    font-size: 16px;
}
footer a:hover {
  text-decoration: underline;
}

.textsection
{    background: #111827;
    border-radius: 10px;
    margin-top: 15px;}

.section-text
{
      margin-top: 35px;
    color: #b6bcd0;
    font-size: 14px;
    padding: 12px;
    text-align: center;
}

.img-fluid{
        border-radius: 4px;
    display: block;
    height: 125px;
    margin: 4px;
    min-width: 200px;
   }

    @font-face {
  font-family: 'MyCustomFont';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('css/Brand.woff2') format('woff2');
    }

body {
 font-family: 'MyCustomFont', sans-serif;
}

  .centrea{    text-align: center;
    text-decoration: none; margin-right: 40px;}

/* make sure page edges have no gaps if you want flush edges */

/* horizontal scroll container */
.cards-strip {
  margin-top: 40px;
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  gap: 12px;                         /* space between cards */
  padding: 10px 12px 12px;              /* optional inner padding */
  scroll-snap-type: x mandatory;     /* nice snapping */
  -webkit-overflow-scrolling: touch; /* smooth on iOS */

      border-left : none ;
      border-right : none ;
       border-bottom : none ;
}

/* hide scrollbar (optional) */
.cards-strip::-webkit-scrollbar {
  display: none;
}
.cards-strip {
  scrollbar-width: auto; /* Firefox */
}

.cards-strip {
  overflow-x: auto;   /* Ensure horizontal scrolling */
  white-space: nowrap;
  
}

/* WebKit Browsers (Chrome, Edge, Safari) */

.trip-card__body p{
        margin-bottom: 0rem;
}
/* card (same as before, with fixed basis so they line up) */
.trip-card {
  flex: 0 0 290px;   /* width of each card; change as you like */
  border-radius: 12px;
  overflow: hidden;
  background: #111827;
  box-shadow: 0 6px 18px rgba(0,0,0,.15);
  color: #fff;
  scroll-snap-align: start; /* snap each card to start */
  
}

.trip-card__img {
  width: 100%;
  height: 140px;
  object-fit: cover;
  display: block;
}

.trip-card__body {
  background: #070a12;
  padding: 12px 14px;
}

.trip-card__title {
     font-size: 14px;
    margin-bottom: 4px;
}
.trip-card__sub
 {
     color: #b6bcd0;
    font-size: 13.33px;
}


.trip-card__desc {
    font-weight: 500;
     color: #b6bcd0;
    font-size: 14px;
}


.trip-card__price {
  margin-top: 10px;
  font-size: 1rem;
  font-weight: 700;
}


.tour-section {
 
  padding: 20px;
  text-align: center;
  
    border-bottom: 1px #b6bcd0 dashed;
}

.tour-section h2 {
  color: #c0c0c0; /* light grey text */
  font-weight: 600;
  display: inline-block;
  position: relative;
}

.divheader{

  font-weight: 500;
  color: #b6bcd0;
    font-size: 20px;
    margin: 0 auto;
    max-width: 900px;
    padding: 12px 12px 0;
    text-align: center;
    text-transform: capitalize;
font-weight: 600;
 color: #b6bcd0;
    text-decoration: none;
  

}


/*--------------Gallay Images start here--*/

    .thumb-strip img {
      height:90px; object-fit:cover; cursor:pointer;
      border-radius:.25rem; transition:transform .2s;
    }
    .thumb-strip img:hover { transform:scale(1.05); }

    /* Modal background with blur */
    .modal-backdrop.show {
      background: rgba(0,0,0,0.7);
      backdrop-filter: blur(5px);
    }
    
    /* Vertically center the carousel image */
    .modal-dialog {
      display: flex;
      align-items: center;
      min-height: 100%;
    }
    .modal-content {
      background: transparent;
      border: none;
      box-shadow: none;
    }
    .carousel-item img {
      max-height: 80vh; /* vertical center effect */
      object-fit: contain;
      margin: 0 auto;
      display: block;
    }

    /* Small modern close button */
    .custom-close-btn {
      position: absolute;
      top: 15px;
      right: 15px;
      background: rgba(0,0,0,0.6);
      color: white;
      border: none;
      border-radius: 50%;
      width: 35px;
      height: 35px;
      font-size: 1.4rem;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      z-index: 10;
      transition: background 0.2s;
    }
    .custom-close-btn:hover {
      background: rgba(255,255,255,0.2);
    }
  /* pop up css*/
 
    .thumb-strip img {
      height:140px; 
      object-fit:cover; cursor:pointer;
      border-radius:.25rem; transition:transform .2s;
    }
    .thumb-strip img:hover { transform:scale(1.05); }

    /* Modal background with blur */
    .modal-backdrop.show {
      background: rgba(0,0,0,0.7);
      backdrop-filter: blur(5px);
    }

    .modal-dialog {
      margin-top: 100px; /* push the image down from top */
    }

    /* Small modern close button */
    .custom-close-btn {
      position: absolute;
      top: 10px;
      right: 10px;
      background: rgba(0,0,0,0.6);
      color: white;
      border: none;
      border-radius: 50%;
      width: 32px;
      height: 32px;
      font-size: 1.2rem;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      z-index: 10;
      transition: background 0.2s;
    }
    .custom-close-btn:hover {
      background: rgba(255,255,255,0.2);
    }



    
.thumb-strip {
  overflow-x: auto;   /* Ensure horizontal scrolling */
  white-space: nowrap;
  
}

/* WebKit Browsers (Chrome, Edge, Safari) */
.thumb-strip::-webkit-scrollbar {
  height: 8px; /* Scrollbar height for horizontal scroll */
}

.thumb-strip::-webkit-scrollbar-track {
  background: #ddd; /* Track background */
}

.thumb-strip::-webkit-scrollbar-thumb {
  background-color: #6082f1; /* Scroll handle color */
  border-radius: 4px;
}

.thumb-strip::-webkit-scrollbar-thumb:hover {
  background-color: #e65c00; /* Handle color on hover */
}

.statboxpadding
  {  padding-left: 15px;
    padding-right: 15px;
}

.navlabel{font-size: 14px;}
.navlabel img{padding: 3px;
padding-top: 0px;}
.navpadding{margin-left: 50px;}



body {
    background-color: #070a12;
    color: white;
  
    margin: 0;
    padding: 0;
  }
  
  .thumb-strip img{
      height: 90px;
      object-fit: cover;
      cursor: pointer;
      border-radius: .25rem;
    }
 
    
    .obj-cover { object-fit: cover; }
    .stats-box {
 background-color: #ffc107;
        border-radius: 12px;
        color: #212529;
        padding: 20px;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    .stat-item { text-align: center; }
    .stat-item i {
      font-size: 28px;
      display: block;
      margin-bottom: 8px;
    }
    .bg-card {
      height: 250px;
      background-size: cover;
      background-position: center;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 1.2rem;
      font-weight: 600;
      text-align: center;
      padding: 10px;
      transition: transform 0.3s ease;
    }
    .bg-card:hover { transform: scale(1.03); }
  /* Sections */
  section {
    padding: 20px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
  /* Navigation bar */
  .navbar-custom {
        background-color: #070a12a2;
    transition: background-color .5s ease;
  
  }
  .logoimg{
    border-radius: 150px;
    
    width: 80px;}
  .profile-img {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    object-fit: cover;
  }
  /* Banner Section */
  /* Banner */
.banner{
  position: relative;
  background: url('img/foodjp.jpg') no-repeat center/cover;
  height: 365px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  overflow: hidden;

  /* <-- this centers the inner block */
  display: grid;
  place-items: center;
  text-align: center;
}

.banner::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(rgba(7,10,18,0), #070a12);
  z-index:1;
}

/* Content that must stay above the overlay */
.banner-inner{
  position: relative;
  z-index: 2;

}

.banner-small{
  position: relative;
  background: url('img/foodjp.jpg') no-repeat center/cover;
  height: 250px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  overflow: hidden;
  /* <-- this centers the inner block */
  display: grid;
  place-items: center;
  text-align: center;
}

.banner-small::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(rgba(7,10,18,0), #070a12);
  z-index:1;
}

/* Content that must stay above the overlay */
.banner-small-inner{
  position: relative;
  z-index: 2;

}



.logoimg{
  border-radius:150px;
  width:150px;
}

.banner-text{
  font-size:35px;

  color:#fff;
  margin-top:15px;
}

/* Bottom text */
.bottom-text{
  position:absolute;
  bottom:20px;
  left:50%;
  transform: translateX(-50%);
  color:#fff;
  font-size:30px;
  font-weight:bold;
  text-align:center;
  z-index:5;
  width:100%;
}

.bottom-text span{
  position:relative;
  display:inline-block;
  padding:0 15px;
}

.bottom-text span::before,
.bottom-text span::after{
  content:"";
  position:absolute;
  top:50%;
  width:9999px;
  height:4px;
  background:#fff;
}

.bottom-text span::before{
  right:100%;
  margin-right:15px;
}

.bottom-text span::after{
  left:100%;
  margin-left:15px;
}

  /* Your CSS for phones */
}

/* Small devices (large phones, portrait tablets) */
@media (min-width: 576px) and (max-width: 767px) {

/*view*/

.eventdate{width:100%;}

footer {
  background-color: #070a12;
  color: #fff;
  padding: 20px 0;
}
footer a {
    color: #b6bcd0;
    text-decoration: none;
    font-size: 16px;
}
footer a:hover {
  text-decoration: underline;
}

.textsection
{    background: #111827;
    border-radius: 10px;
    margin-top: 15px;}

.section-text
{
      margin-top: 35px;
    color: #b6bcd0;
    font-size: 14px;
    padding: 12px;
    text-align: center;
}

.img-fluid{
        border-radius: 4px;
    display: block;
    height: 125px;
    margin: 4px;
    min-width: 200px;
   }

    @font-face {
  font-family: 'MyCustomFont';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('css/Brand.woff2') format('woff2');
    }

body {
 font-family: 'MyCustomFont', sans-serif;
}

  .centrea{    text-align: center;
    text-decoration: none; margin-right: 40px;}

/* make sure page edges have no gaps if you want flush edges */

/* horizontal scroll container */
.cards-strip {
  margin-top: 40px;
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  gap: 12px;                         /* space between cards */
  padding: 10px 12px 12px;              /* optional inner padding */
  scroll-snap-type: x mandatory;     /* nice snapping */
  -webkit-overflow-scrolling: touch; /* smooth on iOS */

      border-left : none ;
      border-right : none ;
       border-bottom : none ;
}

/* hide scrollbar (optional) */
.cards-strip::-webkit-scrollbar {
  display: none;
}
.cards-strip {
  scrollbar-width: auto; /* Firefox */
}

.cards-strip {
  overflow-x: auto;   /* Ensure horizontal scrolling */
  white-space: nowrap;
  
}

/* WebKit Browsers (Chrome, Edge, Safari) */

.trip-card__body p{
        margin-bottom: 0rem;
}
/* card (same as before, with fixed basis so they line up) */
.trip-card {
  flex: 0 0 290px;   /* width of each card; change as you like */
  border-radius: 12px;
  overflow: hidden;
  background: #111827;
  box-shadow: 0 6px 18px rgba(0,0,0,.15);
  color: #fff;
  scroll-snap-align: start; /* snap each card to start */
  
}

.trip-card__img {
  width: 100%;
  height: 140px;
  object-fit: cover;
  display: block;
}

.trip-card__body {
  background: #070a12;
  padding: 12px 14px;
}

.trip-card__title {
     font-size: 14px;
    margin-bottom: 4px;
}
.trip-card__sub
 {
     color: #b6bcd0;
    font-size: 13.33px;
}


.trip-card__desc {
    font-weight: 500;
     color: #b6bcd0;
    font-size: 14px;
}


.trip-card__price {
  margin-top: 10px;
  font-size: 1rem;
  font-weight: 700;
}


.tour-section {
 
  padding: 20px;
  text-align: center;
  
    border-bottom: 1px #b6bcd0 dashed;
}

.tour-section h2 {
  color: #c0c0c0; /* light grey text */
  font-weight: 600;
  display: inline-block;
  position: relative;
}

.divheader{

  font-weight: 500;
  color: #b6bcd0;
    font-size: 20px;
    margin: 0 auto;
    max-width: 900px;
    padding: 12px 12px 0;
    text-align: center;
    text-transform: capitalize;
font-weight: 600;
 color: #b6bcd0;
    text-decoration: none;
  

}


/*--------------Gallay Images start here--*/

    .thumb-strip img {
      height:90px; object-fit:cover; cursor:pointer;
      border-radius:.25rem; transition:transform .2s;
    }
    .thumb-strip img:hover { transform:scale(1.05); }

    /* Modal background with blur */
    .modal-backdrop.show {
      background: rgba(0,0,0,0.7);
      backdrop-filter: blur(5px);
    }
    
    /* Vertically center the carousel image */
    .modal-dialog {
      display: flex;
      align-items: center;
      min-height: 100%;
    }
    .modal-content {
      background: transparent;
      border: none;
      box-shadow: none;
    }
    .carousel-item img {
      max-height: 80vh; /* vertical center effect */
      object-fit: contain;
      margin: 0 auto;
      display: block;
    }

    /* Small modern close button */
    .custom-close-btn {
      position: absolute;
      top: 15px;
      right: 15px;
      background: rgba(0,0,0,0.6);
      color: white;
      border: none;
      border-radius: 50%;
      width: 35px;
      height: 35px;
      font-size: 1.4rem;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      z-index: 10;
      transition: background 0.2s;
    }
    .custom-close-btn:hover {
      background: rgba(255,255,255,0.2);
    }
  /* pop up css*/
 
    .thumb-strip img {
      height:140px; 
      object-fit:cover; cursor:pointer;
      border-radius:.25rem; transition:transform .2s;
    }
    .thumb-strip img:hover { transform:scale(1.05); }

    /* Modal background with blur */
    .modal-backdrop.show {
      background: rgba(0,0,0,0.7);
      backdrop-filter: blur(5px);
    }

    .modal-dialog {
      margin-top: 100px; /* push the image down from top */
    }

    /* Small modern close button */
    .custom-close-btn {
      position: absolute;
      top: 10px;
      right: 10px;
      background: rgba(0,0,0,0.6);
      color: white;
      border: none;
      border-radius: 50%;
      width: 32px;
      height: 32px;
      font-size: 1.2rem;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      z-index: 10;
      transition: background 0.2s;
    }
    .custom-close-btn:hover {
      background: rgba(255,255,255,0.2);
    }



    
.thumb-strip {
  overflow-x: auto;   /* Ensure horizontal scrolling */
  white-space: nowrap;
  
}

/* WebKit Browsers (Chrome, Edge, Safari) */
.thumb-strip::-webkit-scrollbar {
  height: 8px; /* Scrollbar height for horizontal scroll */
}

.thumb-strip::-webkit-scrollbar-track {
  background: #ddd; /* Track background */
}

.thumb-strip::-webkit-scrollbar-thumb {
  background-color: #6082f1; /* Scroll handle color */
  border-radius: 4px;
}

.thumb-strip::-webkit-scrollbar-thumb:hover {
  background-color: #e65c00; /* Handle color on hover */
}

.statboxpadding
  {  padding-left: 190px;
    padding-right: 190px;
}

.navlabel{font-size: 14px;}
.navlabel img{padding: 3px;
padding-top: 0px;}
.navpadding{margin-left: 50px;}



body {
    background-color: #070a12;
    color: white;
   
    margin: 0;
    padding: 0;
  }
  
  .thumb-strip img{
      height: 90px;
      object-fit: cover;
      cursor: pointer;
      border-radius: .25rem;
    }
 
    
    .obj-cover { object-fit: cover; }
    .stats-box {
      background-color: #111827;
      border-radius: 12px;
      color: white;
      padding: 20px;
      display: flex;
      justify-content: space-around;
      align-items: center;
    }
    .stat-item { text-align: center; }
    .stat-item i {
      font-size: 28px;
      display: block;
      margin-bottom: 8px;
    }
    .bg-card {
      height: 250px;
      background-size: cover;
      background-position: center;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 1.2rem;
      font-weight: 600;
      text-align: center;
      padding: 10px;
      transition: transform 0.3s ease;
    }
    .bg-card:hover { transform: scale(1.03); }
  /* Sections */
  section {
    padding: 20px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
  /* Navigation bar */
  .navbar-custom {
        background-color: #070a12a2;
    transition: background-color .5s ease;
  
  }
  .logoimg{
    border-radius: 150px;
    
    width: 80px;}
  .profile-img {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    object-fit: cover;
  }
  /* Banner Section */
  /* Banner */
.banner{
  position: relative;
  background: url('img/foodjp.jpg') no-repeat center/cover;
  height: 365px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  overflow: hidden;

  /* <-- this centers the inner block */
  display: grid;
  place-items: center;
  text-align: center;
}

.banner::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(rgba(7,10,18,0), #070a12);
  z-index:1;
}

/* Content that must stay above the overlay */
.banner-inner{
  position: relative;
  z-index: 2;
}

.logoimg{
  border-radius:150px;
  width:80px;
}

.banner-text{
  font-size:35px;
  
  color:#fff;
  margin-top:10px;
}

/* Bottom text */
.bottom-text{
  position:absolute;
  bottom:36px;
  left:50%;
  transform: translateX(-50%);
  color:#fff;
  font-size:20px;
  font-weight:bold;
  text-align:center;
  z-index:5;
  width:100%;
}

.bottom-text span{
  position:relative;
  display:inline-block;
  padding:0 15px;
}

.bottom-text span::before,
.bottom-text span::after{
  content:"";
  position:absolute;
  top:50%;
  width:9999px;
  height:4px;
  background:#fff;
}

.bottom-text span::before{
  right:100%;
  margin-right:15px;
}

.bottom-text span::after{
  left:100%;
  margin-left:15px;
}

  /* Your CSS for large phones / small tablets */
}

/* Medium devices (tablets) */
@media (min-width: 768px) and (max-width: 991px) {

/*view*/

.eventdate{width:100%;}

footer {
  background-color: #070a12;
  color: #fff;
  padding: 20px 0;
}
footer a {
    color: #b6bcd0;
    text-decoration: none;
    font-size: 16px;
}
footer a:hover {
  text-decoration: underline;
}

.textsection
{    background: #111827;
    border-radius: 10px;
    margin-top: 15px;}

.section-text
{
      margin-top: 35px;
    color: #b6bcd0;
    font-size: 14px;
    padding: 12px;
    text-align: center;
}

.img-fluid{
        border-radius: 4px;
    display: block;
    height: 125px;
    margin: 4px;
    min-width: 200px;
   }

    @font-face {
  font-family: 'MyCustomFont';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('css/Brand.woff2') format('woff2');
    }

body {
 font-family: 'MyCustomFont', sans-serif;
}

  .centrea{    text-align: center;
    text-decoration: none; margin-right: 40px;}

/* make sure page edges have no gaps if you want flush edges */

/* horizontal scroll container */
.cards-strip {
  margin-top: 40px;
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  gap: 12px;                         /* space between cards */
  padding: 10px 12px 12px;              /* optional inner padding */
  scroll-snap-type: x mandatory;     /* nice snapping */
  -webkit-overflow-scrolling: touch; /* smooth on iOS */

      border-left : none ;
      border-right : none ;
       border-bottom : none ;
}

/* hide scrollbar (optional) */
.cards-strip::-webkit-scrollbar {
  display: none;
}
.cards-strip {
  scrollbar-width: auto; /* Firefox */
}

.cards-strip {
  overflow-x: auto;   /* Ensure horizontal scrolling */
  white-space: nowrap;
  
}

/* WebKit Browsers (Chrome, Edge, Safari) */

.trip-card__body p{
        margin-bottom: 0rem;
}
/* card (same as before, with fixed basis so they line up) */
.trip-card {
  flex: 0 0 290px;   /* width of each card; change as you like */
  border-radius: 12px;
  overflow: hidden;
  background: #111827;
  box-shadow: 0 6px 18px rgba(0,0,0,.15);
  color: #fff;
  scroll-snap-align: start; /* snap each card to start */
  
}

.trip-card__img {
  width: 100%;
  height: 140px;
  object-fit: cover;
  display: block;
}

.trip-card__body {
  background: #070a12;
  padding: 12px 14px;
}

.trip-card__title {
     font-size: 14px;
    margin-bottom: 4px;
}
.trip-card__sub
 {
     color: #b6bcd0;
    font-size: 13.33px;
}


.trip-card__desc {
    font-weight: 500;
     color: #b6bcd0;
    font-size: 14px;
}


.trip-card__price {
  margin-top: 10px;
  font-size: 1rem;
  font-weight: 700;
}


.tour-section {
 
  padding: 20px;
  text-align: center;
  
    border-bottom: 1px #b6bcd0 dashed;
}

.tour-section h2 {
  color: #c0c0c0; /* light grey text */
  font-weight: 600;
  display: inline-block;
  position: relative;
}

.divheader{

  font-weight: 500;
  color: #b6bcd0;
    font-size: 20px;
    margin: 0 auto;
    max-width: 900px;
    padding: 12px 12px 0;
    text-align: center;
    text-transform: capitalize;
font-weight: 600;
 color: #b6bcd0;
    text-decoration: none;
  

}


/*--------------Gallay Images start here--*/

    .thumb-strip img {
      height:90px; object-fit:cover; cursor:pointer;
      border-radius:.25rem; transition:transform .2s;
    }
    .thumb-strip img:hover { transform:scale(1.05); }

    /* Modal background with blur */
    .modal-backdrop.show {
      background: rgba(0,0,0,0.7);
      backdrop-filter: blur(5px);
    }
    
    /* Vertically center the carousel image */
    .modal-dialog {
      display: flex;
      align-items: center;
      min-height: 100%;
    }
    .modal-content {
      background: transparent;
      border: none;
      box-shadow: none;
    }
    .carousel-item img {
      max-height: 80vh; /* vertical center effect */
      object-fit: contain;
      margin: 0 auto;
      display: block;
    }

    /* Small modern close button */
    .custom-close-btn {
      position: absolute;
      top: 15px;
      right: 15px;
      background: rgba(0,0,0,0.6);
      color: white;
      border: none;
      border-radius: 50%;
      width: 35px;
      height: 35px;
      font-size: 1.4rem;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      z-index: 10;
      transition: background 0.2s;
    }
    .custom-close-btn:hover {
      background: rgba(255,255,255,0.2);
    }
  /* pop up css*/
 
    .thumb-strip img {
      height:140px; 
      object-fit:cover; cursor:pointer;
      border-radius:.25rem; transition:transform .2s;
    }
    .thumb-strip img:hover { transform:scale(1.05); }

    /* Modal background with blur */
    .modal-backdrop.show {
      background: rgba(0,0,0,0.7);
      backdrop-filter: blur(5px);
    }

    .modal-dialog {
      margin-top: 100px; /* push the image down from top */
    }

    /* Small modern close button */
    .custom-close-btn {
      position: absolute;
      top: 10px;
      right: 10px;
      background: rgba(0,0,0,0.6);
      color: white;
      border: none;
      border-radius: 50%;
      width: 32px;
      height: 32px;
      font-size: 1.2rem;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      z-index: 10;
      transition: background 0.2s;
    }
    .custom-close-btn:hover {
      background: rgba(255,255,255,0.2);
    }



    
.thumb-strip {
  overflow-x: auto;   /* Ensure horizontal scrolling */
  white-space: nowrap;
  
}

/* WebKit Browsers (Chrome, Edge, Safari) */
.thumb-strip::-webkit-scrollbar {
  height: 8px; /* Scrollbar height for horizontal scroll */
}

.thumb-strip::-webkit-scrollbar-track {
  background: #ddd; /* Track background */
}

.thumb-strip::-webkit-scrollbar-thumb {
  background-color: #6082f1; /* Scroll handle color */
  border-radius: 4px;
}

.thumb-strip::-webkit-scrollbar-thumb:hover {
  background-color: #e65c00; /* Handle color on hover */
}

.statboxpadding
  {  padding-left: 190px;
    padding-right: 190px;
}

.navlabel{font-size: 14px;}
.navlabel img{padding: 3px;
padding-top: 0px;}
.navpadding{margin-left: 50px;}



body {
    background-color: #070a12;
    color: white;
   
    margin: 0;
    padding: 0;
  }
  
  .thumb-strip img{
      height: 90px;
      object-fit: cover;
      cursor: pointer;
      border-radius: .25rem;
    }
 
    
    .obj-cover { object-fit: cover; }
    .stats-box {
      background-color: #111827;
      border-radius: 12px;
      color: white;
      padding: 20px;
      display: flex;
      justify-content: space-around;
      align-items: center;
    }
    .stat-item { text-align: center; }
    .stat-item i {
      font-size: 28px;
      display: block;
      margin-bottom: 8px;
    }
    .bg-card {
      height: 250px;
      background-size: cover;
      background-position: center;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 1.2rem;
      font-weight: 600;
      text-align: center;
      padding: 10px;
      transition: transform 0.3s ease;
    }
    .bg-card:hover { transform: scale(1.03); }
  /* Sections */
  section {
    padding: 20px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
  /* Navigation bar */
  .navbar-custom {
        background-color: #070a12a2;
    transition: background-color .5s ease;
  
  }
  .logoimg{
    border-radius: 150px;
    
    width: 80px;}
  .profile-img {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    object-fit: cover;
  }
  /* Banner Section */
  /* Banner */
.banner{
  position: relative;
  background: url('img/foodjp.jpg') no-repeat center/cover;
  height: 365px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  overflow: hidden;

  /* <-- this centers the inner block */
  display: grid;
  place-items: center;
  text-align: center;
}

.banner::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(rgba(7,10,18,0), #070a12);
  z-index:1;
}

/* Content that must stay above the overlay */
.banner-inner{
  position: relative;
  z-index: 2;
}

.logoimg{
  border-radius:150px;
  width:80px;
}

.banner-text{
  font-size:35px;
  
  color:#fff;
  margin-top:10px;
}

/* Bottom text */
.bottom-text{
  position:absolute;
  bottom:36px;
  left:50%;
  transform: translateX(-50%);
  color:#fff;
  font-size:20px;
  font-weight:bold;
  text-align:center;
  z-index:5;
  width:100%;
}

.bottom-text span{
  position:relative;
  display:inline-block;
  padding:0 15px;
}

.bottom-text span::before,
.bottom-text span::after{
  content:"";
  position:absolute;
  top:50%;
  width:9999px;
  height:4px;
  background:#fff;
}

.bottom-text span::before{
  right:100%;
  margin-right:15px;
}

.bottom-text span::after{
  left:100%;
  margin-left:15px;
}

  /* Your CSS for tablets */
}

/* Large devices (desktops, small laptops) */
@media (min-width: 992px) and (max-width: 1199px) {

/*view*/

.eventdate{width:100%;}

footer {
  background-color: #070a12;
  color: #fff;
  padding: 20px 0;
}
footer a {
    color: #b6bcd0;
    text-decoration: none;
    font-size: 16px;
}
footer a:hover {
  text-decoration: underline;
}

.textsection
{    background: #111827;
    border-radius: 10px;
    margin-top: 15px;}

.section-text
{
      margin-top: 35px;
    color: #b6bcd0;
    font-size: 14px;
    padding: 12px;
    text-align: center;
}

.img-fluid{
        border-radius: 4px;
    display: block;
    height: 125px;
    margin: 4px;
    min-width: 200px;
   }

    @font-face {
  font-family: 'MyCustomFont';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('css/Brand.woff2') format('woff2');
    }

body {
 font-family: 'MyCustomFont', sans-serif;
}

  .centrea{    text-align: center;
    text-decoration: none; margin-right: 40px;}

/* make sure page edges have no gaps if you want flush edges */

/* horizontal scroll container */
.cards-strip {
  margin-top: 40px;
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  gap: 12px;                         /* space between cards */
  padding: 10px 12px 12px;              /* optional inner padding */
  scroll-snap-type: x mandatory;     /* nice snapping */
  -webkit-overflow-scrolling: touch; /* smooth on iOS */

      border-left : none ;
      border-right : none ;
       border-bottom : none ;
}

/* hide scrollbar (optional) */
.cards-strip::-webkit-scrollbar {
  display: none;
}
.cards-strip {
  scrollbar-width: auto; /* Firefox */
}

.cards-strip {
  overflow-x: auto;   /* Ensure horizontal scrolling */
  white-space: nowrap;
  
}

/* WebKit Browsers (Chrome, Edge, Safari) */

.trip-card__body p{
        margin-bottom: 0rem;
}
/* card (same as before, with fixed basis so they line up) */
.trip-card {
  flex: 0 0 290px;   /* width of each card; change as you like */
  border-radius: 12px;
  overflow: hidden;
  background: #111827;
  box-shadow: 0 6px 18px rgba(0,0,0,.15);
  color: #fff;
  scroll-snap-align: start; /* snap each card to start */
  
}

.trip-card__img {
  width: 100%;
  height: 140px;
  object-fit: cover;
  display: block;
}

.trip-card__body {
  background: #070a12;
  padding: 12px 14px;
}

.trip-card__title {
     font-size: 14px;
    margin-bottom: 4px;
}
.trip-card__sub
 {
     color: #b6bcd0;
    font-size: 13.33px;
}


.trip-card__desc {
    font-weight: 500;
     color: #b6bcd0;
    font-size: 14px;
}


.trip-card__price {
  margin-top: 10px;
  font-size: 1rem;
  font-weight: 700;
}


.tour-section {
 
  padding: 20px;
  text-align: center;
  
    border-bottom: 1px #b6bcd0 dashed;
}

.tour-section h2 {
  color: #c0c0c0; /* light grey text */
  font-weight: 600;
  display: inline-block;
  position: relative;
}

.divheader{

  font-weight: 500;
  color: #b6bcd0;
    font-size: 20px;
    margin: 0 auto;
    max-width: 900px;
    padding: 12px 12px 0;
    text-align: center;
    text-transform: capitalize;
font-weight: 600;
 color: #b6bcd0;
    text-decoration: none;
  

}


/*--------------Gallay Images start here--*/

    .thumb-strip img {
      height:90px; object-fit:cover; cursor:pointer;
      border-radius:.25rem; transition:transform .2s;
    }
    .thumb-strip img:hover { transform:scale(1.05); }

    /* Modal background with blur */
    .modal-backdrop.show {
      background: rgba(0,0,0,0.7);
      backdrop-filter: blur(5px);
    }
    
    /* Vertically center the carousel image */
    .modal-dialog {
      display: flex;
      align-items: center;
      min-height: 100%;
    }
    .modal-content {
      background: transparent;
      border: none;
      box-shadow: none;
    }
    .carousel-item img {
      max-height: 80vh; /* vertical center effect */
      object-fit: contain;
      margin: 0 auto;
      display: block;
    }

    /* Small modern close button */
    .custom-close-btn {
      position: absolute;
      top: 15px;
      right: 15px;
      background: rgba(0,0,0,0.6);
      color: white;
      border: none;
      border-radius: 50%;
      width: 35px;
      height: 35px;
      font-size: 1.4rem;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      z-index: 10;
      transition: background 0.2s;
    }
    .custom-close-btn:hover {
      background: rgba(255,255,255,0.2);
    }
  /* pop up css*/
 
    .thumb-strip img {
      height:140px; 
      object-fit:cover; cursor:pointer;
      border-radius:.25rem; transition:transform .2s;
    }
    .thumb-strip img:hover { transform:scale(1.05); }

    /* Modal background with blur */
    .modal-backdrop.show {
      background: rgba(0,0,0,0.7);
      backdrop-filter: blur(5px);
    }

    .modal-dialog {
      margin-top: 100px; /* push the image down from top */
    }

    /* Small modern close button */
    .custom-close-btn {
      position: absolute;
      top: 10px;
      right: 10px;
      background: rgba(0,0,0,0.6);
      color: white;
      border: none;
      border-radius: 50%;
      width: 32px;
      height: 32px;
      font-size: 1.2rem;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      z-index: 10;
      transition: background 0.2s;
    }
    .custom-close-btn:hover {
      background: rgba(255,255,255,0.2);
    }



    
.thumb-strip {
  overflow-x: auto;   /* Ensure horizontal scrolling */
  white-space: nowrap;
  
}

/* WebKit Browsers (Chrome, Edge, Safari) */
.thumb-strip::-webkit-scrollbar {
  height: 8px; /* Scrollbar height for horizontal scroll */
}

.thumb-strip::-webkit-scrollbar-track {
  background: #ddd; /* Track background */
}

.thumb-strip::-webkit-scrollbar-thumb {
  background-color: #6082f1; /* Scroll handle color */
  border-radius: 4px;
}

.thumb-strip::-webkit-scrollbar-thumb:hover {
  background-color: #e65c00; /* Handle color on hover */
}

.statboxpadding
  {  padding-left: 190px;
    padding-right: 190px;
}

.navlabel{font-size: 14px;}
.navlabel img{padding: 3px;
padding-top: 0px;}
.navpadding{margin-left: 50px;}



body {
    background-color: #070a12;
    color: white;
   
    margin: 0;
    padding: 0;
  }
  
  .thumb-strip img{
      height: 90px;
      object-fit: cover;
      cursor: pointer;
      border-radius: .25rem;
    }
 
    
    .obj-cover { object-fit: cover; }
    .stats-box {
      background-color: #111827;
      border-radius: 12px;
      color: white;
      padding: 20px;
      display: flex;
      justify-content: space-around;
      align-items: center;
    }
    .stat-item { text-align: center; }
    .stat-item i {
      font-size: 28px;
      display: block;
      margin-bottom: 8px;
    }
    .bg-card {
      height: 250px;
      background-size: cover;
      background-position: center;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 1.2rem;
      font-weight: 600;
      text-align: center;
      padding: 10px;
      transition: transform 0.3s ease;
    }
    .bg-card:hover { transform: scale(1.03); }
  /* Sections */
  section {
    padding: 20px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
  /* Navigation bar */
  .navbar-custom {
        background-color: #070a12a2;
    transition: background-color .5s ease;
  
  }
  .logoimg{
    border-radius: 150px;
    
    width: 80px;}
  .profile-img {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    object-fit: cover;
  }
  /* Banner Section */
  /* Banner */
.banner{
  position: relative;
  background: url('img/foodjp.jpg') no-repeat center/cover;
  height: 365px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  overflow: hidden;

  /* <-- this centers the inner block */
  display: grid;
  place-items: center;
  text-align: center;
}

.banner::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(rgba(7,10,18,0), #070a12);
  z-index:1;
}

/* Content that must stay above the overlay */
.banner-inner{
  position: relative;
  z-index: 2;
}

.logoimg{
  border-radius:150px;
  width:80px;
}

.banner-text{
  font-size:35px;
  
  color:#fff;
  margin-top:10px;
}

/* Bottom text */
.bottom-text{
  position:absolute;
  bottom:36px;
  left:50%;
  transform: translateX(-50%);
  color:#fff;
  font-size:20px;
  font-weight:bold;
  text-align:center;
  z-index:5;
  width:100%;
}

.bottom-text span{
  position:relative;
  display:inline-block;
  padding:0 15px;
}

.bottom-text span::before,
.bottom-text span::after{
  content:"";
  position:absolute;
  top:50%;
  width:9999px;
  height:4px;
  background:#fff;
}

.bottom-text span::before{
  right:100%;
  margin-right:15px;
}

.bottom-text span::after{
  left:100%;
  margin-left:15px;
}

  /* Your CSS for small desktops/laptops */
}

/* Extra large devices (large desktops) */
@media (min-width: 1200px) and (max-width: 1399px) {

/*view*/

.eventdate{width:20%;}

footer {
  background-color: #070a12;
  color: #fff;
  padding: 20px 0;
}
footer a {
    color: #b6bcd0;
    text-decoration: none;
    font-size: 16px;
}
footer a:hover {
  text-decoration: underline;
}

.textsection
{    background: #111827;
    border-radius: 10px;
    margin-top: 15px;}

.section-text
{
      margin-top: 35px;
    color: #b6bcd0;
    font-size: 14px;
    padding: 12px;
    text-align: center;
}

.img-fluid{
        border-radius: 4px;
    display: block;
    height: 125px;
    margin: 4px;
    min-width: 200px;
   }

    @font-face {
  font-family: 'MyCustomFont';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('css/Brand.woff2') format('woff2');
    }

body {
 font-family: 'MyCustomFont', sans-serif;
}

  .centrea{    text-align: center;
    text-decoration: none; margin-right: 40px;}

/* make sure page edges have no gaps if you want flush edges */

/* horizontal scroll container */
.cards-strip {
  margin-top: 40px;
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  gap: 12px;                         /* space between cards */
  padding: 10px 12px 12px;              /* optional inner padding */
  scroll-snap-type: x mandatory;     /* nice snapping */
  -webkit-overflow-scrolling: touch; /* smooth on iOS */

      border-left : none ;
      border-right : none ;
       border-bottom : none ;
}

/* hide scrollbar (optional) */
.cards-strip::-webkit-scrollbar {
  display: none;
}
.cards-strip {
  scrollbar-width: auto; /* Firefox */
}

.cards-strip {
  overflow-x: auto;   /* Ensure horizontal scrolling */
  white-space: nowrap;
  
}

/* WebKit Browsers (Chrome, Edge, Safari) */

.trip-card__body p{
        margin-bottom: 0rem;
}
/* card (same as before, with fixed basis so they line up) */
.trip-card {
  flex: 0 0 290px;   /* width of each card; change as you like */
  border-radius: 12px;
  overflow: hidden;
  background: #111827;
  box-shadow: 0 6px 18px rgba(0,0,0,.15);
  color: #fff;
  scroll-snap-align: start; /* snap each card to start */
  
}

.trip-card__img {
  width: 100%;
  height: 140px;
  object-fit: cover;
  display: block;
}

.trip-card__body {
  background: #070a12;
  padding: 12px 14px;
}

.trip-card__title {
     font-size: 14px;
    margin-bottom: 4px;
}
.trip-card__sub
 {
     color: #b6bcd0;
    font-size: 13.33px;
}


.trip-card__desc {
    font-weight: 500;
     color: #b6bcd0;
    font-size: 14px;
}


.trip-card__price {
  margin-top: 10px;
  font-size: 1rem;
  font-weight: 700;
}


.tour-section {
 
  padding: 20px;
  text-align: center;
  
    border-bottom: 1px #b6bcd0 dashed;
}

.tour-section h2 {
  color: #c0c0c0; /* light grey text */
  font-weight: 600;
  display: inline-block;
  position: relative;
}

.divheader{

  font-weight: 500;
  color: #b6bcd0;
    font-size: 20px;
    margin: 0 auto;
    max-width: 900px;
    padding: 12px 12px 0;
    text-align: center;
    text-transform: capitalize;
font-weight: 600;
 color: #b6bcd0;
    text-decoration: none;
  

}


/*--------------Gallay Images start here--*/

    .thumb-strip img {
      height:90px; object-fit:cover; cursor:pointer;
      border-radius:.25rem; transition:transform .2s;
    }
    .thumb-strip img:hover { transform:scale(1.05); }

    /* Modal background with blur */
    .modal-backdrop.show {
      background: rgba(0,0,0,0.7);
      backdrop-filter: blur(5px);
    }
    
    /* Vertically center the carousel image */
    .modal-dialog {
      display: flex;
      align-items: center;
      min-height: 100%;
    }
    .modal-content {
      background: transparent;
      border: none;
      box-shadow: none;
    }
    .carousel-item img {
      max-height: 80vh; /* vertical center effect */
      object-fit: contain;
      margin: 0 auto;
      display: block;
    }

    /* Small modern close button */
    .custom-close-btn {
      position: absolute;
      top: 15px;
      right: 15px;
      background: rgba(0,0,0,0.6);
      color: white;
      border: none;
      border-radius: 50%;
      width: 35px;
      height: 35px;
      font-size: 1.4rem;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      z-index: 10;
      transition: background 0.2s;
    }
    .custom-close-btn:hover {
      background: rgba(255,255,255,0.2);
    }
  /* pop up css*/
 
    .thumb-strip img {
      height:140px; 
      object-fit:cover; cursor:pointer;
      border-radius:.25rem; transition:transform .2s;
    }
    .thumb-strip img:hover { transform:scale(1.05); }

    /* Modal background with blur */
    .modal-backdrop.show {
      background: rgba(0,0,0,0.7);
      backdrop-filter: blur(5px);
    }

    .modal-dialog {
      margin-top: 10px; /* push the image down from top */
    }

    /* Small modern close button */
    .custom-close-btn {
      position: absolute;
      top: 10px;
      right: 10px;
      background: rgba(0,0,0,0.6);
      color: white;
      border: none;
      border-radius: 50%;
      width: 32px;
      height: 32px;
      font-size: 1.2rem;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      z-index: 10;
      transition: background 0.2s;
    }
    .custom-close-btn:hover {
      background: rgba(255,255,255,0.2);
    }



    
.thumb-strip {
  overflow-x: auto;   /* Ensure horizontal scrolling */
  white-space: nowrap;
  
}

/* WebKit Browsers (Chrome, Edge, Safari) */
.thumb-strip::-webkit-scrollbar {
  height: 8px; /* Scrollbar height for horizontal scroll */
}

.thumb-strip::-webkit-scrollbar-track {
  background: #ddd; /* Track background */
}

.thumb-strip::-webkit-scrollbar-thumb {
  background-color: #6082f1; /* Scroll handle color */
  border-radius: 4px;
}

.thumb-strip::-webkit-scrollbar-thumb:hover {
  background-color: #e65c00; /* Handle color on hover */
}

.statboxpadding
  {  padding-left: 190px;
    padding-right: 190px;
}

.navlabel{font-size: 14px;}
.navlabel img{padding: 3px;
padding-top: 0px;}
.navpadding{margin-left: 1000px;}



body {
    background-color: #070a12;
    color: white;
  
    margin: 0;
    padding: 0 50px;
  }
  
  
  .thumb-strip img{
      height: 90px;
      object-fit: cover;
      cursor: pointer;
      border-radius: .25rem;
    }
 
    
    .obj-cover { object-fit: cover; }
    .stats-box {
      background-color: #111827;
      border-radius: 12px;
      color: white;
      padding: 20px;
      display: flex;
      justify-content: space-around;
      align-items: center;
    }
    .stat-item { text-align: center; }
    .stat-item i {
      font-size: 28px;
      display: block;
      margin-bottom: 8px;
    }
    .bg-card {
      height: 250px;
      background-size: cover;
      background-position: center;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 1.2rem;
      font-weight: 600;
      text-align: center;
      padding: 10px;
      transition: transform 0.3s ease;
    }
    .bg-card:hover { transform: scale(1.03); }
  /* Sections */
  section {
    padding: 20px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
  /* Navigation bar */
  .navbar-custom {
        background-color: #070a12a2;
    transition: background-color .5s ease;
  
  }
  .logoimg{
    border-radius: 150px;
    
    width: 80px;}
  .profile-img {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    object-fit: cover;
  }
  /* Banner Section */
  /* Banner */
.banner{
         position: relative;
        background: url(img/horifoodjp.jpg) no-repeat center / cover;
        height: 362px;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        overflow: hidden;
        display: grid;
        place-items: center;
        text-align: center;
}

.banner::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(rgba(7,10,18,0), #070a12);
  z-index:1;
}

/* Content that must stay above the overlay */
.banner-inner{
  position: relative;
  z-index: 2;
}

.logoimg{
  border-radius:150px;
  width:150px;
}

.banner-text{
  font-size:35px;
  
  color:#fff;
  margin-top:10px;
}

/* Bottom text */
.bottom-text{
  position:absolute;
  bottom:10px;
  left:50%;
  transform: translateX(-50%);
  color:#fff;
  font-size:20px;
  font-weight:bold;
  text-align:center;
  z-index:5;
  width:100%;
}

.bottom-text span{
  position:relative;
  display:inline-block;
  padding:0 15px;
}

.bottom-text span::before,
.bottom-text span::after{
  content:"";
  position:absolute;
  top:50%;
  width:9999px;
  height:4px;
  background:#fff;
}

.bottom-text span::before{
  right:100%;
  margin-right:15px;
}

.bottom-text span::after{
  left:100%;
  margin-left:15px;
}

  /* Your CSS for large desktops */
}

/* Extra-extra large (4K or ultra-wide monitors) */
@media (min-width: 1400px) {

/*view*/

.eventdate{width:100%;}

footer {
  background-color: #070a12;
  color: #fff;
  padding: 20px 0;
}
footer a {
    color: #b6bcd0;
    text-decoration: none;
    font-size: 16px;
}
footer a:hover {
  text-decoration: underline;
}

.textsection
{    background: #111827;
    border-radius: 10px;
    margin-top: 15px;}

.section-text
{
      margin-top: 35px;
    color: #b6bcd0;
    font-size: 14px;
    padding: 12px;
    text-align: center;
}

.img-fluid{
        border-radius: 4px;
    display: block;
    height: 125px;
    margin: 4px;
    min-width: 200px;
   }

    @font-face {
  font-family: 'MyCustomFont';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('css/Brand.woff2') format('woff2');
    }

body {
 font-family: 'MyCustomFont', sans-serif;
}

  .centrea{    text-align: center;
    text-decoration: none; margin-right: 40px;}

/* make sure page edges have no gaps if you want flush edges */

/* horizontal scroll container */
.cards-strip {
  margin-top: 40px;
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  gap: 12px;                         /* space between cards */
  padding: 10px 12px 12px;              /* optional inner padding */
  scroll-snap-type: x mandatory;     /* nice snapping */
  -webkit-overflow-scrolling: touch; /* smooth on iOS */

      border-left : none ;
      border-right : none ;
       border-bottom : none ;
}

/* hide scrollbar (optional) */
.cards-strip::-webkit-scrollbar {
  display: none;
}
.cards-strip {
  scrollbar-width: auto; /* Firefox */
}

.cards-strip {
  overflow-x: auto;   /* Ensure horizontal scrolling */
  white-space: nowrap;
  
}

/* WebKit Browsers (Chrome, Edge, Safari) */

.trip-card__body p{
        margin-bottom: 0rem;
}
/* card (same as before, with fixed basis so they line up) */
.trip-card {
  flex: 0 0 290px;   /* width of each card; change as you like */
  border-radius: 12px;
  overflow: hidden;
  background: #111827;
  box-shadow: 0 6px 18px rgba(0,0,0,.15);
  color: #fff;
  scroll-snap-align: start; /* snap each card to start */
  
}

.trip-card__img {
  width: 100%;
  height: 140px;
  object-fit: cover;
  display: block;
}

.trip-card__body {
  background: #070a12;
  padding: 12px 14px;
}

.trip-card__title {
     font-size: 14px;
    margin-bottom: 4px;
}
.trip-card__sub
 {
     color: #b6bcd0;
    font-size: 13.33px;
}


.trip-card__desc {
    font-weight: 500;
     color: #b6bcd0;
    font-size: 14px;
}


.trip-card__price {
  margin-top: 10px;
  font-size: 1rem;
  font-weight: 700;
}


.tour-section {
 
  padding: 20px;
  text-align: center;
  
    border-bottom: 1px #b6bcd0 dashed;
}

.tour-section h2 {
  color: #c0c0c0; /* light grey text */
  font-weight: 600;
  display: inline-block;
  position: relative;
}

.divheader{

  font-weight: 500;
  color: #b6bcd0;
    font-size: 20px;
    margin: 0 auto;
    max-width: 900px;
    padding: 12px 12px 0;
    text-align: center;
    text-transform: capitalize;
font-weight: 600;
 color: #b6bcd0;
    text-decoration: none;
  

}


/*--------------Gallay Images start here--*/

    .thumb-strip img {
      height:90px; object-fit:cover; cursor:pointer;
      border-radius:.25rem; transition:transform .2s;
    }
    .thumb-strip img:hover { transform:scale(1.05); }

    /* Modal background with blur */
    .modal-backdrop.show {
      background: rgba(0,0,0,0.7);
      backdrop-filter: blur(5px);
    }
    
    /* Vertically center the carousel image */
    .modal-dialog {
      display: flex;
      align-items: center;
      min-height: 100%;
    }
    .modal-content {
      background: transparent;
      border: none;
      box-shadow: none;
    }
    .carousel-item img {
      max-height: 80vh; /* vertical center effect */
      object-fit: contain;
      margin: 0 auto;
      display: block;
    }

    /* Small modern close button */
    .custom-close-btn {
      position: absolute;
      top: 15px;
      right: 15px;
      background: rgba(0,0,0,0.6);
      color: white;
      border: none;
      border-radius: 50%;
      width: 35px;
      height: 35px;
      font-size: 1.4rem;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      z-index: 10;
      transition: background 0.2s;
    }
    .custom-close-btn:hover {
      background: rgba(255,255,255,0.2);
    }
  /* pop up css*/
 
    .thumb-strip img {
      height:140px; 
      object-fit:cover; cursor:pointer;
      border-radius:.25rem; transition:transform .2s;
    }
    .thumb-strip img:hover { transform:scale(1.05); }

    /* Modal background with blur */
    .modal-backdrop.show {
      background: rgba(0,0,0,0.7);
      backdrop-filter: blur(5px);
    }

    .modal-dialog {
      margin-top: 100px; /* push the image down from top */
    }

    /* Small modern close button */
    .custom-close-btn {
      position: absolute;
      top: 10px;
      right: 10px;
      background: rgba(0,0,0,0.6);
      color: white;
      border: none;
      border-radius: 50%;
      width: 32px;
      height: 32px;
      font-size: 1.2rem;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      z-index: 10;
      transition: background 0.2s;
    }
    .custom-close-btn:hover {
      background: rgba(255,255,255,0.2);
    }



    
.thumb-strip {
  overflow-x: auto;   /* Ensure horizontal scrolling */
  white-space: nowrap;
  
}

/* WebKit Browsers (Chrome, Edge, Safari) */
.thumb-strip::-webkit-scrollbar {
  height: 8px; /* Scrollbar height for horizontal scroll */
}

.thumb-strip::-webkit-scrollbar-track {
  background: #ddd; /* Track background */
}

.thumb-strip::-webkit-scrollbar-thumb {
  background-color: #6082f1; /* Scroll handle color */
  border-radius: 4px;
}

.thumb-strip::-webkit-scrollbar-thumb:hover {
  background-color: #e65c00; /* Handle color on hover */
}

.statboxpadding
  {  padding-left: 190px;
    padding-right: 190px;
}

.navlabel{font-size: 14px;}
.navlabel img{padding: 3px;
padding-top: 0px;}
.navpadding{margin-left: 50px;}



body {
    background-color: #070a12;
    color: white;
   
    margin: 0;
    padding: 0;
  }
  
  .thumb-strip img{
      height: 90px;
      object-fit: cover;
      cursor: pointer;
      border-radius: .25rem;
    }
 
    
    .obj-cover { object-fit: cover; }
    .stats-box {
      background-color: #111827;
      border-radius: 12px;
      color: white;
      padding: 20px;
      display: flex;
      justify-content: space-around;
      align-items: center;
    }
    .stat-item { text-align: center; }
    .stat-item i {
      font-size: 28px;
      display: block;
      margin-bottom: 8px;
    }
    .bg-card {
      height: 250px;
      background-size: cover;
      background-position: center;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 1.2rem;
      font-weight: 600;
      text-align: center;
      padding: 10px;
      transition: transform 0.3s ease;
    }
    .bg-card:hover { transform: scale(1.03); }
  /* Sections */
  section {
    padding: 20px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
  /* Navigation bar */
  .navbar-custom {
        background-color: #070a12a2;
    transition: background-color .5s ease;
  
  }
  .logoimg{
    border-radius: 150px;
    
    width: 80px;}
  .profile-img {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    object-fit: cover;
  }
  /* Banner Section */
  /* Banner */
.banner{
  position: relative;
  background: url('img/foodjp.jpg') no-repeat center/cover;
  height: 365px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  overflow: hidden;

  /* <-- this centers the inner block */
  display: grid;
  place-items: center;
  text-align: center;
}

.banner::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(rgba(7,10,18,0), #070a12);
  z-index:1;
}

/* Content that must stay above the overlay */
.banner-inner{
  position: relative;
  z-index: 2;
}

.logoimg{
  border-radius:150px;
  width:80px;
}

.banner-text{
  font-size:35px;
  
  color:#fff;
  margin-top:10px;
}

/* Bottom text */
.bottom-text{
  position:absolute;
  bottom:36px;
  left:50%;
  transform: translateX(-50%);
  color:#fff;
  font-size:20px;
  font-weight:bold;
  text-align:center;
  z-index:5;
  width:100%;
}

.bottom-text span{
  position:relative;
  display:inline-block;
  padding:0 15px;
}

.bottom-text span::before,
.bottom-text span::after{
  content:"";
  position:absolute;
  top:50%;
  width:9999px;
  height:4px;
  background:#fff;
}

.bottom-text span::before{
  right:100%;
  margin-right:15px;
}

.bottom-text span::after{
  left:100%;
  margin-left:15px;
}

  /* Your CSS for ultra-wide screens */
}