API tools faq
paste
humanware

css/style.css

humanware
Feb 27th, 2026
12
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 92.72 KB | None | 0 0
raw download clone embed print report
  1. @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700&family=Lato:wght@300;400;500&display=swap');
  2.  
  3. /* Body Text */
  4. body {
  5. font-family: 'Lato', sans-serif !important;
  6. font-weight: 400;
  7. font-size: 16px;
  8. line-height: 1.8;
  9. }
  10.  
  11. /* Headings */
  12. h1, h2, h3, h4, h5, h6 {
  13. font-family: 'Montserrat', sans-serif !important;
  14. font-weight: 700;
  15. letter-spacing: 0.5px;
  16. }
  17.  
  18. /* Force Global Override */
  19. * {
  20. font-family: 'Lato', 'Montserrat', sans-serif !important;
  21. }
  22.  
  23. /* Blog Title */
  24. .entry-title,
  25. .post-title {
  26. font-size: 42px;
  27. font-weight: 700;
  28. }
  29.  
  30. /* Paragraph spacing */
  31. p {
  32. margin-bottom: 1.2rem;
  33. }
  34.  
  35. .nht-page-banner {
  36. position: relative;
  37. min-height: 240px;
  38. background-size: cover;
  39. background-position: center;
  40. }
  41.  
  42. .nht-page-banner__overlay {
  43. position: absolute;
  44. inset: 0;
  45. background: linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.65));
  46. }
  47.  
  48. .nht-page-banner__inner {
  49. position: relative;
  50. padding-top: 90px; /* adjust to header height */
  51. padding-bottom: 30px;
  52. }
  53.  
  54. .nht-page-banner__title {
  55. color: #fff;
  56. margin: 0;
  57. font-size: clamp(28px, 3vw, 44px);
  58. font-weight: 700;
  59. }
  60.  
  61. /* Breadcrumb inside banner (override Bootstrap breadcrumb) */
  62. .nht-page-banner .nht-breadcrumb,
  63. .nht-page-banner .nht-breadcrumb .breadcrumb {
  64. margin: 0 0 10px 0;
  65. }
  66.  
  67. .nht-page-banner .nht-breadcrumb .breadcrumb-item,
  68. .nht-page-banner .nht-breadcrumb .breadcrumb-item a {
  69. color: rgba(255,255,255,.92) !important;
  70. text-decoration: none;
  71. font-size: 14px;
  72. }
  73.  
  74. .nht-page-banner .nht-breadcrumb .breadcrumb-item a:hover {
  75. text-decoration: underline;
  76. }
  77.  
  78. /* Separator */
  79. .nht-page-banner .nht-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  80. color: rgba(255,255,255,.70) !important;
  81. opacity: 1;
  82. }
  83.  
  84. /* Active item */
  85. .nht-page-banner .nht-breadcrumb .breadcrumb-item.active {
  86. color: rgba(255,255,255,.95) !important;
  87. }
  88. .nht-page-banner .breadcrumb {
  89. --bs-breadcrumb-divider: "›";
  90. }
  91.  
  92. /*===============================================================
  93. SCROLL ANIMATION BASE
  94. ================================================================= */
  95. .animate-on-scroll {
  96. opacity: 0;
  97. transition: opacity 1.2s ease, transform 1.2s ease;
  98. will-change: opacity, transform;
  99. }
  100.  
  101. .animate-on-scroll.in-view {
  102. opacity: 1;
  103. transform: translateY(0);
  104. }
  105.  
  106. .slide-left {
  107. transform: translateX(-50px);
  108. }
  109. .slide-left.in-view {
  110. opacity: 1;
  111. transform: translateX(0);
  112. }
  113.  
  114. .slide-right {
  115. transform: translateX(50px);
  116. }
  117. .slide-right.in-view {
  118. opacity: 1;
  119. transform: translateX(0);
  120. }
  121.  
  122. .fade-in {
  123. transform: translateY(20px);
  124. }
  125. .fade-in.in-view {
  126. opacity: 1;
  127. transform: translateY(0);
  128. }
  129.  
  130. .zoom-on-scroll {
  131. opacity: 0;
  132. transform: scale(0.8);
  133. transition: opacity 1.2s ease, transform 1.2s ease;
  134. will-change: opacity, transform;
  135. }
  136.  
  137. .zoom-on-scroll.in-view {
  138. opacity: 1;
  139. transform: scale(1);
  140. }
  141.  
  142. /*======================= Navbar ====================== */
  143. /* Base navbar (works everywhere) */
  144. #main-navbar,
  145. #masthead .navbar-scroll {
  146. position: fixed;
  147. top: 0;
  148. left: 0;
  149. width: 100%;
  150. z-index: 1030;
  151. }
  152.  
  153. /* Default state (non-home pages): solid background */
  154. #main-navbar.navbar-scroll,
  155. #masthead .navbar-scroll {
  156. background-color: var(--primary-color);
  157. transition: background-color 0.25s ease, box-shadow 0.25s ease, padding 0.25s ease;
  158. padding: 16px 0;
  159. }
  160.  
  161. /* When navbar is on top of the homepage carousel, make it transparent initially */
  162. #mainCarousel #main-navbar.navbar-scroll {
  163. background-color: transparent;
  164. box-shadow: none;
  165. }
  166.  
  167. /* After scroll (all pages) */
  168. #main-navbar.navbar-scroll.scrolled,
  169. #masthead .navbar-scroll.scrolled {
  170. background-color: var(--primary-color) !important;
  171. box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  172. padding: 10px 0;
  173. }
  174.  
  175. /* Brand/logo */
  176. #main-navbar .navbar-brand img,
  177. #masthead .navbar-scroll .navbar-brand img,
  178. #main-navbar .custom-logo {
  179. height: 50px;
  180. width: auto;
  181. }
  182.  
  183. /* Nav links */
  184. #main-navbar .nav-link,
  185. #masthead .navbar-scroll .nav-link {
  186. font-family: var(--bs-body-font-family);
  187. font-weight: 400;
  188. color: var(--secondary-color) !important;
  189. opacity: 0.95;
  190. transition: opacity 0.2s ease;
  191. line-height: 1;
  192. }
  193.  
  194. #main-navbar .nav-link:hover,
  195. #main-navbar .nav-link:focus,
  196. #masthead .navbar-scroll .nav-link:hover,
  197. #masthead .navbar-scroll .nav-link:focus {
  198. opacity: 1;
  199. color: #ffffff !important;
  200. }
  201.  
  202. /* Contact button (default) */
  203. #main-navbar .btn,
  204. #masthead .navbar-scroll .btn {
  205. font-weight: 400;
  206. transition: all 0.25s ease;
  207. }
  208.  
  209. /* If you are using btn-primary for Contact Us */
  210. #main-navbar .btn.btn-primary,
  211. #masthead .navbar-scroll .btn.btn-primary {
  212. background-color: #0077CC;
  213. border-color: #0077CC;
  214. color: #fff;
  215. }
  216.  
  217. /* On scrolled state, flip button style (optional – matches your original behavior) */
  218. #main-navbar.navbar-scroll.scrolled .btn.btn-primary,
  219. #masthead .navbar-scroll.scrolled .btn.btn-primary {
  220. background-color: #fff;
  221. border-color: #fff;
  222. color: #0d6efd;
  223. }
  224. #main-navbar {
  225. transition:
  226. transform 0.35s ease,
  227. background-color 0.25s ease,
  228. box-shadow 0.25s ease,
  229. padding 0.25s ease;
  230. will-change: transform;
  231. }
  232.  
  233. /* Hide navbar when scrolling down */
  234. #main-navbar.nav-hidden {
  235. transform: translateY(-100%);
  236. }
  237.  
  238. /* Ensure visible state */
  239. #main-navbar.nav-visible {
  240. transform: translateY(0);
  241. }
  242.  
  243. #main-navbar.scrolled {
  244. backdrop-filter: blur(8px);
  245. background-color: rgba(0, 119, 204, 0.95);
  246. }
  247. /* Navbar hide/reveal animation */
  248. #main-navbar {
  249. will-change: transform;
  250. transition: transform 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease, padding 0.25s ease;
  251. }
  252.  
  253. /* Hidden state */
  254. #main-navbar.nav-hidden {
  255. transform: translateY(-110%);
  256. }
  257.  
  258. /* Optional: when user is at very top, keep it visible */
  259. #main-navbar.at-top {
  260. transform: translateY(0);
  261. }
  262.  
  263. /* If mobile menu is open, never hide */
  264. #main-navbar.menu-open {
  265. transform: translateY(0) !important;
  266. }
  267.  
  268. /* Carousel indicators hide (keep your behavior) */
  269. #mainCarousel .carousel-indicators {
  270. transition: opacity 0.3s ease;
  271. }
  272. #mainCarousel .carousel-indicators.hidden {
  273. opacity: 0;
  274. pointer-events: none;
  275. }
  276.  
  277. /* Mobile dropdown overlay on top of carousel (important for “inside carousel” issue) */
  278. @media (max-width: 991.98px) {
  279. #main-navbar .navbar-collapse {
  280. background: rgba(0,0,0,0.92);
  281. padding: 12px 16px;
  282. border-radius: 12px;
  283. margin-top: 10px;
  284. }
  285. }
  286.  
  287. /* Ensure carousel content sits behind fixed navbar cleanly */
  288. #mainCarousel {
  289. position: relative;
  290. z-index: 1;
  291. }
  292. #main-navbar {
  293. z-index: 1030;
  294. }
  295.  
  296. .navbar .dropdown-menu .dropdown-menu {
  297. top: 0;
  298. left: 100%;
  299. margin-left: .15rem;
  300. }
  301.  
  302. .navbar .dropdown-menu > li {
  303. position: relative;
  304. }
  305.  
  306. .navbar .dropdown-submenu > a.dropdown-toggle::after{
  307. content: "›";
  308. border: 0 !important;
  309. margin-left: .5rem;
  310. opacity: .7;
  311. float: right;
  312. transform: none !important;
  313. }
  314.  
  315. .nht-submenu-toggle {
  316. display: none;
  317. }
  318.  
  319. @media (min-width: 992px){
  320. .navbar .dropdown-menu{
  321. display:block;
  322. opacity:0;
  323. visibility:hidden;
  324. transform: translateY(10px);
  325. pointer-events:none;
  326. transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
  327. margin-top: 0;
  328. }
  329.  
  330. .navbar .dropdown-menu.show{
  331. opacity:1;
  332. visibility:visible;
  333. transform: translateY(0);
  334. pointer-events:auto;
  335. }
  336. }
  337. @media (min-width: 992px){
  338. .navbar .nht-has-mega > .dropdown-menu.nht-mega{
  339. width: min(1100px, 92vw);
  340. left: 50%;
  341. transform: translateX(-50%);
  342. }
  343. }
  344.  
  345. /* =========================
  346. NHT Mega Menu (Trekking)
  347. ========================= */
  348. .nht-mega{
  349. border-radius: 12px;
  350. overflow: hidden;
  351. }
  352.  
  353. .nht-mega__inner{
  354. display: grid;
  355. grid-template-columns: 260px 1fr;
  356. min-height: 320px;
  357. background: #fff;
  358. }
  359.  
  360. /* Left tabs column */
  361. .nht-mega__tabs{
  362. border-right: 1px solid rgba(0,0,0,.08);
  363. padding: 14px 12px;
  364. background: #fff;
  365. }
  366.  
  367. .nht-mega__tab{
  368. width: 100%;
  369. text-align: left;
  370. border: 0;
  371. background: transparent;
  372. padding: 10px 12px;
  373. border-radius: 10px;
  374. font-weight: 600;
  375. font-size: 14px;
  376. color: #0b2b3a;
  377. cursor: pointer;
  378. transition: background .15s ease, color .15s ease;
  379. }
  380.  
  381. .nht-mega__tab:hover{
  382. background: rgba(13,110,253,.08);
  383. }
  384.  
  385. .nht-mega__tab.is-active{
  386. background: rgba(13,110,253,.12);
  387. color: #0d6efd;
  388. }
  389.  
  390. /* Right content */
  391. .nht-mega__content{
  392. padding: 16px 18px;
  393. }
  394.  
  395. .nht-mega__panel{
  396. display: none;
  397. }
  398.  
  399. .nht-mega__panel.is-active{
  400. display: block;
  401. }
  402.  
  403. .nht-mega__cols{
  404. display: grid;
  405. grid-template-columns: 1fr 1fr;
  406. gap: 22px;
  407. }
  408.  
  409. .nht-mega__list{
  410. list-style: none;
  411. margin: 0;
  412. padding: 0;
  413. }
  414.  
  415. .nht-mega__list li{
  416. margin: 0;
  417. padding: 6px 0;
  418. }
  419.  
  420. .nht-mega__list a{
  421. text-decoration: none;
  422. color: #1b1d21;
  423. font-weight: 500;
  424. font-size: 14px;
  425. display: inline-block;
  426. line-height: 1.3;
  427. }
  428.  
  429. .nht-mega__list a:hover{
  430. color: #0d6efd;
  431. text-decoration: underline;
  432. }
  433.  
  434. .nht-mega__footer{
  435. margin-top: 14px;
  436. }
  437.  
  438. /* Responsive (tablet/mobile): stack mega into a normal list style */
  439. @media (max-width: 991.98px){
  440. .nht-mega__inner{
  441. grid-template-columns: 1fr;
  442. min-height: unset;
  443. }
  444. .nht-mega__tabs{
  445. border-right: 0;
  446. border-bottom: 1px solid rgba(0,0,0,.08);
  447. display: flex;
  448. gap: 8px;
  449. overflow-x: auto;
  450. padding: 10px;
  451. }
  452. .nht-mega__tab{
  453. white-space: nowrap;
  454. width: auto;
  455. }
  456. .nht-mega__cols{
  457. grid-template-columns: 1fr;
  458. }
  459. }
  460.  
  461.  
  462. /*===================== Main carousel section ======================= */
  463.  
  464. .carousel-inner img {
  465. height: 841px;
  466. object-fit: cover;
  467. }
  468. .carousel-dark .carousel-indicators [data-bs-target]{
  469. background-color: white;
  470. }
  471. .carousel-item::before {
  472. content: "";
  473. position: absolute;
  474. top: 0;
  475. left: 0;
  476. width: 100%;
  477. height: 100%;
  478. background: rgba(0,0,0,0.4);
  479. z-index: 1;
  480. }
  481. .carousel-caption {
  482. z-index: 2;
  483. }
  484. .carousel-caption h1 {
  485. font-weight: 700;
  486. }
  487. .carousel-caption p{
  488. font-weight: 500;
  489. }
  490. .contact-btn {
  491. margin-left: 20px;
  492. }
  493. .search-form {
  494. background: rgba(255, 255, 255, 0.7);
  495. backdrop-filter: blur(8px);
  496. border-radius: 8px;
  497. padding: 10px 20px;
  498. gap: 15px;
  499. }
  500. .form-item {
  501. padding: 5px 10px;
  502. font-size: 15px;
  503. color: #000;
  504. flex: 1;
  505. }
  506. .form-input {
  507. border: none;
  508. outline: none;
  509. background: transparent;
  510. font-weight: 500;
  511. font-size: 15px;
  512. color: #000;
  513. }
  514. .form-divider {
  515. width: 1px;
  516. height: 30px;
  517. background: rgba(0,0,0,0.2);
  518. }
  519. .search-form .btn-primary {
  520. font-weight: 400;
  521. border-radius: 6px;
  522. padding: 6px 39px;
  523. }
  524.  
  525. /*=======================================================
  526. Gallery-section
  527. ======================================================= */
  528. /* =========================================================
  529. NHT Destination Showcase (Grid + Reveal + Responsive)
  530. Supports either markup:
  531. - .nht-gallery-wrapper > a.nht-img > img + .nht-img-text
  532. - .nht-gallery-wrapper > div.img-wrapper > img + .img-text
  533. ========================================================= */
  534.  
  535. /* ----- Wrapper ----- */
  536. .nht-gallery-wrapper{
  537. max-width: 1140px;
  538. margin: 0 auto;
  539. padding: 10px;
  540. display: grid;
  541. gap: 18px;
  542.  
  543. /* Desktop = 12-column mosaic */
  544. grid-template-columns: repeat(12, 1fr);
  545.  
  546. /* Row height (mosaic scale) */
  547. grid-auto-rows: 170px;
  548.  
  549. position: relative;
  550. }
  551.  
  552. /* ----- Card (supports both classes) ----- */
  553. .nht-gallery-wrapper .nht-img,
  554. .nht-gallery-wrapper .img-wrapper{
  555. position: relative;
  556. overflow: hidden;
  557. border-radius: 16px;
  558. box-shadow: 0 16px 38px rgba(0,0,0,.14);
  559. color: #fff;
  560.  
  561. /* Reveal initial */
  562. opacity: 0;
  563. transform: translateY(18px);
  564.  
  565. transition:
  566. opacity .7s ease,
  567. transform .7s ease,
  568. box-shadow .25s ease;
  569. will-change: transform, opacity;
  570.  
  571. /* If card is <a> */
  572. text-decoration: none;
  573. display: block;
  574. }
  575.  
  576. /* Ensure images fill tile */
  577. .nht-gallery-wrapper .nht-img img,
  578. .nht-gallery-wrapper .img-wrapper img{
  579. width: 100%;
  580. height: 100%;
  581. display: block;
  582. object-fit: cover;
  583. transform: scale(1);
  584. transition: transform .6s ease;
  585. }
  586.  
  587. /* Gradient overlay */
  588. .nht-gallery-wrapper .nht-img::before,
  589. .nht-gallery-wrapper .img-wrapper::before{
  590. content:"";
  591. position:absolute;
  592. inset:0;
  593. background: linear-gradient(to top, rgba(0,0,0,.78), rgba(0,0,0,.08));
  594. opacity: .95;
  595. transition: opacity .25s ease;
  596. z-index: 1;
  597. }
  598.  
  599. /* Text overlay (supports both classes) */
  600. .nht-gallery-wrapper .nht-img-text,
  601. .nht-gallery-wrapper .img-text{
  602. position:absolute;
  603. left: 0;
  604. right: 0;
  605. bottom: 0;
  606. padding: 18px 18px 16px;
  607. z-index: 2;
  608. }
  609.  
  610. .nht-gallery-wrapper .nht-img-text h5,
  611. .nht-gallery-wrapper .img-text h5{
  612. margin: 0 0 4px;
  613. font-size: 18px;
  614. font-weight: 700;
  615. letter-spacing: .2px;
  616. }
  617.  
  618. .nht-gallery-wrapper .nht-img-text p,
  619. .nht-gallery-wrapper .img-text p{
  620. margin: 0;
  621. font-size: 14px;
  622. opacity: .92;
  623. }
  624.  
  625. /* Hover */
  626. .nht-gallery-wrapper .nht-img:hover,
  627. .nht-gallery-wrapper .img-wrapper:hover{
  628. box-shadow: 0 24px 55px rgba(0,0,0,.22);
  629. }
  630. .nht-gallery-wrapper .nht-img:hover img,
  631. .nht-gallery-wrapper .img-wrapper:hover img{
  632. transform: scale(1.08);
  633. }
  634. .nht-gallery-wrapper .nht-img:hover::before,
  635. .nht-gallery-wrapper .img-wrapper:hover::before{
  636. opacity: 1;
  637. }
  638.  
  639. /* ----- Reveal behavior ----- */
  640. /* JS should add .is-revealed to wrapper. But also: fallback after load */
  641. .nht-gallery-wrapper.is-revealed .nht-img,
  642. .nht-gallery-wrapper.is-revealed .img-wrapper{
  643. opacity: 1;
  644. transform: translateY(0);
  645. }
  646.  
  647. /* Stagger (works with either class) */
  648. .nht-gallery-wrapper .nht-img:nth-child(1),
  649. .nht-gallery-wrapper .img-wrapper:nth-child(1){ transition-delay: 0.00s; }
  650. .nht-gallery-wrapper .nht-img:nth-child(2),
  651. .nht-gallery-wrapper .img-wrapper:nth-child(2){ transition-delay: 0.06s; }
  652. .nht-gallery-wrapper .nht-img:nth-child(3),
  653. .nht-gallery-wrapper .img-wrapper:nth-child(3){ transition-delay: 0.12s; }
  654. .nht-gallery-wrapper .nht-img:nth-child(4),
  655. .nht-gallery-wrapper .img-wrapper:nth-child(4){ transition-delay: 0.18s; }
  656. .nht-gallery-wrapper .nht-img:nth-child(5),
  657. .nht-gallery-wrapper .img-wrapper:nth-child(5){ transition-delay: 0.24s; }
  658.  
  659. /* Fallback: if JS never runs, show tiles anyway (prevents white screen) */
  660. @supports (animation-timeline: view()){
  661. /* do nothing – optional future enhancement */
  662. }
  663. @media (prefers-reduced-motion: reduce){
  664. .nht-gallery-wrapper .nht-img,
  665. .nht-gallery-wrapper .img-wrapper{
  666. opacity: 1;
  667. transform: none;
  668. transition: none;
  669. }
  670. }
  671. /* Hard fallback after a short delay using CSS animation:
  672. - Tiles become visible even without JS */
  673. .nht-gallery-wrapper .nht-img,
  674. .nht-gallery-wrapper .img-wrapper{
  675. animation: nhtGalleryFallback 0s linear 0.35s forwards;
  676. }
  677. @keyframes nhtGalleryFallback{
  678. to { opacity: 1; transform: translateY(0); }
  679. }
  680.  
  681. /* ----- Mosaic Layout (5 items) ----- */
  682. .nht-gallery-wrapper > :nth-child(1){
  683. grid-column: 1 / span 4;
  684. grid-row: 1 / span 2;
  685. }
  686. .nht-gallery-wrapper > :nth-child(2){
  687. grid-column: 9 / span 4;
  688. grid-row: 1 / span 2;
  689. }
  690. .nht-gallery-wrapper > :nth-child(3){
  691. grid-column: 5 / span 4;
  692. grid-row: 1 / span 3;
  693. z-index: 2;
  694. border-radius: 18px;
  695. }
  696. .nht-gallery-wrapper > :nth-child(4){
  697. grid-column: 1 / span 4;
  698. grid-row: 3 / span 2;
  699. }
  700. .nht-gallery-wrapper > :nth-child(5){
  701. grid-column: 9 / span 4;
  702. grid-row: 3 / span 2;
  703. }
  704.  
  705. /* ----- Auto-balance for fewer than 5 ----- */
  706.  
  707. /* 1 item */
  708. .nht-gallery-wrapper > :nth-child(1):nth-last-child(1){
  709. grid-column: 1 / -1;
  710. grid-row: 1 / span 3;
  711. }
  712.  
  713. /* 2 items */
  714. .nht-gallery-wrapper > :nth-child(1):nth-last-child(2){
  715. grid-column: 1 / span 6;
  716. grid-row: 1 / span 3;
  717. }
  718. .nht-gallery-wrapper > :nth-child(2):nth-last-child(1){
  719. grid-column: 7 / span 6;
  720. grid-row: 1 / span 3;
  721. }
  722.  
  723. /* 3 items */
  724. .nht-gallery-wrapper > :nth-child(1):nth-last-child(3){
  725. grid-column: 1 / span 4;
  726. grid-row: 1 / span 3;
  727. }
  728. .nht-gallery-wrapper > :nth-child(2):nth-last-child(2){
  729. grid-column: 5 / span 4;
  730. grid-row: 1 / span 3;
  731. }
  732. .nht-gallery-wrapper > :nth-child(3):nth-last-child(1){
  733. grid-column: 9 / span 4;
  734. grid-row: 1 / span 3;
  735. }
  736.  
  737. /* 4 items */
  738. .nht-gallery-wrapper > :nth-child(1):nth-last-child(4){
  739. grid-column: 1 / span 6;
  740. grid-row: 1 / span 2;
  741. }
  742. .nht-gallery-wrapper > :nth-child(2):nth-last-child(3){
  743. grid-column: 7 / span 6;
  744. grid-row: 1 / span 2;
  745. }
  746. .nht-gallery-wrapper > :nth-child(3):nth-last-child(2){
  747. grid-column: 1 / span 6;
  748. grid-row: 3 / span 2;
  749. }
  750. .nht-gallery-wrapper > :nth-child(4):nth-last-child(1){
  751. grid-column: 7 / span 6;
  752. grid-row: 3 / span 2;
  753. }
  754.  
  755. .nht-img.nht-img-bl {
  756. grid-row: span 4 !important;
  757. }
  758.  
  759. /* ----- Button wrapper + button ----- */
  760. .nht-gallery-actions{
  761. text-align: center;
  762. margin-top: 26px;
  763. }
  764.  
  765. .nht-btn{
  766. display: inline-flex;
  767. align-items: center;
  768. justify-content: center;
  769. padding: 12px 26px;
  770. border-radius: 12px;
  771. font-weight: 700;
  772. text-decoration: none;
  773. cursor: pointer;
  774. transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
  775. }
  776.  
  777. .nht-btn-primary{
  778. background: #0d6efd;
  779. color: #fff;
  780. border: 1px solid #0d6efd;
  781. box-shadow: 0 12px 26px rgba(13,110,253,.22);
  782. }
  783.  
  784. .nht-btn-primary:hover{
  785. transform: translateY(-2px);
  786. background: #0b5ed7;
  787. border-color: #0b5ed7;
  788. box-shadow: 0 18px 36px rgba(13,110,253,.28);
  789. color: #fff;
  790. }
  791.  
  792. /* If you are still using .btn-custom from old HTML */
  793. .btn-custom{
  794. display: inline-flex;
  795. align-items: center;
  796. justify-content: center;
  797. padding: 12px 26px;
  798. border-radius: 12px;
  799. font-weight: 700;
  800. text-decoration: none;
  801. background: #0d6efd;
  802. color: #fff;
  803. border: 1px solid #0d6efd;
  804. box-shadow: 0 12px 26px rgba(13,110,253,.22);
  805. transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
  806. }
  807. .btn-custom:hover{
  808. transform: translateY(-2px);
  809. background: #0b5ed7;
  810. border-color: #0b5ed7;
  811. box-shadow: 0 18px 36px rgba(13,110,253,.28);
  812. color: #fff;
  813. }
  814.  
  815. /* ----- Responsive ----- */
  816.  
  817. /* Large tablets */
  818. @media (max-width: 1024px){
  819. .nht-gallery-wrapper{
  820. grid-template-columns: repeat(8, 1fr);
  821. grid-auto-rows: 150px;
  822. gap: 14px;
  823. }
  824.  
  825. .nht-gallery-wrapper > :nth-child(1){ grid-column: 1 / span 3; grid-row: 1 / span 2; }
  826. .nht-gallery-wrapper > :nth-child(2){ grid-column: 6 / span 3; grid-row: 1 / span 2; }
  827. .nht-gallery-wrapper > :nth-child(3){ grid-column: 4 / span 2; grid-row: 1 / span 3; }
  828. .nht-gallery-wrapper > :nth-child(4){ grid-column: 1 / span 3; grid-row: 3 / span 2; }
  829. .nht-gallery-wrapper > :nth-child(5){ grid-column: 6 / span 3; grid-row: 3 / span 2; }
  830. }
  831.  
  832. /* Mobile */
  833. @media (max-width: 767px){
  834. .nht-gallery-wrapper{
  835. grid-template-columns: 1fr;
  836. grid-auto-rows: 220px;
  837. gap: 14px;
  838. padding: 6px;
  839. }
  840.  
  841. .nht-gallery-wrapper > *{
  842. grid-column: 1 / -1 !important;
  843. grid-row: auto !important;
  844. }
  845.  
  846. .nht-gallery-wrapper .nht-img-text h5,
  847. .nht-gallery-wrapper .img-text h5{ font-size: 16px; }
  848.  
  849. .nht-gallery-wrapper .nht-img-text p,
  850. .nht-gallery-wrapper .img-text p{ font-size: 13px; }
  851. }
  852.  
  853. /* ===========================
  854. NHT Why Choose Us (Block)
  855. Wrapper: .nht-wcu-block
  856. =========================== */
  857.  
  858. .nht-wcu-block{
  859. --nht-wcu-h: 359px;
  860. --nht-wcu-ov: 0.5;
  861. }
  862.  
  863. .nht-wcu-card{
  864. position: relative;
  865. height: var(--nht-wcu-h);
  866. border-radius: 8px;
  867. background: #ffffff;
  868. border: 1px solid #dee2e6;
  869. overflow: hidden;
  870. transition: transform .25s ease, box-shadow .25s ease;
  871. background-size: cover;
  872. background-position: center;
  873. background-repeat: no-repeat;
  874. }
  875.  
  876. /* dark overlay (only visible on hover) */
  877. .nht-wcu-card::before{
  878. content:"";
  879. position:absolute;
  880. inset:0;
  881. background: rgba(0,0,0,0);
  882. transition: background .25s ease;
  883. z-index: 0;
  884. }
  885.  
  886. /* content layer */
  887. .nht-wcu-card__inner{
  888. position: relative;
  889. z-index: 1;
  890. height: 100%;
  891. padding: 45px 20px;
  892. text-align: center;
  893. display: flex;
  894. flex-direction: column;
  895. justify-content: flex-start;
  896. align-items: center;
  897. }
  898.  
  899. /* icon circle */
  900. .nht-wcu-icon{
  901. width: 97px;
  902. height: 97px;
  903. border-radius: 50%;
  904. display:flex;
  905. align-items:center;
  906. justify-content:center;
  907. margin: 0 auto 15px;
  908. background: #dbe9fb;
  909. color: #0d6efd;
  910. transition: background-color .25s ease, color .25s ease;
  911. }
  912.  
  913. .nht-wcu-icon i{
  914. font-size: 50px;
  915. line-height: 1;
  916. }
  917.  
  918. .nht-wcu-title{
  919. font-size: 20px;
  920. font-weight: 600;
  921. color: #1B1D21;
  922. margin: 0 0 15px 0;
  923. }
  924.  
  925. .nht-wcu-desc{
  926. font-size: 14px;
  927. font-weight: 400;
  928. color: #6B6B6B;
  929. line-height: 1.5;
  930. }
  931.  
  932. .nht-wcu-desc p{
  933. margin: 0;
  934. }
  935.  
  936. /* Hover: lift + shadow */
  937. .nht-wcu-card:hover{
  938. transform: translateY(-5px);
  939. box-shadow: 0 8px 20px rgba(0,0,0,0.2);
  940. }
  941.  
  942. /* Hover: apply background image from data attribute */
  943. .nht-wcu-card[data-hover-bg]:hover{
  944. background-image: url("");
  945. }
  946.  
  947. /* The above line is a placeholder for older parsers.
  948. We set the real background using attribute selector below. */
  949. .nht-wcu-card[data-hover-bg]:hover{
  950. background-image: var(--nht-wcu-bg);
  951. }
  952.  
  953. /* overlay + colors on hover */
  954. .nht-wcu-card:hover::before{
  955. background: rgba(0,0,0,var(--nht-wcu-ov));
  956. }
  957.  
  958. .nht-wcu-card:hover .nht-wcu-icon{
  959. background: #0d6efd;
  960. color: #ffffff;
  961. }
  962.  
  963. .nht-wcu-card:hover .nht-wcu-title,
  964. .nht-wcu-card:hover .nht-wcu-desc{
  965. color: #ffffff;
  966. }
  967.  
  968. /* Responsive spacing tweak */
  969. @media (max-width: 575.98px){
  970. .nht-wcu-card__inner{
  971. padding: 32px 16px;
  972. }
  973. .nht-wcu-icon{
  974. width: 84px;
  975. height: 84px;
  976. }
  977. .nht-wcu-icon i{
  978. font-size: 42px;
  979. }
  980. }
  981.  
  982.  
  983. /*============================ Feature section ============================= */
  984.  
  985. .feature-section {
  986. background-color: #f8f9fa;
  987. padding: 60px 0;
  988. }
  989. .feature-section h5 {
  990. font-size: 16px;
  991. font-weight: 600;
  992. color: #0077CC;
  993. }
  994. .feature-section h2{
  995. font-size: 35px;
  996. font-weight: 600;
  997. }
  998. .feature-section p{
  999. font-family: 'Poppins', sans-serif;
  1000. font-size: 16px;
  1001. font-weight: 500;
  1002. color: #646464;
  1003. }
  1004. .feature-card h4{
  1005. font-size: 16px;
  1006. font-weight: 400;
  1007. color: #000000;
  1008. padding: 0px 0px 1px 0px;
  1009. }
  1010.  
  1011.  
  1012. .feature-card {
  1013. background-color: #ffffff;
  1014. border: 1px solid #dee2e6;
  1015. border-radius: 8px;
  1016. text-align: center;
  1017. transition: transform 0.3s, box-shadow 0.3s;
  1018. }
  1019. .feature-card:hover {
  1020. transform: translateY(-5px);
  1021. box-shadow: 0 8px 20px rgba(0,0,0,0.1);
  1022. }
  1023. .feature-section .feature-card .btn {
  1024. height: 45px;
  1025. border-radius: 12px;
  1026. font-size: 18px;
  1027. padding-top: 8px;
  1028. text-align: center;
  1029. }
  1030. .btn-destination{
  1031. background-color: white;
  1032. color: #0D6EFD;
  1033. border: 1px solid #0D6EFD;
  1034. padding: 8px 55px;
  1035. border-radius: 16px;
  1036. margin: 65px 0px 0px 0px;
  1037. }
  1038. .btn-destination:hover{
  1039. background-color: #0D6EFD;
  1040. color: white;
  1041. }
  1042. .price-text {
  1043. font-family: 'Poppins', sans-serif;
  1044. font-weight: 400;
  1045. font-size: 24px;
  1046. }
  1047.  
  1048. .duration-text {
  1049. font-family: 'Poppins', sans-serif;
  1050. font-weight: 400;
  1051. font-size: 14px;
  1052. }
  1053. .feature-img {
  1054. position: relative;
  1055. }
  1056.  
  1057. .rating-badge {
  1058. position: absolute;
  1059. top: 10px;
  1060. right: 10px;
  1061. padding: 5px 10px;
  1062. background-color: #ffffff;
  1063. border-radius: 5px;
  1064. font-family: 'Poppins', sans-serif;
  1065. font-weight: 500;
  1066. font-size: 14px;
  1067. box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  1068. z-index: 5;
  1069. }
  1070.  
  1071. .feature-img .rating-badge {
  1072. display: block !important;
  1073. }
  1074.  
  1075. .btn-book:hover {
  1076. background-color: #FFFFFF;
  1077. color: var(--primary-color);
  1078. }
  1079.  
  1080. /*============================ Adventure Section ============================== */
  1081.  
  1082. #adventure-section .container .row{
  1083. margin: 10px 10px;
  1084. }
  1085. #adventure-section .left-content h2,
  1086. .left-content span {
  1087. font-weight: 700;
  1088. font-size: 50px;
  1089. text-transform: capitalize;
  1090. }
  1091. #adventure-section .left-content span{
  1092. color: #0077CC;
  1093. }
  1094. #adventure-section .left-content p{
  1095. font-weight: 400;
  1096. color: #6B6B6B;
  1097. font-size: 20px;
  1098. }
  1099.  
  1100. .counter-box {
  1101. background: transparent;
  1102. padding: 20px 20px;
  1103. border-radius: 12px;
  1104. transition: transform 0.3s;
  1105. }
  1106. .counter-box:hover {
  1107. transform: translateY(-5px);
  1108. }
  1109.  
  1110. .counter-box .icon-circle {
  1111. width: 70px;
  1112. height: 70px;
  1113. border-radius: 50%;
  1114. background-color: #0d6efd;
  1115. display: flex;
  1116. align-items: center;
  1117. justify-content: center;
  1118. color: #fff;
  1119. font-size: 30px;
  1120. transition: background-color 0.3s, color 0.3s;
  1121. }
  1122.  
  1123. .counter-box .icon-circle:hover {
  1124. background-color: #FFFFFF;
  1125. color:#0d6efd ;
  1126. }
  1127.  
  1128. .counter-box i {
  1129. font-size: 40px;
  1130. margin-bottom: 15px;
  1131. }
  1132. .counter-number {
  1133. font-size: 32px;
  1134. color: #212529;
  1135. }
  1136. .counter-text {
  1137. margin-top: 8px;
  1138. font-size: 16px;
  1139. color: #6c757d;
  1140. }
  1141. .counter-wrapper {
  1142. display: inline-flex;
  1143. align-items: baseline;
  1144. justify-content: center;
  1145. }
  1146.  
  1147. .counter-number,
  1148. .counter-suffix {
  1149. font-size: 32px;
  1150. color: #212529;
  1151. font-weight: 500;
  1152. line-height: 1;
  1153. }
  1154. .floating-card {
  1155. position: absolute;
  1156. bottom: -20px;
  1157. left: -45px;
  1158. background-color: #fff;
  1159. padding: 15px 20px;
  1160. border-radius: 10px;
  1161. box-shadow: 0 4px 15px rgba(0,0,0,0.2);
  1162. display: flex;
  1163. flex-direction: column;
  1164. align-items: flex-start;
  1165. }
  1166.  
  1167. .floating-card span:first-child {
  1168. font-size: 20px;
  1169. font-weight: bold;
  1170. color: #0077CC;
  1171. }
  1172.  
  1173. .floating-card span:last-child {
  1174. font-size: 14px;
  1175. color: #555;
  1176. }
  1177.  
  1178. /* ======================== Activities Section ============================ */
  1179.  
  1180. #activities h5{
  1181. font-weight: 600;
  1182. font-size: 16px;
  1183. color: #0077CC;
  1184. }
  1185. #activities h3{
  1186. font-weight: 600;
  1187. font-size: 35px;
  1188. color: #1B1D21;
  1189. }
  1190. #activities p{
  1191. font-weight: 500;
  1192. font-size: 16px;
  1193. color: #6B6B6B;
  1194. }
  1195. #activities .btn{
  1196. border-radius: 25px;
  1197. width: 130.5615463256836px;
  1198. height: 32.53333282470703px;
  1199. margin: 0.5rem;
  1200. }
  1201. .activity-card {
  1202. position: relative;
  1203. overflow: hidden;
  1204. cursor: pointer;
  1205. }
  1206.  
  1207. .activity-card img {
  1208. transition: transform 0.3s ease, filter 0.3s ease;
  1209. display: block;
  1210. width: 100%;
  1211. }
  1212.  
  1213. .activity-card .overlay {
  1214. position: absolute;
  1215. top: 0;
  1216. left: 0;
  1217. width: 100%;
  1218. height: 100%;
  1219. background: rgba(0, 0, 0, 0.6);
  1220. color: #fff;
  1221. opacity: 0;
  1222. transition: opacity 0.3s ease;
  1223. display: flex;
  1224. flex-direction: column;
  1225. justify-content: flex-end;
  1226. padding: 15px;
  1227. }
  1228.  
  1229. .activity-card .overlay button {
  1230. font-size: 12px;
  1231. padding: 4px 10px;
  1232. margin-bottom: 5px;
  1233. align-self: flex-start;
  1234. }
  1235.  
  1236. .activity-card .overlay p,
  1237. .activity-card .overlay h4 {
  1238. text-align: left;
  1239. margin: 0 0 5px 0;
  1240. }
  1241.  
  1242. .activity-card .overlay h4 {
  1243. font-size: 14px;
  1244. font-weight: 400;
  1245. }
  1246.  
  1247. .activity-card .overlay .d-flex {
  1248. justify-content: space-between;
  1249. font-size: 12px;
  1250. margin-top: 5px;
  1251. }
  1252.  
  1253. .activity-card .overlay .d-flex span i {
  1254. margin-right: 4px;
  1255. }
  1256.  
  1257.  
  1258. .activity-card:hover img {
  1259. transform: scale(1.05);
  1260. filter: brightness(0.99);
  1261. }
  1262.  
  1263. .activity-card:hover .overlay {
  1264. opacity: 1;
  1265. }
  1266.  
  1267. .activity-card .overlay .badge {
  1268. font-size: 12px;
  1269. padding: 5px 8px;
  1270. display: flex;
  1271. align-items: center;
  1272. gap: 4px;
  1273. }
  1274.  
  1275. .btn-customs {
  1276. background-color:#FFFFFF ;
  1277. color: #0077CC;
  1278. border: 2px solid #0077CC;
  1279. border-radius: 30px;
  1280. padding: 10px 40px;
  1281. font-size: 18px;
  1282. font-weight: 400;
  1283. min-width: 260px;
  1284. min-height: 45px;
  1285. transition: background-color 0.3s, transform 0.3s;
  1286. display: inline-block;
  1287. text-decoration: none;
  1288. text-align: center;
  1289. }
  1290.  
  1291. .btn-customs:hover {
  1292. background-color: #005fa3;
  1293. transform: translateY(-2px);
  1294. box-shadow: 0 5px 15px rgba(0,0,0,0.2);
  1295. color: #fff;
  1296. }
  1297.  
  1298.  
  1299. /* ========================== Testimonial Section ========================== */
  1300.  
  1301. #testimonial-section h5{
  1302. color: #ffffff;
  1303. font-weight: 600;
  1304. font-size: 16px;
  1305. }
  1306. #testimonial-section h2{
  1307. color: #FFFFFF;
  1308. font-weight: 600;
  1309. font-size: 35px;
  1310. }
  1311. #testimonial-section p{
  1312. color: #CBCBCB;
  1313. font-weight: 500;
  1314. font-size: 16px;
  1315. }
  1316.  
  1317. #testimonial-carousel {
  1318. transition: transform 0.6s ease-in-out;
  1319. }
  1320.  
  1321. #testimonial .testimonial-card {
  1322. background: none;
  1323. min-height: 300px;
  1324. }
  1325. #testimonial .testimonial-card p {
  1326. font-weight: 400;
  1327. font-size: 12px;
  1328. }
  1329. #testimonial .testimonial-card h5 {
  1330. font-weight: 700;
  1331. font-size: 18px;
  1332. }
  1333. #testimonial .testimonial-card small {
  1334. font-weight: 500;
  1335. font-size: 12px;
  1336. color: #CBCBCB;
  1337. }
  1338. /*======================= Blogs Section ======================== */
  1339.  
  1340. .blog-section {
  1341. background-color: #f8f9fa;
  1342. padding: 60px 0;
  1343. }
  1344. .blog-section h5 {
  1345. color: #0077CC;
  1346. font-size: 16px;
  1347. font-weight: 600;
  1348. }
  1349. .blog-section h2{
  1350. font-size: 35px;
  1351. font-weight: 600;
  1352. color: #1B1D21;
  1353. }
  1354. .blog-section p{
  1355. font-size: 16px;
  1356. font-weight: 500;
  1357. color: #6B6B6B;
  1358. }
  1359. .blog-card h4{
  1360. font-size: 20px;
  1361. font-weight: 600;
  1362. color: #000000;
  1363. padding: 0px 0px 1px 0px;
  1364. }
  1365. .blog-card p{
  1366. font-size: 16px;
  1367. font-weight: 400;
  1368. color: #6B6B6B;
  1369. }
  1370. .blog-card p span{
  1371. font-weight: 400;
  1372. color: #6B6B6B;
  1373. font-size: 16px;
  1374. margin-top: 20px;
  1375. }
  1376. .blog-card {
  1377. background-color: #ffffff;
  1378. border: 1px solid #dee2e6;
  1379. border-radius: 8px;
  1380. text-align: center;
  1381. transition: transform 0.3s, box-shadow 0.3s;
  1382. }
  1383. .blog-card:hover {
  1384. transform: translateY(-5px);
  1385. box-shadow: 0 8px 20px rgba(0,0,0,0.1);
  1386. }
  1387.  
  1388. .price-text {
  1389. font-family: 'Poppins', sans-serif;
  1390. font-weight: 400;
  1391. font-size: 24px;
  1392. }
  1393.  
  1394. .duration-text {
  1395. font-family: 'Poppins', sans-serif;
  1396. font-weight: 400;
  1397. font-size: 14px;
  1398. }
  1399. .blog-img {
  1400. position: relative;
  1401. }
  1402.  
  1403. /* =====================================================================
  1404. BOOKING SECTION
  1405. ===================================================================== */
  1406.  
  1407. .booking-section h2{
  1408. font-weight: 700;
  1409. font-size: 50px;
  1410. color: #FFFFFF;
  1411. margin-left: 127px;
  1412. }
  1413. .booking-section .booking {
  1414. height: 50px;
  1415. border-radius: 12px;
  1416. }
  1417. .booking-section .booking a {
  1418. margin-right: 80px;
  1419. font-weight: 400;
  1420. font-size: 18px;
  1421. }
  1422.  
  1423. /* ======================================================================
  1424. FOOTER
  1425. ====================================================================== */
  1426.  
  1427. #footer .container .row h6{
  1428. font-weight: 600;
  1429. font-size: 16px;
  1430. margin-top: 20px;
  1431. margin-bottom: 20px;
  1432. }
  1433. #footer .container .row h5{
  1434. font-family: 'Roboto', sans-serif;
  1435. font-weight: 700;
  1436. font-size: 18px;
  1437. }
  1438. #footer .container .row ul li a{
  1439. font-weight: 500;
  1440. font-size: 16px;
  1441. color: #DDDDDD;
  1442. }
  1443. #footer .container .row p {
  1444. font-weight: 500;
  1445. font-size: 16px;
  1446. color: #DDDDDD;
  1447. }
  1448. #footer{
  1449. background-color: #0077CC;
  1450. }
  1451.  
  1452. .footer-bottom-links li { display: inline-block; margin-right: 16px; }
  1453. .footer-bottom-links li:last-child { margin-right: 0; }
  1454. .footer-bottom-links a { color: #fff; text-decoration: none; }
  1455. .footer-bottom-links a:hover { text-decoration: underline; }
  1456.  
  1457.  
  1458.  
  1459. /*======================================================================
  1460. ======================================================================
  1461. ABOUT PAGE
  1462. ======================================================================
  1463. ====================================================================== */
  1464.  
  1465. /*====================== Main Navbar ======================== */
  1466.  
  1467. #main-navbar {
  1468. position: sticky;
  1469. top: 0;
  1470. z-index: 1030;
  1471. }
  1472.  
  1473. #main-navbar .nav-link {
  1474. font-family: 'Poppins', sans-serif;
  1475. font-size: 18px;
  1476. font-weight: 500;
  1477. }
  1478.  
  1479. /*======================== Why We Are Best Section ===================== */
  1480.  
  1481. #best {
  1482. padding: 60px 0;
  1483. }
  1484.  
  1485. #best .why-best-heading {
  1486. font-weight: 500;
  1487. font-style: medium;
  1488. font-size: 28px;
  1489. line-height: 32px;
  1490. letter-spacing: 0%;
  1491. vertical-align: middle;
  1492. text-align: left;
  1493. margin-left: 40px;
  1494. margin-bottom: 40px;
  1495. color: #111111 !important;
  1496. }
  1497. #best .row {
  1498. display: flex;
  1499. justify-content: center;
  1500. padding: 40px;
  1501. }
  1502.  
  1503. #best .feature-icon {
  1504. font-size: 2rem;
  1505. margin-bottom: 15px;
  1506. color: #007bff;
  1507. }
  1508.  
  1509. #best .feature-title {
  1510. font-family: var(--bs-body-font-family);
  1511. font-weight: 500;
  1512. font-size: 18px;
  1513. margin-bottom: 10px;
  1514. color: #111111 !important;
  1515. }
  1516.  
  1517. #best .feature-text {
  1518. font-family: 'DM Sans';
  1519. font-weight: 400;
  1520. font-size: 16px;
  1521. line-height: 1.5;
  1522. color: #555555 !important;
  1523. }
  1524.  
  1525. /*=========================== Connect Section ============================ */
  1526.  
  1527. #connect {
  1528. padding: 60px 0;
  1529. text-align: center;
  1530. }
  1531.  
  1532. #connect .connect-heading {
  1533. font-weight: 500;
  1534. font-size: 28px;
  1535. line-height: 32px;
  1536. margin-bottom: 40px;
  1537. }
  1538.  
  1539. #connect .connect-row {
  1540. display: flex;
  1541. justify-content: flex-start;
  1542. }
  1543.  
  1544. #connect .connect-column {
  1545. border: 1px solid #EEEEEE;
  1546. padding: 20px;
  1547. border-radius: 8px;
  1548. display: flex;
  1549. flex-direction: column;
  1550. align-items: flex-start;
  1551. }
  1552.  
  1553. #connect .first-column,
  1554. #connect .second-column,
  1555. #connect .connect-column:last-child {
  1556. width: calc(33.333% - 6.66px);
  1557. }
  1558.  
  1559. #connect .first-column {
  1560. margin-right: 10px;
  1561. }
  1562.  
  1563. #connect .second-column {
  1564. margin-right: 10px;
  1565. }
  1566.  
  1567. #connect .connect-icon {
  1568. font-size: 2rem;
  1569. margin-bottom: 15px;
  1570. color: #007bff;
  1571. }
  1572.  
  1573. #connect .connect-title {
  1574. font-weight: 500;
  1575. font-size: 18px;
  1576. margin-bottom: 10px;
  1577. color: #111111 !important;
  1578. }
  1579.  
  1580. #connect .connect-text {
  1581. font-family: 'DM Sans', sans-serif;
  1582. font-weight: 400;
  1583. font-size: 16px;
  1584. line-height: 1.5;
  1585. margin-bottom: 15px;
  1586. color: #555555 !important;
  1587. }
  1588.  
  1589. /*====================================================================
  1590. ====================================================================
  1591. CONTACT PAGE
  1592. ====================================================================
  1593. ==================================================================== */
  1594.  
  1595. #contact-section {
  1596. width: 100%;
  1597. padding: 60px 20px;
  1598. box-sizing: border-box;
  1599. font-family: Arial, sans-serif;
  1600. background-color: #f1f1f1;
  1601. }
  1602.  
  1603. #contact-section #contact-container {
  1604. display: flex;
  1605. gap: 20px;
  1606. flex-wrap: wrap;
  1607. justify-content: center;
  1608. }
  1609.  
  1610. #contact-section #contact-form-box {
  1611. width: 760px;
  1612. border-radius: 16px;
  1613. background-color: #FFFFFF;
  1614. padding: 40px;
  1615. box-sizing: border-box;
  1616. opacity: 1;
  1617. }
  1618.  
  1619. #contact-section #contact-form-box #form-heading {
  1620. margin-bottom: 20px;
  1621. font-size: 28px;
  1622. color: #111111;
  1623. }
  1624.  
  1625. #contact-section #contact-form-box .form-row {
  1626. display: flex;
  1627. gap: 20px;
  1628. margin-bottom: 20px;
  1629. }
  1630.  
  1631. #contact-section #contact-form-box .form-row input,
  1632. #contact-section #contact-form-box .form-row textarea {
  1633. padding: 12px;
  1634. border: 1px solid #ccc;
  1635. border-radius: 8px;
  1636. width: 100%;
  1637. box-sizing: border-box;
  1638. font-size: 16px;
  1639. }
  1640.  
  1641. #contact-section #contact-form-box .checkbox-row {
  1642. display: flex;
  1643. align-items: flex-start;
  1644. gap: 10px;
  1645. margin-bottom: 20px;
  1646. }
  1647.  
  1648. #contact-section #contact-form-box .checkbox-row input[type="checkbox"] {
  1649. margin-top: 4px;
  1650. flex-shrink: 0;
  1651. }
  1652.  
  1653. #contact-section #contact-form-box .checkbox-row label {
  1654. font-size: 14px;
  1655. line-height: 1.4;
  1656. color: #111;
  1657. cursor: pointer;
  1658. }
  1659.  
  1660. #contact-section #contact-form-box .form-row textarea {
  1661. height: 150px;
  1662. resize: none;
  1663. }
  1664.  
  1665. #contact-section #contact-form-box #submit-btn {
  1666. padding: 12px 24px;
  1667. border: none;
  1668. background-color: #007bff;
  1669. color: #fff;
  1670. font-size: 16px;
  1671. border-radius: 8px;
  1672. cursor: pointer;
  1673. }
  1674.  
  1675. #contact-section #contact-info-box {
  1676. width: 320px;
  1677. height: 260px;
  1678. border-radius: 16px;
  1679. background-color: #FFFFFF;
  1680. padding: 30px;
  1681. box-sizing: border-box;
  1682. opacity: 1;
  1683. }
  1684.  
  1685. #contact-section #contact-info-box #info-heading {
  1686. margin-bottom: 20px;
  1687. font-size: 24px;
  1688. color: #111111;
  1689. }
  1690.  
  1691. #contact-section #contact-info-box p {
  1692. margin-bottom: 15px;
  1693. font-size: 16px;
  1694. color: #111111;
  1695. }
  1696.  
  1697. #contact-section #contact-info-box p i {
  1698. margin-right: 10px;
  1699. }
  1700.  
  1701. #contact-section #map-box {
  1702. margin-top: 40px;
  1703. width: 100%;
  1704. border-radius: 16px;
  1705. overflow: hidden;
  1706. }
  1707.  
  1708. /*=========================================================================
  1709. =========================================================================
  1710. ACTIVITIES PAGE
  1711. =========================================================================
  1712. ========================================================================= */
  1713.  
  1714. /* +++++++++++++++ Activities Feature Section ++++++++++++++ */
  1715. #activities-feature .feature-card {
  1716. position: relative;
  1717. }
  1718. #activities-feature .rating-badge {
  1719. position: absolute;
  1720. top: 10px;
  1721. right: 10px;
  1722. background: #fff;
  1723. padding: 4px 8px;
  1724. border-radius: 12px;
  1725. font-size: 14px;
  1726. font-weight: 500;
  1727. }
  1728. #activities-feature .btn.active {
  1729. background-color: #0d6efd;
  1730. color: #fff;
  1731. }
  1732. #activities-feature .filter-row {
  1733. overflow-x: auto;
  1734. white-space: nowrap;
  1735. scroll-behavior: smooth;
  1736. -webkit-overflow-scrolling: touch;
  1737. cursor: grab;
  1738. user-select: none;
  1739. }
  1740. #activities-feature .filter-row::-webkit-scrollbar {
  1741. display: none;
  1742. }
  1743. #activities-feature .filter-row .btn {
  1744. padding: 7px 27px;
  1745. font-size: 16px;
  1746. min-width: 120px;
  1747. margin-right: 10px;
  1748. border-radius: 25px;
  1749. user-select: none;
  1750. pointer-events: auto;
  1751. }
  1752.  
  1753. /* ++++++++++++++++++++++++++ Activities Section(Activities Page) ++++++++++++++++++*/
  1754.  
  1755. #activities-section {
  1756. background: #f9f9f9;
  1757. padding: 60px 0;
  1758. }
  1759.  
  1760. #activities-section h2 {
  1761. font-weight: 600;
  1762. font-size: 16px;
  1763. color: var(--primary-color);
  1764. }
  1765.  
  1766. #activities-section h4 {
  1767. color: #1B1D21;
  1768. font-weight: 700;
  1769. font-size: 29.88px;
  1770. margin-bottom: 10px;
  1771. text-align: left;
  1772. }
  1773.  
  1774. #activities-section p {
  1775. color: #6B6B6B;
  1776. font-weight: 500;
  1777. font-size: 16px;
  1778. }
  1779.  
  1780. #activities-section #activities-slider {
  1781. display: flex;
  1782. overflow-x: auto;
  1783. scroll-behavior: smooth;
  1784. gap: 20px;
  1785. padding-bottom: 10px;
  1786. }
  1787.  
  1788. #activities-section #activities-slider::-webkit-scrollbar {
  1789. display: none;
  1790. }
  1791.  
  1792. #activities-section .activity-card {
  1793. height: 397px;
  1794. flex: 0 0 calc(25% - 20px);
  1795. background: #fff;
  1796. border-radius: 12px;
  1797. overflow: hidden;
  1798. box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  1799. min-width: 260px;
  1800. display: flex;
  1801. flex-direction: column;
  1802. }
  1803.  
  1804. #activities-section .activity-card .card-img {
  1805. position: relative;
  1806. height: 214.28px;
  1807. }
  1808.  
  1809. #activities-section .activity-card .card-img img {
  1810. width: 100%;
  1811. height: 100%;
  1812. object-fit: cover;
  1813. }
  1814.  
  1815. #activities-section .activity-card .love-icon {
  1816. position: absolute;
  1817. top: 10px;
  1818. right: 10px;
  1819. background: white;
  1820. border-radius: 50%;
  1821. padding: 8px;
  1822. font-size: 14px;
  1823. color: red;
  1824. box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  1825. }
  1826.  
  1827. #activities-section .activity-card .card-content {
  1828. padding: 15px;
  1829. height: 182.72px;
  1830. display: flex;
  1831. flex-direction: column;
  1832. justify-content: space-between;
  1833. }
  1834.  
  1835. #activities-section .activity-card .location {
  1836. font-family: 'DM Sans', sans-serif;
  1837. font-size: 12.29pxpx;
  1838. font-weight: 400;
  1839. color: #666;
  1840. margin-bottom: 0px;
  1841. }
  1842.  
  1843. #activities-section .activity-card h5 {
  1844. font-size: 18px;
  1845. margin: 0;
  1846. font-weight: 500;
  1847. }
  1848.  
  1849. #activities-section .activity-card .rating {
  1850. font-size: 14px;
  1851. color: #ff9800;
  1852. }
  1853.  
  1854. #activities-section .activity-card .rating span {
  1855. color: #555;
  1856. margin-left: 5px;
  1857. }
  1858.  
  1859. #activities-section .activity-card .bottom-info {
  1860. display: flex;
  1861. justify-content: space-between;
  1862. font-size: 14px;
  1863. color: #555;
  1864. }
  1865.  
  1866. #activities-section .activity-card .bottom-info .price span{
  1867. font-weight: bold;
  1868. color: #1B1D21;
  1869. }
  1870.  
  1871. #activities-section {
  1872. user-select: none;
  1873. -webkit-user-select: none;
  1874. }
  1875.  
  1876. #activities-section img {
  1877. pointer-events: none;
  1878. }
  1879. .btn-customed{
  1880. font-weight: 400;
  1881. background-color: white;
  1882. color: #0D6EFD;
  1883. border: 1px solid #0D6EFD;
  1884. padding: 7px 70px;
  1885. border-radius: 16px;
  1886. margin: 20px 0px 0px 0px;
  1887. }
  1888. .btn-customed:hover{
  1889. background-color: #0D6EFD;
  1890. color: white;
  1891. }
  1892. /*=======================================================================
  1893. =======================================================================
  1894. BLOG PAGE
  1895. =======================================================================
  1896. ======================================================================= */
  1897.  
  1898. #blog-section {
  1899. padding-top: 60px !important;
  1900. margin-top: 60px !important;
  1901. margin-left: 20px !important;
  1902. margin-right: 20px !important;
  1903. background-color: #FFFFFF;
  1904. }
  1905. #blog-section #blog-left {
  1906. scrollbar-width: none;
  1907. -ms-overflow-style: none;
  1908. margin: 0;
  1909. }
  1910. #blog-section .blog-card {
  1911. width: 100%;
  1912. height: 280px;
  1913. display: flex;
  1914. overflow: hidden;
  1915. border: none !important;
  1916. }
  1917.  
  1918. #blog-section .blog-card .card-img {
  1919. width: 50%;
  1920. height: 100%;
  1921. overflow: hidden;
  1922. border-radius: 10px;
  1923. }
  1924.  
  1925. #blog-section .blog-card .card-img img {
  1926. width: 100%;
  1927. height: 100%;
  1928. object-fit: cover;
  1929. }
  1930.  
  1931. #blog-section .blog-card .card-content {
  1932. width: 50%;
  1933. height: 100%;
  1934. padding: 20px;
  1935. display: flex;
  1936. flex-direction: column;
  1937. justify-content: center;
  1938. }
  1939. #blog-left::-webkit-scrollbar {
  1940. display: none;
  1941. }
  1942. #blog-section #blog-left .blog-card .card-content .subheading {
  1943. font-family: DM Sans;
  1944. font-weight: 500;
  1945. font-style: Medium;
  1946. font-size: 12px;
  1947. line-height: 24px;
  1948. letter-spacing: 0.12px;
  1949. vertical-align: middle;
  1950. text-transform: uppercase;
  1951. color: #838E9E;
  1952. }
  1953. #blog-section #blog-left .blog-card .card-content .heading {
  1954. font-family: Montserrat;
  1955. font-weight: 600;
  1956. font-style: SemiBold;
  1957. font-size: 18px;
  1958. line-height: 24px;
  1959. letter-spacing: 0%;
  1960. vertical-align: middle;
  1961. color: #111111;
  1962. }
  1963. #blog-section #blog-left .blog-card .card-content .paragraph {
  1964. font-family: DM Sans;
  1965. font-weight: 400;
  1966. font-style: 9pt Regular;
  1967. font-size: 16px;
  1968. line-height: 24px;
  1969. letter-spacing: 0%;
  1970. vertical-align: middle;
  1971. color: #555555;
  1972. }
  1973. #blog-section #blog-left .blog-card .card-content .read-more {
  1974. font-family: DM Sans;
  1975. font-weight: 500;
  1976. font-style: Medium;
  1977. font-size: 14px;
  1978. line-height: 24px;
  1979. letter-spacing: 0%;
  1980. vertical-align: middle;
  1981. text-transform: capitalize;
  1982. }
  1983.  
  1984. #blog-section #blog-left .blog-card .card-content h6.subheading,
  1985. #blog-section #blog-left .blog-card .card-content h4.heading,
  1986. #blog-section #blog-left .blog-card .card-content p,
  1987. #blog-section #blog-left .blog-card .card-content a.read-more {
  1988. text-align: left;
  1989. }
  1990.  
  1991. #blog-section #blog-right .category {
  1992. font-family: Poppins;
  1993. font-weight: 600;
  1994. font-style: SemiBold;
  1995. font-size: 24px;
  1996. line-height: 28.8px;
  1997. letter-spacing: 0%;
  1998. vertical-align: middle;
  1999. color: #012E41;
  2000. }
  2001. #blog-section #blog-right .list-unstyled {
  2002. font-family: Montserrat;
  2003. font-weight: 400;
  2004. font-style: Regular;
  2005. font-size: 16px;
  2006. line-height: 24px;
  2007. letter-spacing: 0%;
  2008. vertical-align: middle;
  2009. color: #6B6B6B;
  2010. }
  2011.  
  2012. #blog-section #blog-right .recent-news-card {
  2013. width: 368px;
  2014. height: 99px;
  2015. }
  2016. #blog-section #blog-right .recent-news-card img {
  2017. width: 80px;
  2018. height: 80px;
  2019. object-fit: cover;
  2020. }
  2021. #blog-section #blog-right .recent-news-card h6 {
  2022. font-family: Montserrat;
  2023. font-weight: 600;
  2024. font-style: SemiBold;
  2025. font-size: 16px;
  2026. line-height: 19.2px;
  2027. letter-spacing: 0%;
  2028. vertical-align: middle;
  2029. color: #1B1D21;
  2030. }
  2031. #blog-section #blog-right .tags {
  2032. width: 368px;
  2033. height: 178.8000030517578px;
  2034. top: 734.6px;
  2035. left: 24px;
  2036. opacity: 1;
  2037. }
  2038. #blog-section #blog-right .tags .btn {
  2039. height: 34px;
  2040. top: -0.39px;
  2041. opacity: 1;
  2042. border-radius: 6px;
  2043. border-width: 1px;
  2044. background-color: #F6F6F6;
  2045. color: #000000;
  2046. }
  2047.  
  2048. #blog-section #blog-right .promo-content {
  2049. position: absolute;
  2050. top: 0;
  2051. left: 0;
  2052. width: 100%;
  2053. height: 100%;
  2054. background: rgba(0,0,0,0.5);
  2055. border-radius: 5px;
  2056. color: #fff;
  2057. display: flex;
  2058. flex-direction: column;
  2059. justify-content: center;
  2060. align-items: center;
  2061. text-align: center;
  2062. padding: 20px;
  2063. }
  2064.  
  2065. #blog-section #blog-right .promo-content h5 {
  2066. font-family: Montserrat;
  2067. font-weight: 700;
  2068. font-style: Bold;
  2069. font-size: 24px;
  2070. line-height: 24.01px;
  2071. letter-spacing: 0%;
  2072. text-align: center;
  2073. vertical-align: middle;
  2074. color: #FFFFFF;
  2075. }
  2076. #blog-section #blog-right .promo-content p {
  2077. font-family: Montserrat;
  2078. font-weight: 400;
  2079. font-style: Regular;
  2080. font-size: 12px;
  2081. line-height: 16px;
  2082. letter-spacing: 0%;
  2083. text-align: center;
  2084. vertical-align: middle;
  2085. }
  2086. #blog-section #blog-right .news h5{
  2087. font-family: Poppins;
  2088. font-weight: 600;
  2089. font-style: SemiBold;
  2090. font-size: 24px;
  2091. line-height: 28.8px;
  2092. letter-spacing: 0%;
  2093. vertical-align: middle;
  2094. color: #012E41 !important;
  2095. }
  2096. #blog-section #blog-right .news .btn {
  2097. width: 100%;
  2098. height: 45px;
  2099. top: 99.46px;
  2100. left: 1px;
  2101. opacity: 1;
  2102. border-radius: 12px;
  2103. font-family: Montserrat;
  2104. font-weight: 400;
  2105. font-style: Regular;
  2106. font-size: 16px;
  2107. line-height: 100%;
  2108. letter-spacing: 0%;
  2109. text-align: center;
  2110. vertical-align: middle;
  2111. }
  2112.  
  2113. #left-cards-wrapper .blog-card {
  2114. display: none !important;
  2115. }
  2116.  
  2117. #left-cards-wrapper .blog-card.active {
  2118. display: flex !important;
  2119. }
  2120.  
  2121. #blog-section {
  2122. overflow-x: hidden;
  2123. }
  2124.  
  2125. #left-cards-wrapper {
  2126. display: flex;
  2127. flex-direction: column;
  2128. gap: 20px;
  2129. width: 100%;
  2130. }
  2131.  
  2132. #left-cards-wrapper .blog-card {
  2133. width: 100%;
  2134. max-width: 800px;
  2135. margin: 0 auto;
  2136. }
  2137.  
  2138. /* Destination listing section */
  2139. .dest-listing{
  2140. background:#fff;
  2141. }
  2142.  
  2143. /* Title */
  2144. .dest-title{
  2145. font-size:38px;
  2146. font-weight:600;
  2147. line-height:1.2;
  2148. }
  2149.  
  2150. /* Filters */
  2151. .filter-panel{
  2152. position: sticky;
  2153. top: 110px; /* adjust to your header height */
  2154. }
  2155. .filter-date{
  2156. background:#0077CC;
  2157. border-radius:12px;
  2158. }
  2159. .filter-date .card-body{
  2160. padding:16px;
  2161. }
  2162. .filter-date-btn{
  2163. border-radius:10px;
  2164. font-size:13px;
  2165. padding:10px 12px;
  2166. }
  2167. .filter-acc .accordion-item{
  2168. border:1px solid #E9EDF3;
  2169. border-radius:12px !important;
  2170. overflow:hidden;
  2171. margin-bottom:12px;
  2172. }
  2173. .filter-acc .accordion-button{
  2174. font-weight:600;
  2175. font-size:14px;
  2176. padding:14px 14px;
  2177. box-shadow:none !important;
  2178. }
  2179. .filter-acc .accordion-button:not(.collapsed){
  2180. background:#fff;
  2181. color:#1B1D21;
  2182. }
  2183. .filter-acc .accordion-body{
  2184. padding:12px 14px 14px;
  2185. }
  2186. .filter-acc .form-check{
  2187. margin-bottom:10px;
  2188. }
  2189. .filter-acc .form-check-label{
  2190. font-size:13px;
  2191. color:#6B6B6B;
  2192. }
  2193. .filter-more{
  2194. display:inline-block;
  2195. margin-top:6px;
  2196. font-size:12px;
  2197. color:#ff6b4a;
  2198. text-decoration:none;
  2199. font-weight:600;
  2200. }
  2201. .filter-more:hover{ text-decoration:underline; }
  2202.  
  2203. .rating-check .stars i{
  2204. color:#f5a623;
  2205. font-size:13px;
  2206. }
  2207.  
  2208. /* Sort button */
  2209. .btn-sort{
  2210. border:0;
  2211. background:transparent;
  2212. color:#1B1D21;
  2213. font-size:13px;
  2214. font-weight:500;
  2215. padding:6px 8px;
  2216. }
  2217.  
  2218. /* Listing Card */
  2219. .dest-card{
  2220. display:grid;
  2221. grid-template-columns: 240px 1fr 200px;
  2222. gap:18px;
  2223. padding:16px;
  2224. border:1px solid #E9EDF3;
  2225. border-radius:12px;
  2226. background:#fff;
  2227. }
  2228.  
  2229. .dest-card__media{
  2230. position:relative;
  2231. border-radius:12px;
  2232. overflow:hidden;
  2233. height:170px;
  2234. background:#eef2f7;
  2235. }
  2236. .dest-card__media img{
  2237. width:100%;
  2238. height:100%;
  2239. object-fit:cover;
  2240. display:block;
  2241. }
  2242. .badge-offer{
  2243. position:absolute;
  2244. top:10px;
  2245. left:10px;
  2246. background:#ff6b4a;
  2247. color:#fff;
  2248. font-weight:700;
  2249. font-size:11px;
  2250. padding:5px 8px;
  2251. border-radius:8px;
  2252. }
  2253. .wish-btn{
  2254. position:absolute;
  2255. top:10px;
  2256. right:10px;
  2257. width:34px;
  2258. height:34px;
  2259. border-radius:999px;
  2260. border:1px solid rgba(255,255,255,.65);
  2261. background:rgba(255,255,255,.85);
  2262. display:flex;
  2263. align-items:center;
  2264. justify-content:center;
  2265. }
  2266. .wish-btn i{ color:#1B1D21; }
  2267.  
  2268. .dest-card__top{
  2269. display:flex;
  2270. justify-content:space-between;
  2271. align-items:center;
  2272. gap:12px;
  2273. margin-bottom:6px;
  2274. }
  2275. .dest-loc, .dest-days{
  2276. font-size:12px;
  2277. color:#6B6B6B;
  2278. display:flex;
  2279. align-items:center;
  2280. gap:6px;
  2281. white-space:nowrap;
  2282. }
  2283. .dest-loc i, .dest-days i{
  2284. color:#6B6B6B;
  2285. }
  2286.  
  2287. .dest-card__title{
  2288. font-size:16px;
  2289. margin:0 0 6px;
  2290. font-weight:600;
  2291. }
  2292.  
  2293. .dest-rating{
  2294. display:flex;
  2295. align-items:center;
  2296. gap:8px;
  2297. margin-bottom:8px;
  2298. font-size:12px;
  2299. }
  2300. .dest-rating .stars i{
  2301. color:#f5a623;
  2302. font-size:12px;
  2303. }
  2304. .rate-num{
  2305. font-weight:700;
  2306. color:#1B1D21;
  2307. }
  2308. .rate-count{
  2309. color:#6B6B6B;
  2310. }
  2311.  
  2312. .dest-card__desc{
  2313. font-size:12px;
  2314. line-height:1.55;
  2315. margin-bottom:10px;
  2316. color:#6B6B6B;
  2317. max-width: 520px;
  2318. }
  2319.  
  2320. .dest-perks{
  2321. display:flex;
  2322. gap:14px;
  2323. flex-wrap:wrap;
  2324. font-size:12px;
  2325. color:#0077CC;
  2326. }
  2327. .dest-perks i{
  2328. color:#0077CC;
  2329. margin-right:6px;
  2330. }
  2331.  
  2332. /* Price + button column */
  2333. .dest-card__side{
  2334. display:flex;
  2335. flex-direction:column;
  2336. align-items:flex-end;
  2337. justify-content:space-between;
  2338. }
  2339. .price-box{
  2340. text-align:right;
  2341. }
  2342. .old-price{
  2343. text-decoration:line-through;
  2344. color:#b0b7c3;
  2345. font-size:12px;
  2346. }
  2347. .from{
  2348. color:#6B6B6B;
  2349. font-size:12px;
  2350. }
  2351. .new-price{
  2352. font-size:18px;
  2353. font-weight:700;
  2354. color:#1B1D21;
  2355. }
  2356. .btn-view{
  2357. border:1px solid #0077CC;
  2358. color:#0077CC;
  2359. background:#fff;
  2360. border-radius:10px;
  2361. font-size:13px;
  2362. padding:8px 14px;
  2363. font-weight:600;
  2364. }
  2365. .btn-view:hover{
  2366. background:#0077CC;
  2367. color:#fff;
  2368. }
  2369.  
  2370. /* Pagination */
  2371. .dest-pagination .page-link{
  2372. border:0;
  2373. color:#1B1D21;
  2374. font-weight:600;
  2375. font-size:13px;
  2376. border-radius:999px !important;
  2377. margin:0 3px;
  2378. }
  2379. .dest-pagination .page-item.active .page-link{
  2380. background:#0077CC;
  2381. color:#fff;
  2382. }
  2383. .dest-pagination .page-item.disabled .page-link{
  2384. color:#b0b7c3;
  2385. }
  2386.  
  2387. /* Responsive */
  2388. @media (max-width: 991.98px){
  2389. .filter-panel{ position:static; top:auto; }
  2390. .dest-title{ font-size:30px; }
  2391.  
  2392. .dest-card{
  2393. grid-template-columns: 200px 1fr;
  2394. }
  2395. .dest-card__side{
  2396. grid-column: 1 / -1;
  2397. flex-direction:row;
  2398. align-items:center;
  2399. justify-content:space-between;
  2400. gap:12px;
  2401. }
  2402. .price-box{ text-align:left; }
  2403. }
  2404.  
  2405. @media (max-width: 575.98px){
  2406. .dest-card{
  2407. grid-template-columns: 1fr;
  2408. }
  2409. .dest-card__media{ height:190px; }
  2410. .dest-card__top{ flex-direction:column; align-items:flex-start; }
  2411. .dest-card__side{
  2412. flex-direction:column;
  2413. align-items:flex-start;
  2414. gap:10px;
  2415. }
  2416. }
  2417.  
  2418.  
  2419. /*==========================================================================
  2420. ==========================================================================
  2421. FAQ PAGE
  2422. ==========================================================================
  2423. ========================================================================== */
  2424.  
  2425. #faq {
  2426. max-width: 800px;
  2427. margin: 60px auto;
  2428. font-family: "Poppins", sans-serif;
  2429. }
  2430.  
  2431. #faq .faq-title {
  2432. text-align: center;
  2433. font-size: 2rem;
  2434. margin-bottom: 30px;
  2435. color: #222;
  2436. }
  2437.  
  2438. #faq .faq-item {
  2439. border: 2px solid #eee;
  2440. border-radius: 8px;
  2441. margin-bottom: 15px;
  2442. padding: 15px 20px;
  2443. transition: all 0.3s ease;
  2444. }
  2445.  
  2446. #faq .faq-question {
  2447. display: flex;
  2448. justify-content: space-between;
  2449. align-items: center;
  2450. cursor: pointer;
  2451. }
  2452.  
  2453. #faq .faq-question h3 {
  2454. font-size: 1.1rem;
  2455. margin: 0;
  2456. color: #333;
  2457. }
  2458.  
  2459. #faq .faq-toggle {
  2460. font-size: 1.5rem;
  2461. font-weight: bold;
  2462. color: #007bff;
  2463. transition: transform 0.2s ease;
  2464. }
  2465.  
  2466. #faq .faq-answer {
  2467. display: none;
  2468. padding-top: 10px;
  2469. color: #555;
  2470. font-size: 0.95rem;
  2471. line-height: 1.6;
  2472. }
  2473.  
  2474. #faq .faq-item.active .faq-answer {
  2475. display: block;
  2476. }
  2477.  
  2478. #faq .faq-item.active .faq-toggle {
  2479. transform: rotate(180deg);
  2480. color: #e63946;
  2481. }
  2482.  
  2483. /* ======================================================================
  2484. ======================================================================
  2485. PRIVACY POLICY PAGE
  2486. ======================================================================
  2487. ====================================================================== */
  2488.  
  2489. #privacy-policy {
  2490. padding: 40px 30px;
  2491. border-radius: 10px;
  2492. max-width: 900px;
  2493. margin: 40px auto;
  2494. font-family: "Poppins", sans-serif;
  2495. color: #333;
  2496. line-height: 1.7;
  2497. }
  2498.  
  2499. #privacy-policy h2 {
  2500. font-size: 28px;
  2501. font-family: Montserrat;
  2502. margin-bottom: 20px;
  2503. font-weight: 500;
  2504. color: #111111;
  2505. }
  2506.  
  2507. #privacy-policy h3 {
  2508. font-size: 24px;
  2509. font-family: Montserrat;
  2510. font-weight: 500;
  2511. margin-top: 25px;
  2512. margin-bottom: 10px;
  2513. color: #111111;
  2514. }
  2515.  
  2516. #privacy-policy h4 {
  2517. font-size: 18px;
  2518. font-weight: 500;
  2519. font-family: Montserrat;
  2520. margin-top: 15px;
  2521. margin-bottom: 8px;
  2522. color: #111111;
  2523. }
  2524.  
  2525. #privacy-policy p {
  2526. margin-bottom: 15px;
  2527. font-family: DM Sans;
  2528. font-weight: 400;
  2529. font-size: 16px;
  2530. color: #555555;
  2531. }
  2532.  
  2533. /* =======================================================================
  2534. =======================================================================
  2535. BLOGS DETAIL PAGE
  2536. =======================================================================
  2537. ======================================================================= */
  2538.  
  2539. #blog-detail {
  2540. padding: 60px 0;
  2541. }
  2542.  
  2543. #blog-detail .blog-main-image img {
  2544. width: 100%;
  2545. height: auto;
  2546. border-radius: 10px;
  2547. }
  2548.  
  2549. #blog-detail .blog-content {
  2550. margin-top: 25px;
  2551. }
  2552.  
  2553. #blog-detail .blog-content h2 {
  2554. font-size: 2rem;
  2555. font-weight: 700;
  2556. margin-bottom: 15px;
  2557. color: #222;
  2558. }
  2559.  
  2560. #blog-detail .blog-content p {
  2561. color: #555;
  2562. line-height: 1.8;
  2563. margin-bottom: 18px;
  2564. }
  2565.  
  2566. #blog-detail .subheading {
  2567. font-weight: 600;
  2568. font-size: 1.1rem;
  2569. color: #444;
  2570. margin-top: 20px;
  2571. }
  2572.  
  2573. #blog-detail .author-info {
  2574. font-style: italic;
  2575. margin-top: 20px;
  2576. color: #777;
  2577. padding-left: 20px;
  2578. padding-right: 20px;
  2579. margin-left: 10px;
  2580. margin-right: 10px;
  2581. text-align: justify;
  2582. }
  2583.  
  2584. #blog-detail .info-text {
  2585. padding-left: 20px;
  2586. padding-right: 20px;
  2587. margin-left: 10px;
  2588. margin-right: 10px;
  2589. text-align: justify;
  2590. }
  2591.  
  2592. #blog-detail .blog-gallery {
  2593. display: flex;
  2594. gap: 10px;
  2595. margin: 20px 0;
  2596. }
  2597.  
  2598. #blog-detail .blog-gallery img {
  2599. width: 210px;
  2600. height: 140px;
  2601. border-radius: 8px;
  2602. object-fit: cover;
  2603. }
  2604.  
  2605. #blog-detail .tags-section {
  2606. margin-top: 30px;
  2607. }
  2608.  
  2609. #blog-detail .tags-section h5 {
  2610. margin-bottom: 10px;
  2611. font-weight: 600;
  2612. }
  2613.  
  2614. #blog-detail .tags-section .btn {
  2615. background: #f0f0f0;
  2616. border: none;
  2617. color: #333;
  2618. transition: 0.3s;
  2619. }
  2620.  
  2621. #blog-detail .tags-section .btn:hover {
  2622. background: #007bff;
  2623. color: #fff;
  2624. }
  2625.  
  2626. #blog-detail .comments-section {
  2627. margin-top: 50px;
  2628. }
  2629.  
  2630. #blog-detail .comment {
  2631. border-bottom: 1px solid #eee;
  2632. padding: 15px 0;
  2633. display: flex;
  2634. justify-content: space-between;
  2635. }
  2636.  
  2637. #blog-detail .comment .left {
  2638. display: flex;
  2639. gap: 15px;
  2640. }
  2641.  
  2642. #blog-detail .comment img {
  2643. width: 55px;
  2644. height: 55px;
  2645. border-radius: 50%;
  2646. object-fit: cover;
  2647. }
  2648.  
  2649. #blog-detail .comment .name {
  2650. font-weight: 600;
  2651. }
  2652.  
  2653. #blog-detail .comment .reply-btn {
  2654. background: none;
  2655. border: none;
  2656. color: #007bff;
  2657. cursor: pointer;
  2658. font-size: 0.9rem;
  2659. }
  2660.  
  2661. #blog-detail .leave-comment {
  2662. margin-top: 40px;
  2663. }
  2664.  
  2665. #blog-detail .leave-comment input,
  2666. #blog-detail .leave-comment textarea {
  2667. border-radius: 6px;
  2668. }
  2669.  
  2670. #blog-detail .leave-comment button {
  2671. margin-top: 10px;
  2672. border-radius: 6px;
  2673. }
  2674.  
  2675. #blog-detail #blog-right .category {
  2676. font-family: Poppins, sans-serif;
  2677. font-weight: 600;
  2678. font-style: normal;
  2679. font-size: 24px;
  2680. line-height: 28.8px;
  2681. letter-spacing: 0%;
  2682. vertical-align: middle;
  2683. color: #012E41;
  2684. }
  2685.  
  2686. #blog-detail #blog-right .list-unstyled {
  2687. font-family: Montserrat, sans-serif;
  2688. font-weight: 400;
  2689. font-style: normal;
  2690. font-size: 16px;
  2691. line-height: 24px;
  2692. letter-spacing: 0%;
  2693. vertical-align: middle;
  2694. color: #6B6B6B;
  2695. }
  2696.  
  2697. #blog-detail #blog-right .recent-news-card {
  2698. width: 100%;
  2699. max-width: 368px;
  2700. height: 99px;
  2701. }
  2702.  
  2703. #blog-detail #blog-right .recent-news-card img {
  2704. width: 80px;
  2705. height: 80px;
  2706. object-fit: cover;
  2707. border-radius: 6px;
  2708. }
  2709.  
  2710. #blog-detail #blog-right .recent-news-card h6 {
  2711. font-family: Montserrat, sans-serif;
  2712. font-weight: 600;
  2713. font-style: normal;
  2714. font-size: 16px;
  2715. line-height: 19.2px;
  2716. letter-spacing: 0%;
  2717. vertical-align: middle;
  2718. color: #1B1D21;
  2719. }
  2720.  
  2721. #blog-detail #blog-right .recent-news-card small {
  2722. color: #888;
  2723. font-size: 13px;
  2724. }
  2725.  
  2726. #blog-detail #blog-right .tags {
  2727. width: 100%;
  2728. max-width: 368px;
  2729. height: auto;
  2730. opacity: 1;
  2731. }
  2732.  
  2733. #blog-detail #blog-right .tags h5 {
  2734. font-family: Poppins, sans-serif;
  2735. font-weight: 600;
  2736. font-size: 24px;
  2737. color: #012E41;
  2738. margin-bottom: 10px;
  2739. }
  2740.  
  2741. #blog-detail #blog-right .tags .btn {
  2742. height: 34px;
  2743. border-radius: 6px;
  2744. border-width: 1px;
  2745. background-color: #F6F6F6;
  2746. color: #000000;
  2747. transition: all 0.3s ease;
  2748. }
  2749.  
  2750. #blog-detail #blog-right .tags .btn:hover {
  2751. background-color: #007bff;
  2752. color: #fff;
  2753. }
  2754.  
  2755. #blog-detail #blog-right .promo-content {
  2756. position: absolute;
  2757. top: 0;
  2758. left: 0;
  2759. width: 100%;
  2760. height: 100%;
  2761. background: rgba(0,0,0,0.5);
  2762. border-radius: 5px;
  2763. color: #fff;
  2764. display: flex;
  2765. flex-direction: column;
  2766. justify-content: center;
  2767. align-items: center;
  2768. text-align: center;
  2769. padding: 20px;
  2770. }
  2771.  
  2772. #blog-detail #blog-right .promo-content h5 {
  2773. font-family: Montserrat, sans-serif;
  2774. font-weight: 700;
  2775. font-size: 24px;
  2776. line-height: 24.01px;
  2777. text-align: center;
  2778. color: #FFFFFF;
  2779. margin-bottom: 8px;
  2780. }
  2781.  
  2782. #blog-detail #blog-right .promo-content p {
  2783. font-family: Montserrat, sans-serif;
  2784. font-weight: 400;
  2785. font-size: 12px;
  2786. line-height: 16px;
  2787. text-align: center;
  2788. color: #FFFFFF;
  2789. margin-bottom: 12px;
  2790. }
  2791.  
  2792. #blog-detail #blog-right .promo-content .btn {
  2793. border-radius: 6px;
  2794. font-size: 14px;
  2795. }
  2796.  
  2797. #blog-detail #blog-right .news {
  2798. margin-top: 25px;
  2799. }
  2800.  
  2801. #blog-detail #blog-right .news h5 {
  2802. font-family: Poppins, sans-serif;
  2803. font-weight: 600;
  2804. font-size: 24px;
  2805. line-height: 28.8px;
  2806. color: #012E41 !important;
  2807. margin-bottom: 12px;
  2808. }
  2809.  
  2810. #blog-detail #blog-right .news .btn {
  2811. width: 100%;
  2812. height: 45px;
  2813. border-radius: 12px;
  2814. font-family: Montserrat, sans-serif;
  2815. font-weight: 400;
  2816. font-size: 16px;
  2817. line-height: 100%;
  2818. text-align: center;
  2819. color: #fff;
  2820. }
  2821.  
  2822. #blog-detail #blog-right .input-group input {
  2823. border-radius: 6px 0 0 6px;
  2824. }
  2825.  
  2826. #blog-detail #blog-right .input-group .btn {
  2827. border-radius: 0 6px 6px 0;
  2828. }
  2829.  
  2830. /* =========================================================================
  2831. =========================================================================
  2832. DESTINATION DETAIL PAGE
  2833. =========================================================================
  2834. ========================================================================= */
  2835. /* =========================
  2836. PACKAGE SINGLE (Scoped)
  2837. ========================= */
  2838. .pkg-page .pkg-hero{
  2839. position: relative;
  2840. min-height: 520px;
  2841. display: flex;
  2842. align-items: center;
  2843. justify-content: center;
  2844. text-align: center;
  2845. padding: 140px 16px 70px; /* fixed navbar safe */
  2846. background-size: cover;
  2847. background-position: center;
  2848. background-repeat: no-repeat;
  2849. }
  2850. .pkg-page .pkg-hero-overlay{
  2851. position:absolute; inset:0;
  2852. background: rgba(0,0,0,0.45);
  2853. }
  2854. .pkg-page .pkg-hero-inner{
  2855. position: relative;
  2856. z-index: 2;
  2857. max-width: 980px;
  2858. color: #fff;
  2859. }
  2860. .pkg-page .pkg-title{
  2861. font-weight: 800;
  2862. font-size: clamp(30px, 4vw, 56px);
  2863. line-height: 1.12;
  2864. margin: 0 0 12px;
  2865. }
  2866. .pkg-page .pkg-subtitle{
  2867. font-size: clamp(14px, 1.35vw, 18px);
  2868. opacity: .95;
  2869. margin: 0 auto;
  2870. max-width: 860px;
  2871. }
  2872.  
  2873. /* Topbar */
  2874. .pkg-page .pkg-topbar{
  2875. padding: 18px 0;
  2876. background: #fff;
  2877. border-bottom: 1px solid rgba(0,0,0,0.08);
  2878. }
  2879. .pkg-page .pkg-breadcrumb{
  2880. display:flex; flex-wrap:wrap; gap:8px;
  2881. align-items:center;
  2882. font-size: 14px;
  2883. color: #6B6B6B;
  2884. margin: 0;
  2885. }
  2886. .pkg-page .pkg-breadcrumb a{
  2887. color:#111;
  2888. text-decoration:none;
  2889. }
  2890. .pkg-page .pkg-breadcrumb a:hover{ text-decoration: underline; }
  2891. .pkg-page .pkg-breadcrumb .sep{ color:#999; }
  2892. .pkg-page .pkg-breadcrumb .current{ color:#6B6B6B; }
  2893.  
  2894. .pkg-page .pkg-chips{
  2895. display:flex; flex-wrap:wrap;
  2896. gap: 8px;
  2897. margin-top: 10px;
  2898. }
  2899. .pkg-page .pkg-chip{
  2900. display:inline-flex;
  2901. align-items:center;
  2902. padding: 7px 10px;
  2903. border-radius: 999px;
  2904. background:#6b7280;
  2905. color:#fff;
  2906. font-size: 12px;
  2907. font-weight: 600;
  2908. line-height: 1;
  2909. white-space: nowrap;
  2910. }
  2911. .pkg-page .pkg-chip--tag{
  2912. background: #4b5563;
  2913. }
  2914.  
  2915. /* Actions */
  2916. .pkg-page .pkg-actions{
  2917. display:flex;
  2918. justify-content:flex-end;
  2919. gap: 12px;
  2920. }
  2921. .pkg-page .pkg-action-btn{
  2922. display:inline-flex;
  2923. align-items:center;
  2924. gap: 10px;
  2925. padding: 10px 14px;
  2926. border-radius: 10px;
  2927. border: 1px solid rgba(0,0,0,0.28);
  2928. background: #fff;
  2929. color:#111;
  2930. font-weight: 600;
  2931. }
  2932. .pkg-page .pkg-action-btn:hover{ background:#f8f9fa; }
  2933. .pkg-page .pkg-action-btn.is-active{
  2934. border-color: var(--primary-color);
  2935. color: var(--primary-color);
  2936. }
  2937. .pkg-page .pkg-action-msg{
  2938. display:block;
  2939. min-height: 18px;
  2940. margin-top: 6px;
  2941. color:#6B6B6B;
  2942. }
  2943.  
  2944. /* Sections */
  2945. .pkg-page .pkg-section{
  2946. padding: 44px 0;
  2947. background: #fff;
  2948. }
  2949. .pkg-page .pkg-section + .pkg-section{
  2950. border-top: 1px solid #f1f5f9;
  2951. }
  2952. .pkg-page .pkg-section-head{
  2953. margin-bottom: 18px;
  2954. }
  2955. .pkg-page .pkg-section-title{
  2956. font-weight: 800;
  2957. font-size: 22px;
  2958. margin: 0 0 6px;
  2959. }
  2960. .pkg-page .pkg-section-desc{
  2961. margin: 0;
  2962. color:#6B6B6B;
  2963. }
  2964.  
  2965. /* Highlight cards */
  2966. .pkg-page .pkg-hcards{
  2967. display:grid;
  2968. grid-template-columns: repeat(6, 1fr);
  2969. gap: 14px;
  2970. }
  2971. .pkg-page .pkg-hcard{
  2972. border: 1px solid rgba(0,0,0,0.10);
  2973. border-radius: 14px;
  2974. padding: 14px;
  2975. background:#fff;
  2976. }
  2977. .pkg-page .pkg-hcard .k{
  2978. font-size: 12px;
  2979. color:#6B6B6B;
  2980. margin-bottom: 6px;
  2981. }
  2982. .pkg-page .pkg-hcard .v{
  2983. font-weight: 700;
  2984. color:#111827;
  2985. }
  2986.  
  2987. /* Gallery */
  2988. .pkg-page .pkg-gallery-grid{
  2989. display:grid;
  2990. grid-template-columns: 2fr 1fr;
  2991. gap: 10px;
  2992. align-items: stretch;
  2993. }
  2994. .pkg-page .pkg-gallery-right{
  2995. display:grid;
  2996. grid-template-columns: 1fr;
  2997. gap: 10px;
  2998. }
  2999. .pkg-page .pkg-gallery-item{
  3000. display:block;
  3001. border-radius: 14px;
  3002. overflow:hidden;
  3003. }
  3004. .pkg-page .pkg-gallery-item img{
  3005. width:100%;
  3006. height:100%;
  3007. object-fit: cover;
  3008. display:block;
  3009. transition: transform .25s ease;
  3010. }
  3011. .pkg-page .pkg-gallery-item:hover img{
  3012. transform: scale(1.03);
  3013. }
  3014. .pkg-page .pkg-thumb{
  3015. border-radius: 14px;
  3016. height: 140px;
  3017. object-fit: cover;
  3018. width: 100%;
  3019. }
  3020.  
  3021. /* Blocks */
  3022. .pkg-page .pkg-block{ margin-bottom: 30px; }
  3023. .pkg-page .pkg-content{ color:#111827; }
  3024. .pkg-page .pkg-media{
  3025. width:100%;
  3026. height:auto;
  3027. border-radius: 14px;
  3028. border: 1px solid rgba(0,0,0,0.08);
  3029. }
  3030. .pkg-page .pkg-video iframe{
  3031. width:100% !important;
  3032. height:100% !important;
  3033. }
  3034.  
  3035. /* Lists */
  3036. .pkg-page .pkg-listbox{
  3037. border: 1px solid rgba(0,0,0,0.08);
  3038. border-radius: 14px;
  3039. padding: 18px;
  3040. background:#fff;
  3041. }
  3042. .pkg-page .pkg-list{
  3043. list-style:none;
  3044. padding:0;
  3045. margin:0;
  3046. }
  3047. .pkg-page .pkg-list li{
  3048. display:flex;
  3049. gap: 10px;
  3050. align-items:flex-start;
  3051. padding: 8px 0;
  3052. border-bottom: 1px dashed rgba(0,0,0,0.12);
  3053. }
  3054. .pkg-page .pkg-list li:last-child{ border-bottom:0; }
  3055. .pkg-page .pkg-list i{ margin-top: 2px; }
  3056. .pkg-page .pkg-list--danger i{ color:#dc3545; }
  3057.  
  3058. .pkg-page .pkg-bullets{
  3059. padding-left: 18px;
  3060. margin: 0;
  3061. }
  3062. .pkg-page .pkg-bullets li{ padding: 6px 0; }
  3063.  
  3064. /* Accordion */
  3065. .pkg-page .pkg-acc-item{
  3066. border: 1px solid rgba(0,0,0,0.08);
  3067. border-radius: 14px !important;
  3068. overflow:hidden;
  3069. margin-bottom: 10px;
  3070. }
  3071.  
  3072. /* Sidebar */
  3073. .pkg-page .pkg-sidebar{
  3074. position: sticky;
  3075. top: 110px;
  3076. }
  3077. .pkg-page .pkg-card{
  3078. border: 1px solid rgba(0,0,0,0.10);
  3079. border-radius: 14px;
  3080. padding: 18px;
  3081. background:#f8f9fa;
  3082. }
  3083. .pkg-page .pkg-fact{
  3084. display:flex;
  3085. justify-content:space-between;
  3086. gap: 12px;
  3087. padding: 10px 0;
  3088. border-bottom: 1px dashed rgba(0,0,0,0.15);
  3089. }
  3090. .pkg-page .pkg-fact:last-child{ border-bottom:0; }
  3091. .pkg-page .pkg-fact .k{ color:#6B6B6B; font-size: 14px; }
  3092. .pkg-page .pkg-fact .v{ font-weight: 700; color:#111; text-align:right; }
  3093.  
  3094. .pkg-page .pkg-related{
  3095. display:flex; flex-wrap:wrap; gap: 10px;
  3096. }
  3097. .pkg-page .pkg-related-pill{
  3098. display:inline-flex;
  3099. padding: 8px 12px;
  3100. border-radius: 999px;
  3101. background:#fff;
  3102. border: 1px solid rgba(0,0,0,0.12);
  3103. text-decoration:none;
  3104. color:#111;
  3105. font-weight: 600;
  3106. font-size: 13px;
  3107. }
  3108. .pkg-page .pkg-related-pill:hover{ background:#f8f9fa; }
  3109.  
  3110. /* Modal */
  3111. .pkg-page .pkg-modal{
  3112. border-radius: 14px;
  3113. overflow:hidden;
  3114. }
  3115. .pkg-page .pkg-modal-img{
  3116. width:100%;
  3117. height:auto;
  3118. display:block;
  3119. }
  3120. .pkg-page .pkg-hcard{
  3121. display: flex;
  3122. align-items: center;
  3123. gap: 12px;
  3124. }
  3125.  
  3126. .pkg-page .pkg-hicon{
  3127. width: 44px;
  3128. height: 44px;
  3129. border-radius: 12px;
  3130. display: inline-flex;
  3131. align-items: center;
  3132. justify-content: center;
  3133. background: rgba(0,0,0,0.04);
  3134. flex: 0 0 44px;
  3135. }
  3136.  
  3137. .pkg-page .pkg-hicon i{
  3138. font-size: 18px;
  3139. color: var(--primary-color);
  3140. }
  3141.  
  3142. .pkg-page .pkg-htext{
  3143. min-width: 0;
  3144. }
  3145.  
  3146. /* Responsive */
  3147. @media (max-width: 991.98px){
  3148. .pkg-page .pkg-hero{ padding-top: 120px; min-height: 420px; }
  3149. .pkg-page .pkg-actions{ justify-content:flex-start; }
  3150. .pkg-page .pkg-sidebar{ position: static; }
  3151. .pkg-page .pkg-hcards{ grid-template-columns: repeat(2, 1fr); }
  3152. .pkg-page .pkg-gallery-grid{ grid-template-columns: 1fr; }
  3153. .pkg-page .pkg-gallery-right{ grid-template-columns: 1fr 1fr; }
  3154. }
  3155.  
  3156.  
  3157.  
  3158. /* =================================================================
  3159. =================================================================
  3160. =================================================================
  3161. MOBILE VIEW
  3162. =================================================================
  3163. =================================================================
  3164. ================================================================= */
  3165.  
  3166. @media (max-width: 767px) {
  3167. body, html {
  3168. overflow-x: hidden;
  3169. }
  3170.  
  3171. /*++++++++++++++ Breadcrumb Section ++++++++++++++++++*/
  3172. #breadcrumb-section {
  3173. height: 220px;
  3174. padding-top: 70px;
  3175. }
  3176.  
  3177. #breadcrumb-section h2 {
  3178. font-size: 24px;
  3179. }
  3180.  
  3181. #breadcrumb-section p {
  3182. font-size: 14px;
  3183. padding: 0 15px;
  3184. }
  3185.  
  3186. /*===================================== Home Page ===================================== */
  3187. /*+++++++++++++++++++++++ Navbar Section ++++++++++++++++++++++++ */
  3188.  
  3189. #mainCarousel .navbar .container {
  3190. flex-wrap: nowrap;
  3191. gap: 8px;
  3192. }
  3193.  
  3194. #mainCarousel .navbar-brand img {
  3195. height: 35px;
  3196. }
  3197.  
  3198. #mainCarousel .navbar-toggler {
  3199. order: 2;
  3200. }
  3201.  
  3202. #mainCarousel .navbar .btn {
  3203. order: 3;
  3204. margin-left: auto;
  3205. }
  3206.  
  3207. #mainCarousel #navbarMenu {
  3208. position: absolute;
  3209. top: 100%;
  3210. left: 0;
  3211. width: 100%;
  3212. background-color: rgba(0,0,0,0.9);
  3213. z-index: 5;
  3214. }
  3215.  
  3216. #mainCarousel #navbarMenu ul {
  3217. flex-direction: column;
  3218. padding: 10px 0;
  3219. text-align: center;
  3220. }
  3221.  
  3222. #mainCarousel #navbarMenu li {
  3223. margin: 10px 0;
  3224. }
  3225.  
  3226. /*++++++++++++++ Main Carousel Section ++++++++++++++++*/
  3227.  
  3228. .carousel-caption p {
  3229. font-size: clamp(12px, 2vw, 16px);
  3230. line-height: 1.4;
  3231. padding: 0 10px;
  3232. }
  3233. .search-form {
  3234. flex-direction: row !important;
  3235. flex-wrap: nowrap !important;
  3236. justify-content: space-between;
  3237. gap: 0 !important;
  3238. width: 100%;
  3239. overflow-x: auto;
  3240. }
  3241. .search-form .form-item {
  3242. flex: 0 0 auto;
  3243. display: flex;
  3244. align-items: center;
  3245. min-width: 60px;
  3246. margin: 0 !important;
  3247. width: auto;
  3248. }
  3249. .search-form .form-item i {
  3250. margin-right: 0.1rem !important;
  3251. font-size: 0.7rem;
  3252. }
  3253. .search-form .form-input {
  3254. font-size: 0.65rem;
  3255. padding: 0.1rem 0.2rem;
  3256. width: 70px !important;
  3257. }
  3258. .search-form button {
  3259. font-size: 0.65rem !important;
  3260. padding: 0.1rem 0.25rem !important;
  3261. flex: 0 0 auto;
  3262. }
  3263. .form-divider {
  3264. display: none;
  3265. }
  3266. .About-section{
  3267. font-size: clamp(12px, 2vw, 16px);
  3268. line-height: 1.4;
  3269. padding: 0;
  3270. }
  3271.  
  3272. /*++++++++ Gallery Section +++++++++ */
  3273.  
  3274. .gallery-wrapper {
  3275. width: 100% !important;
  3276. height: auto !important;
  3277. display: flex;
  3278. flex-direction: column;
  3279. align-items: center;
  3280. gap: 16px;
  3281. position: relative !important;
  3282. }
  3283.  
  3284. .gallery-wrapper .img-wrapper {
  3285. position: relative !important;
  3286. width: 100% !important;
  3287. max-width: 350px;
  3288. height: auto !important;
  3289. left: auto !important;
  3290. top: auto !important;
  3291. transform: none !important;
  3292. margin: 0 auto;
  3293. }
  3294.  
  3295. .gallery-wrapper .img-wrapper.top-50.start-50.translate-middle {
  3296. position: relative !important;
  3297. width: 100% !important;
  3298. max-width: 350px;
  3299. height: auto !important;
  3300. left: auto !important;
  3301. top: 10px !important;
  3302. transform: none !important;
  3303. }
  3304.  
  3305. /* Make all images same height */
  3306. .gallery-wrapper img.gallery-img-other,
  3307. .gallery-wrapper img.gallery-img-center {
  3308. width: 100%;
  3309. height: 200px; /* choose a height that matches other images */
  3310. object-fit: cover;
  3311. border-radius: 8px;
  3312. }
  3313.  
  3314. .img-text h5 {
  3315. font-size: 12px;
  3316. }
  3317.  
  3318. .img-text p {
  3319. font-size: 10px;
  3320. }
  3321.  
  3322. .btn-custom {
  3323. margin-top: 40px;
  3324. }
  3325.  
  3326. /* ++++++++++++++++ Service Section +++++++++++++++ */
  3327.  
  3328. .service-section {
  3329. padding: 40px 10px;
  3330. text-align: center;
  3331. }
  3332.  
  3333. .service-section h5 {
  3334. font-size: 14px;
  3335. }
  3336.  
  3337. .service-section h2 {
  3338. font-size: 22px;
  3339. margin-bottom: 10px;
  3340. }
  3341.  
  3342. .service-section p {
  3343. font-size: 14px;
  3344. margin-bottom: 30px;
  3345. }
  3346.  
  3347. .service-card {
  3348. padding: 25px 15px;
  3349. margin-bottom: 20px;
  3350. }
  3351.  
  3352. .icon-circle {
  3353. width: 97px;
  3354. height: 97px;
  3355. font-size: 22px;
  3356. }
  3357.  
  3358. .service-card h4 {
  3359. font-size: 18px;
  3360. }
  3361.  
  3362. .service-card p {
  3363. font-size: 14px;
  3364. }
  3365.  
  3366. .row {
  3367. row-gap: 15px;
  3368. }
  3369. /*++++++++++++ Adventure Section ++++++++++*/
  3370.  
  3371. #adventure-section .container {
  3372. flex-direction: column;
  3373. gap: 20px;
  3374. padding: 4px 15px;
  3375. }
  3376.  
  3377. #adventure-section .left-content,
  3378. #adventure-section .right-content {
  3379. flex: 1 1 100%;
  3380. text-align: center;
  3381. }
  3382.  
  3383. #adventure-section .right-content img {
  3384. width: 100%;
  3385. height: auto;
  3386. }
  3387. #adventure-section .right-content > div {
  3388. position: static;
  3389. margin: 15px auto 0 auto;
  3390. text-align: center;
  3391. }
  3392.  
  3393. #adventure-section .left-content h2 {
  3394. font-size: clamp(22px, 5vw, 28px);
  3395. }
  3396.  
  3397. #adventure-section .left-content p {
  3398. font-size: 14px;
  3399. line-height: 1.5;
  3400. }
  3401.  
  3402. #adventure-section .row.g-4 {
  3403. display: grid;
  3404. grid-template-columns: repeat(2, 1fr);
  3405. gap: 15px;
  3406. }
  3407. .floating-card {
  3408. bottom: -10px;
  3409. left: 10px;
  3410. padding: 12px 16px;
  3411. border-radius: 8px;
  3412. font-size: 14px;
  3413. align-items: flex-start;
  3414. }
  3415.  
  3416. .floating-card span:first-child {
  3417. font-size: 18px;
  3418. }
  3419. .floating-card span:last-child {
  3420. font-size: 12px;
  3421. }
  3422. .counter-box {
  3423. padding: 1px 10px;
  3424. }
  3425. .counter-box i {
  3426. font-size: 28px;
  3427. margin-bottom: 10px;
  3428. }
  3429. .counter-number,
  3430. .counter-suffix {
  3431. font-size: 20px;
  3432. }
  3433.  
  3434. .counter-text {
  3435. font-size: 14px;
  3436. }
  3437.  
  3438. /* ++++++++++++++ testimonial section ++++++++++ */
  3439.  
  3440. #testimonial-carousel {
  3441. display: flex;
  3442. flex-wrap: nowrap;
  3443. }
  3444.  
  3445. #testimonial-carousel .col-md-4 {
  3446. flex: 0 0 100%;
  3447. max-width: 100%;
  3448. }
  3449. /* +++++++++ Booking Section ++++++++++ */
  3450. .booking-section .position-relative {
  3451. height: auto; /* let it adjust to content */
  3452. padding: 30px 15px;
  3453. display: flex;
  3454. flex-direction: column;
  3455. justify-content: center; /* vertical centering */
  3456. align-items: center; /* horizontal centering */
  3457. text-align: center;
  3458. }
  3459.  
  3460. /* Stack columns vertically on mobile */
  3461. .booking-section .row {
  3462. flex-direction: column !important;
  3463. align-items: center !important;
  3464. margin: 0 !important; /* remove Bootstrap negative margins */
  3465. }
  3466.  
  3467. .booking-section .col-md-6 {
  3468. max-width: 100% !important; /* make both columns full width */
  3469. text-align: center !important; /* center text & button */
  3470. padding: 0 15px !important; /* fix Bootstrap padding */
  3471. }
  3472.  
  3473. .booking-section h2 {
  3474. font-size: 24px;
  3475. line-height: 1.3;
  3476. margin-bottom: 15px;
  3477. margin-right: 118px;
  3478. white-space: nowrap;
  3479. }
  3480.  
  3481. .booking-section .btn-primary {
  3482. font-size: 16px;
  3483. padding: 8px 25px;
  3484. }
  3485. /*============================== ABOUT PAGE =========================*/
  3486. /*++++++++++++++++++++++ Main Navbar ++++++++++++++++++++++++++++ */
  3487. #main-navbar .container {
  3488. flex-wrap: nowrap;
  3489. gap: 8px;
  3490. }
  3491.  
  3492. #main-navbar .navbar-brand img {
  3493. height: 35px;
  3494. }
  3495.  
  3496. #main-navbar .navbar-toggler {
  3497. order: 2;
  3498. }
  3499.  
  3500. #main-navbar .btn-contact {
  3501. order: 3;
  3502. margin-left: auto;
  3503. }
  3504.  
  3505. #main-navbar .navbar-collapse {
  3506. position: absolute;
  3507. top: 100%;
  3508. left: 0;
  3509. width: 100%;
  3510. background-color: rgba(0,0,0,0.9);
  3511. z-index: 5;
  3512. }
  3513.  
  3514. #main-navbar .navbar-collapse ul {
  3515. flex-direction: column;
  3516. padding: 10px 0;
  3517. text-align: center;
  3518. }
  3519.  
  3520. #main-navbar .navbar-collapse li {
  3521. margin: 10px 0;
  3522. }
  3523. /*++++++++++++++ Connect Section +++++++++++++++++++++*/
  3524. #connect .connect-column {
  3525. width: 100% !important;
  3526. margin-right: 0 !important;
  3527. margin-bottom: 15px;
  3528. }
  3529.  
  3530. /*============================= Contact Page =============================*/
  3531. #contact-section #contact-container {
  3532. flex-direction: column;
  3533. align-items: center;
  3534. gap: 20px;
  3535. }
  3536.  
  3537. #contact-section #contact-form-box {
  3538. width: 100%;
  3539. padding: 20px;
  3540. }
  3541.  
  3542. #contact-section #contact-info-box {
  3543. width: 100%;
  3544. height: auto;
  3545. padding: 20px;
  3546. }
  3547.  
  3548. #contact-section #contact-form-box .form-row {
  3549. flex-direction: column;
  3550. gap: 15px;
  3551. }
  3552.  
  3553. #contact-section #contact-form-box #submit-btn {
  3554. width: 100%;
  3555. }
  3556.  
  3557. #contact-section #map-box iframe {
  3558. height: 300px;
  3559. }
  3560.  
  3561. /* =============================== Activities page============================ */
  3562. #activities-feature {
  3563. padding: 40px 0;
  3564. }
  3565.  
  3566. #activities-feature .filter-row {
  3567. display: flex;
  3568. overflow-x: auto;
  3569. white-space: nowrap;
  3570. scroll-behavior: smooth;
  3571. gap: 10px;
  3572. padding-bottom: 10px;
  3573. }
  3574.  
  3575. #activities-feature .filter-row .btn {
  3576. flex: 0 0 auto;
  3577. font-size: 14px;
  3578. padding: 8px 16px;
  3579. border-radius: 6px;
  3580. }
  3581.  
  3582. #activities-feature .activity-card {
  3583. flex: 0 0 100%;
  3584. max-width: 100%;
  3585. }
  3586.  
  3587. #activities-feature .feature-card {
  3588. margin-bottom: 20px;
  3589. }
  3590.  
  3591. #activities-feature .feature-card img {
  3592. height: 180px !important;
  3593. }
  3594.  
  3595. #activities-feature .p-3 h4 {
  3596. font-size: 16px;
  3597. }
  3598.  
  3599. #activities-feature .p-3 p {
  3600. font-size: 14px;
  3601. }
  3602.  
  3603. #activities-feature .btn-book {
  3604. font-size: 14px;
  3605. padding: 6px 12px;
  3606. }
  3607.  
  3608. #activities-feature .btn .btn-custom {
  3609. display: inline-block;
  3610. font-size: 14px;
  3611. padding: 8px 18px;
  3612. }
  3613.  
  3614. /* ++++++++++++++++++++++ Activities Section +++++++++++++++++++++++++++++ */
  3615. #activities-section {
  3616. padding: 40px 0;
  3617. }
  3618.  
  3619. #activities-section h2 {
  3620. font-size: 1.5rem;
  3621. }
  3622.  
  3623. #activities-section h4 {
  3624. font-size: 1rem;
  3625. }
  3626.  
  3627. #activities-section p {
  3628. font-size: 14px;
  3629. }
  3630.  
  3631. #activities-section #activities-slider {
  3632. display: flex;
  3633. overflow-x: auto;
  3634. scroll-behavior: smooth;
  3635. gap: 15px;
  3636. padding: 0 15px;
  3637. justify-content: center;
  3638. flex-direction: column;
  3639. overflow-x: visible;
  3640. }
  3641.  
  3642.  
  3643. #activities-section #activities-slider::-webkit-scrollbar {
  3644. display: none;
  3645. }
  3646.  
  3647. #activities-section .activity-card .card-img {
  3648. width: 100%;
  3649. height: 180px;
  3650. overflow: hidden;
  3651. border-radius: 8px 8px 0 0;
  3652. position: relative;
  3653. }
  3654.  
  3655. #activities-section .activity-card .card-img img {
  3656. width: 100%;
  3657. height: 100%;
  3658. object-fit: cover;
  3659. display: block;
  3660. }
  3661.  
  3662. #activities-section .activity-card {
  3663. display: flex;
  3664. flex-direction: column;
  3665. background: #fff;
  3666. border-radius: 8px;
  3667. box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  3668. overflow: hidden;
  3669. }
  3670.  
  3671. #activities-section .activity-card .card-content {
  3672. flex: 1;
  3673. padding: 12px;
  3674. display: flex;
  3675. flex-direction: column;
  3676. justify-content: space-between;
  3677. }
  3678.  
  3679. #activities-section .activity-card h5 {
  3680. font-size: 16px;
  3681. }
  3682.  
  3683. #activities-section .activity-card .location,
  3684. #activities-section .activity-card .bottom-info,
  3685. #activities-section .activity-card .rating span {
  3686. font-size: 13px;
  3687. }
  3688.  
  3689. #activities-section .activity-card .bottom-info {
  3690. flex-direction: column;
  3691. align-items: flex-start;
  3692. gap: 5px;
  3693. }
  3694.  
  3695. #activities-section .activity-card .bottom-info .price {
  3696. color: #0d6efd;
  3697. }
  3698.  
  3699. #activities-section .activity-card {
  3700. box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  3701. width: 100%;
  3702. margin-bottom: 15px;
  3703. }
  3704. #activities-section .activity-card .card-content h5,
  3705. #activities-section .activity-card .card-content p,
  3706. #activities-section .activity-card .card-content .bottom-info p {
  3707. font-size: 14px;
  3708. }
  3709. #activities-section .activity-card .rating {
  3710. font-size: 13px;
  3711. }
  3712.  
  3713. #activities-section .activity-card .bottom-info p {
  3714. display: flex;
  3715. justify-content: space-between;
  3716. }
  3717. /* ============================Blog Page =========================== */
  3718. #blog-section {
  3719. padding-top: 40px !important;
  3720. margin-top: 50px !important;
  3721. }
  3722.  
  3723. #blog-section #blog-left {
  3724. width: 100% !important;
  3725. height: auto !important;
  3726. margin: 0;
  3727. }
  3728.  
  3729. #blog-section .blog-card {
  3730. width: 100% !important;
  3731. height: auto !important;
  3732. flex-direction: column;
  3733. }
  3734.  
  3735. #blog-section .blog-card .card-img {
  3736. width: 100% !important;
  3737. height: 200px !important;
  3738. border-radius: 10px 10px 0 0;
  3739. }
  3740.  
  3741. #blog-section .blog-card .card-img img {
  3742. width: 100% !important;
  3743. height: 100% !important;
  3744. object-fit: cover;
  3745. }
  3746.  
  3747. #blog-section .blog-card .card-content {
  3748. width: 100% !important;
  3749. height: auto !important;
  3750. padding: 15px;
  3751. }
  3752.  
  3753. #blog-section #blog-right {
  3754. width: 100% !important;
  3755. height: auto !important;
  3756. margin-top: 30px;
  3757. }
  3758.  
  3759. #blog-section #blog-right .recent-news-card {
  3760. width: 100% !important;
  3761. height: auto !important;
  3762. }
  3763. #blog-section #blog-right .recent-news-card img {
  3764. width: 70px;
  3765. height: 70px;
  3766. }
  3767.  
  3768. #blog-section #blog-right .tags {
  3769. width: 100% !important;
  3770. height: auto !important;
  3771. }
  3772. #blog-section #blog-right .tags .btn {
  3773. flex: 1 1 auto;
  3774. min-width: 80px;
  3775. }
  3776.  
  3777. #blog-section #blog-right .news .btn {
  3778. width: 100% !important;
  3779. }
  3780.  
  3781. #blog-section #blog-left nav ul.pagination {
  3782. flex-wrap: wrap;
  3783. }
  3784.  
  3785. /* =========================== Destination Page ====================== */
  3786.  
  3787. #tours-page .tours-grid {
  3788. grid-template-columns: 1fr;
  3789. }
  3790. #tours-page #filters-container {
  3791. width: 100%;
  3792. }
  3793. #tours-page .tour-card {
  3794. flex-direction: column;
  3795. }
  3796. #tours-page .tour-card img {
  3797. width: 100%;
  3798. height: auto;
  3799. }
  3800. #tours-page .tour-media {
  3801. width: 320px;
  3802. }
  3803. /* ========================== Blog Detail Page ========================== */
  3804. #blog-detail {
  3805. padding: 40px 10px;
  3806. }
  3807.  
  3808. #blog-detail .blog-main-image img {
  3809. border-radius: 8px;
  3810. }
  3811.  
  3812. #blog-detail .blog-content h2 {
  3813. font-size: 1.4rem;
  3814. line-height: 1.4;
  3815. margin-bottom: 10px;
  3816. }
  3817.  
  3818. #blog-detail .blog-content p {
  3819. font-size: 0.95rem;
  3820. line-height: 1.6;
  3821. margin-bottom: 14px;
  3822. }
  3823.  
  3824. #blog-detail .subheading {
  3825. font-size: 1rem;
  3826. margin-top: 15px;
  3827. }
  3828.  
  3829. #blog-detail .info-text,
  3830. #blog-detail .author-info {
  3831. padding: 0 10px;
  3832. margin: 0;
  3833. font-size: 0.9rem;
  3834. text-align: left;
  3835. }
  3836.  
  3837. #blog-detail .blog-gallery {
  3838. display: flex;
  3839. flex-direction: column;
  3840. align-items: center;
  3841. gap: 8px;
  3842. }
  3843.  
  3844. #blog-detail .blog-gallery img {
  3845. width: 100%;
  3846. height: 200px;
  3847. object-fit: cover;
  3848. border-radius: 8px;
  3849. }
  3850.  
  3851. #blog-detail .tags-section {
  3852. margin-top: 25px;
  3853. text-align: center;
  3854. }
  3855.  
  3856. #blog-detail .tags-section .btn {
  3857. font-size: 0.85rem;
  3858. padding: 6px 10px;
  3859. }
  3860.  
  3861. #blog-detail .comments-section h5 {
  3862. font-size: 1.1rem;
  3863. }
  3864.  
  3865. #blog-detail .comment {
  3866. flex-direction: column;
  3867. align-items: flex-start;
  3868. }
  3869.  
  3870. #blog-detail .comment img {
  3871. width: 45px;
  3872. height: 45px;
  3873. }
  3874.  
  3875. #blog-detail .comment .left {
  3876. gap: 10px;
  3877. margin-bottom: 8px;
  3878. }
  3879.  
  3880. #blog-detail .reply-btn {
  3881. font-size: 0.85rem;
  3882. }
  3883.  
  3884. #blog-detail .leave-comment h4 {
  3885. font-size: 1.2rem;
  3886. }
  3887.  
  3888. #blog-detail .leave-comment input,
  3889. #blog-detail .leave-comment textarea {
  3890. font-size: 0.9rem;
  3891. }
  3892.  
  3893. #blog-detail #blog-right {
  3894. margin-top: 40px;
  3895. }
  3896.  
  3897. #blog-detail #blog-right .category {
  3898. font-size: 20px;
  3899. }
  3900.  
  3901. #blog-detail #blog-right .list-unstyled li {
  3902. font-size: 0.95rem;
  3903. line-height: 1.5;
  3904. }
  3905.  
  3906. #blog-detail #blog-right .recent-news-card {
  3907. max-width: 100%;
  3908. height: auto;
  3909. }
  3910.  
  3911. #blog-detail #blog-right .recent-news-card img {
  3912. width: 65px;
  3913. height: 65px;
  3914. }
  3915.  
  3916. #blog-detail #blog-right .recent-news-card h6 {
  3917. font-size: 0.95rem;
  3918. line-height: 1.3;
  3919. }
  3920.  
  3921. #blog-detail #blog-right .tags h5 {
  3922. font-size: 20px;
  3923. }
  3924.  
  3925. #blog-detail #blog-right .tags .btn {
  3926. font-size: 0.85rem;
  3927. padding: 5px 10px;
  3928. }
  3929.  
  3930. #blog-detail #blog-right .promo-content h5 {
  3931. font-size: 18px;
  3932. }
  3933.  
  3934. #blog-detail #blog-right .promo-content p {
  3935. font-size: 11px;
  3936. }
  3937.  
  3938. #blog-detail #blog-right .promo-content .btn {
  3939. font-size: 12px;
  3940. padding: 6px 12px;
  3941. }
  3942.  
  3943. #blog-detail #blog-right .news h5 {
  3944. font-size: 20px;
  3945. }
  3946.  
  3947. #blog-detail #blog-right .news .btn {
  3948. height: 40px;
  3949. font-size: 14px;
  3950. }
  3951.  
  3952. #blog-detail #blog-right .input-group input {
  3953. font-size: 0.9rem;
  3954. }
  3955. }
  3956.  
  3957. /* ===============================
  3958. Global Footer CTA
  3959. =============================== */
  3960. .nht-footer-cta{
  3961. position: relative;
  3962. padding: 72px 0;
  3963. color: #fff;
  3964. background:
  3965. linear-gradient(
  3966. rgba(0,0,0,var(--nht-cta-overlay,0.65)),
  3967. rgba(0,0,0,var(--nht-cta-overlay,0.65))
  3968. ),
  3969. var(--nht-cta-bg);
  3970. background-size: cover;
  3971. background-position: center;
  3972. background-repeat: no-repeat;
  3973. overflow: hidden;
  3974. }
  3975.  
  3976. .nht-footer-cta__wrap{
  3977. max-width: 980px;
  3978. margin: 0 auto;
  3979. text-align: center;
  3980. }
  3981.  
  3982. .nht-cta-eyebrow{
  3983. font-size: 12px;
  3984. font-weight: 700;
  3985. letter-spacing: .16em;
  3986. text-transform: uppercase;
  3987. opacity: .92;
  3988. margin-bottom: 10px;
  3989. }
  3990.  
  3991. .nht-cta-title{
  3992. font-size: clamp(26px, 3vw, 44px);
  3993. font-weight: 800;
  3994. line-height: 1.15;
  3995. margin: 0 0 12px;
  3996. }
  3997.  
  3998. .nht-cta-desc{
  3999. margin: 0 auto;
  4000. font-size: 16px;
  4001. line-height: 1.7;
  4002. opacity: .92;
  4003. max-width: 720px;
  4004. }
  4005.  
  4006. .nht-cta-actions{
  4007. margin-top: 22px;
  4008. display: flex;
  4009. gap: 12px;
  4010. flex-wrap: wrap;
  4011. justify-content: center;
  4012. }
  4013.  
  4014. .nht-cta-btn-primary,
  4015. .nht-cta-btn-secondary{
  4016. border-radius: 999px;
  4017. padding: 12px 26px;
  4018. font-weight: 700;
  4019. }
  4020.  
  4021. @media (max-width: 575px){
  4022. .nht-footer-cta{
  4023. padding: 56px 0;
  4024. }
  4025. .nht-cta-btn-primary,
  4026. .nht-cta-btn-secondary{
  4027. width: 100%;
  4028. justify-content: center;
  4029. }
  4030. }
  4031. /* =========================
  4032. TAXONOMY TERM INTRO (FIX)
  4033. ========================= */
  4034.  
  4035. .nht-term-intro{
  4036. padding: 48px 0;
  4037. }
  4038.  
  4039. .nht-term-intro .row{
  4040. align-items: center;
  4041. }
  4042.  
  4043. /* Prevent column overflow issues inside flex/grid */
  4044. .nht-term-intro [class*="col-"]{
  4045. position: relative;
  4046. min-width: 0;
  4047. }
  4048.  
  4049. /* Media must clip and stay inside its column */
  4050. .nht-term-intro__media{
  4051. border-radius: 18px;
  4052. overflow: hidden;
  4053. box-shadow: 0 14px 40px rgba(0,0,0,.08);
  4054. background: #f6f7f9;
  4055. }
  4056.  
  4057. /* IMPORTANT: hard reset in case any global rule sets img absolute */
  4058. .nht-term-intro__media img{
  4059. position: static !important;
  4060. display: block;
  4061. width: 100%;
  4062. height: auto;
  4063. object-fit: cover;
  4064. }
  4065.  
  4066. /* Content spacing */
  4067. .nht-term-intro__content{
  4068. padding-left: 16px;
  4069. position: relative;
  4070. z-index: 1;
  4071. }
  4072.  
  4073. .nht-term-intro__content p{
  4074. margin: 0 0 12px;
  4075. color: #3b3b3b;
  4076. line-height: 1.7;
  4077. }
  4078.  
  4079. @media (max-width: 991.98px){
  4080. .nht-term-intro{ padding: 28px 0; }
  4081. .nht-term-intro__content{
  4082. padding-left: 0;
  4083. margin-top: 14px;
  4084. }
  4085. }
  4086.  
  4087.  
  4088. /* =========================
  4089. PACKAGE GRID SECTION
  4090. ========================= */
  4091. .nht-term-packages{
  4092. padding: 40px 0 60px;
  4093. }
  4094.  
  4095.  
  4096. /* =========================
  4097. PACKAGE CARD PRO
  4098. ========================= */
  4099. .nht-pkg-card-pro{
  4100. border: 1px solid rgba(0,0,0,.08);
  4101. border-radius: 16px;
  4102. overflow: hidden;
  4103. background: #fff;
  4104. height: 100%;
  4105. display: flex;
  4106. flex-direction: column;
  4107. box-shadow: 0 10px 30px rgba(0,0,0,.05);
  4108. transition: transform .2s ease, box-shadow .2s ease;
  4109. }
  4110.  
  4111. .nht-pkg-card-pro:hover{
  4112. transform: translateY(-2px);
  4113. box-shadow: 0 16px 45px rgba(0,0,0,.10);
  4114. }
  4115.  
  4116. .nht-pkg-card-pro__thumb{
  4117. position: relative;
  4118. display: block;
  4119. height: 210px;
  4120. overflow: hidden;
  4121. }
  4122.  
  4123. /* Hard reset in case any global rule affects images */
  4124. .nht-pkg-card-pro__thumb img{
  4125. position: static !important;
  4126. width: 100%;
  4127. height: 100%;
  4128. object-fit: cover;
  4129. display: block;
  4130. }
  4131.  
  4132. .nht-pkg-card-pro__thumbOverlay{
  4133. position: absolute;
  4134. inset: 0;
  4135. background: linear-gradient(180deg, rgba(0,0,0,.00) 40%, rgba(0,0,0,.45) 100%);
  4136. }
  4137.  
  4138. /* Scope badge to card to avoid conflicts site-wide */
  4139. .nht-pkg-card-pro .nht-badge{
  4140. position: absolute;
  4141. left: 12px;
  4142. top: 12px;
  4143. display: inline-flex;
  4144. align-items: center;
  4145. gap: 6px;
  4146. padding: 7px 10px;
  4147. border-radius: 999px;
  4148. font-size: 12px;
  4149. font-weight: 700;
  4150. line-height: 1;
  4151. background: #0d6efd;
  4152. color: #fff;
  4153. box-shadow: 0 10px 24px rgba(13,110,253,.25);
  4154. z-index: 2;
  4155. }
  4156.  
  4157. .nht-pkg-card-pro__body{
  4158. padding: 14px 14px 16px;
  4159. display: flex;
  4160. flex-direction: column;
  4161. flex: 1;
  4162. min-width: 0;
  4163. }
  4164.  
  4165. .nht-pkg-card-pro__title{
  4166. font-size: 16px;
  4167. font-weight: 800;
  4168. line-height: 1.25;
  4169. margin: 0 0 10px;
  4170. }
  4171.  
  4172. .nht-pkg-card-pro__title a{
  4173. color: inherit;
  4174. text-decoration: none;
  4175. }
  4176.  
  4177. .nht-pkg-card-pro__title a:hover{
  4178. text-decoration: underline;
  4179. }
  4180.  
  4181. .nht-pkg-card-pro__meta{
  4182. display: flex;
  4183. gap: 12px;
  4184. flex-wrap: wrap;
  4185. color: #6B6B6B;
  4186. font-size: 13px;
  4187. margin-bottom: 14px;
  4188. }
  4189.  
  4190. .nht-meta{
  4191. display: inline-flex;
  4192. align-items: center;
  4193. gap: 6px;
  4194. }
  4195.  
  4196. .nht-meta i{
  4197. opacity: .9;
  4198. }
  4199.  
  4200. .nht-pkg-card-pro__footer{
  4201. margin-top: auto;
  4202. display: flex;
  4203. align-items: center;
  4204. justify-content: space-between;
  4205. gap: 10px;
  4206. padding-top: 12px;
  4207. border-top: 1px solid rgba(0,0,0,.06);
  4208. }
  4209.  
  4210. .nht-pkg-card-pro__price{
  4211. display: inline-flex;
  4212. align-items: center;
  4213. gap: 6px;
  4214. font-weight: 800;
  4215. color: #111;
  4216. font-size: 14px;
  4217. }
  4218.  
  4219.  
  4220. /* =========================
  4221. PAGINATION
  4222. ========================= */
  4223. .nht-pagination{
  4224. display: flex;
  4225. justify-content: center;
  4226. }
  4227.  
  4228. .nht-pagination__list{
  4229. list-style: none;
  4230. padding: 0;
  4231. margin: 0;
  4232. display: flex;
  4233. gap: 8px;
  4234. flex-wrap: wrap;
  4235. }
  4236.  
  4237. .nht-pagination__item a,
  4238. .nht-pagination__item span{
  4239. display: inline-flex;
  4240. align-items: center;
  4241. justify-content: center;
  4242. min-width: 42px;
  4243. height: 40px;
  4244. padding: 0 12px;
  4245. border-radius: 12px;
  4246. border: 1px solid rgba(0,0,0,.10);
  4247. text-decoration: none;
  4248. color: #111;
  4249. background: #fff;
  4250. }
  4251.  
  4252. .nht-pagination__item a:hover{
  4253. border-color: rgba(13,110,253,.35);
  4254. background: rgba(13,110,253,.06);
  4255. }
  4256.  
  4257. .nht-pagination__item .current{
  4258. background: rgba(13,110,253,.12);
  4259. border-color: rgba(13,110,253,.35);
  4260. font-weight: 900;
  4261. }
  4262.  
  4263. /* ====================================================================
  4264. TOP CONTACT BAR
  4265. ==================================================================== */
  4266.  
  4267. .nht-top-bar {
  4268. padding: 8px 15px;
  4269. color: #fff;
  4270. }
  4271.  
  4272. .nht-top-inner {
  4273. display: flex;
  4274. align-items: center;
  4275. gap: 12px;
  4276. }
  4277.  
  4278. .nht-icon-box {
  4279. width: 38px;
  4280. height: 38px;
  4281. background: rgba(255,255,255,0.2);
  4282. border-radius: 50%;
  4283. display: flex;
  4284. justify-content: center;
  4285. align-items: center;
  4286. }
  4287.  
  4288. .nht-contact-info {
  4289. display: flex;
  4290. flex-direction: column;
  4291. }
  4292.  
  4293. /* Dropdown Container */
  4294. .nht-dropdown {
  4295. position: relative;
  4296. cursor: pointer;
  4297. user-select: none;
  4298. }
  4299.  
  4300. .nht-dropdown-trigger {
  4301. display: flex;
  4302. align-items: center;
  4303. gap: 8px;
  4304. font-size: 14px;
  4305. padding-bottom: 2px;
  4306. }
  4307.  
  4308. .nht-current-flag {
  4309. width: 18px;
  4310. height: auto;
  4311. }
  4312.  
  4313. .nht-arrow {
  4314. font-size: 10px;
  4315. transition: 0.3s;
  4316. }
  4317.  
  4318. .nht-dropdown-list {
  4319. position: absolute;
  4320. top: 110%;
  4321. left: 0;
  4322. background: #fff;
  4323. color: #333;
  4324. list-style: none;
  4325. padding: 5px 0;
  4326. margin: 0;
  4327. min-width: 150px;
  4328. border-radius: 4px;
  4329. box-shadow: 0 5px 15px rgba(0,0,0,0.3);
  4330. display: none; /* Initially hidden */
  4331. z-index: 9999;
  4332. }
  4333.  
  4334. .nht-dropdown.is-active .nht-dropdown-list {
  4335. display: block;
  4336. }
  4337.  
  4338. .nht-dropdown.is-active .nht-arrow {
  4339. transform: rotate(180deg);
  4340. }
  4341.  
  4342. .nht-option {
  4343. padding: 10px 15px;
  4344. display: flex;
  4345. align-items: center;
  4346. gap: 10px;
  4347. font-size: 14px;
  4348. transition: 0.2s;
  4349. }
  4350.  
  4351. .nht-option:hover {
  4352. background: #f0f0f0;
  4353. }
  4354.  
  4355. .nht-option img {
  4356. width: 20px;
  4357. }
  4358.  
  4359. .nht-phone-number {
  4360. color: #fff !important;
  4361. font-weight: bold;
  4362. text-decoration: none;
  4363. font-size: 15px;
  4364. }
  4365. .nht-top-bar {
  4366. display: block;
  4367. }
  4368.  
  4369. @media (max-width: 575.98px) {
  4370. .nht-top-bar {
  4371. display: none !important;
  4372. }
  4373. }
  4374.  
  4375. /*-- Association --*/
  4376. .footer-associations {
  4377. display: flex;
  4378. gap: 12px;
  4379. }
  4380.  
  4381. .footer-associations li {
  4382. width: 56px;
  4383. height: 56px;
  4384. border-radius: 8px;
  4385. display: flex;
  4386. align-items: center;
  4387. justify-content: center;
  4388. border-color: #ffffff;
  4389. background: rgba(255, 255, 255, 0.08);
  4390. transition: all 0.3s ease;
  4391. }
  4392.  
  4393. .footer-associations img {
  4394. max-width: 38px;
  4395. max-height: 38px;
  4396. filter: grayscale(0%);
  4397. opacity: 1;
  4398. transform: scale(1.08);
  4399. }
  4400. @media (max-width: 768px) {
  4401. .footer-associations {
  4402. justify-content: center;
  4403. }
  4404. }
  4405.  
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!