/* ==========================================================
   UBUD ADVENTURES
   GLOBAL CSS
========================================================== */

/* ==========================================================
   ROOT VARIABLES
========================================================== */

:root {

   /* ======================================================
       BRAND
    ====================================================== */

   --primary: #F4B400;
   --primary-hover: #F8C63A;

   --secondary: #2F5D44;
   --secondary-hover: #284736;
   --secondary-light: #EDF5EF;

   --accent: #F4B400;

   /* ======================================================
       TEXT
    ====================================================== */

   --heading: #111827;

   --text: #374151;
   --muted: #6B7280;
   --light-text: #9CA3AF;

   --white: #FFFFFF;

   /* ======================================================
       BACKGROUND
    ====================================================== */

   --bg: #F8FAFC;
   --bg-soft: #F5F7FB;

   --surface: #FFFFFF;
   --surface-soft: #FCFCFD;

   --surface-green: #EDF5EF;
   --surface-warning: #FFF8E8;

   /* ======================================================
       BORDER
    ====================================================== */

   --border: #E5E7EB;
   --border-light: #EEF2F7;
   --divider: #F1F5F9;

   /* ======================================================
       STATUS
    ====================================================== */

   --success: #16A34A;
   --success-bg: #ECFDF3;

   --warning: #B7791F;
   --warning-bg: #FFF8E8;

   --danger: #DC2626;
   --danger-bg: #FEF2F2;

   --info: #2563EB;
   --info-bg: #EFF6FF;

   /* ======================================================
       HERO / OVERLAY
    ====================================================== */

   --overlay-dark: rgba(15, 23, 42, .88);
   --overlay-medium: rgba(15, 23, 42, .65);
   --overlay-light: rgba(15, 23, 42, .30);

   /* ======================================================
       RADIUS
    ====================================================== */

   --radius-xs: 8px;
   --radius-sm: 12px;
   --radius-md: 18px;
   --radius-lg: 24px;
   --radius-xl: 32px;
   --radius-2xl: 40px;
   --radius-pill: 999px;

   /* ======================================================
       SHADOW
    ====================================================== */

   --shadow-xs:
      0 2px 8px rgba(15, 23, 42, .04);

   --shadow-sm:
      0 8px 24px rgba(15, 23, 42, .05);

   --shadow:
      0 14px 36px rgba(15, 23, 42, .08);

   --shadow-lg:
      0 24px 60px rgba(15, 23, 42, .12);

   /* ======================================================
       SPACING
    ====================================================== */

   --space-xs: .5rem;
   --space-sm: .75rem;
   --space-md: 1rem;
   --space-lg: 1.5rem;
   --space-xl: 2rem;
   --space-2xl: 3rem;
   --space-3xl: 4rem;
   --space-4xl: 5rem;
   --space-5xl: 6rem;

   /* ======================================================
       LAYOUT
    ====================================================== */

   --container: 1320px;
   --sidebar-width: 320px;

   /* ======================================================
       EFFECT
    ====================================================== */

   --blur: 18px;

   --transition: .3s ease;
   --transition-slow: .45s ease;

}


/* ==========================================================
   RESET
========================================================== */

*,
*::before,
*::after {

   margin: 0;
   padding: 0;
   box-sizing: border-box;

}

/* ==========================================================
   HTML
========================================================== */

html {

   scroll-behavior: smooth;
   scroll-padding-top: 100px;
   overflow-x: hidden;

}

/* ==========================================================
   BODY
========================================================== */

body {

   font-family: "Plus Jakarta Sans", sans-serif;

   background: var(--bg);

   color: var(--text);

   overflow-x: hidden;

   text-rendering: optimizeLegibility;

   -webkit-font-smoothing: antialiased;

   -moz-osx-font-smoothing: grayscale;

}

/* ==========================================================
   MAIN
========================================================== */

main {

   display: block;

   width: 100%;

   overflow: hidden;

}

/* ==========================================================
   CONTAINER
========================================================== */

.container {

   max-width: var(--container);

}

/* ==========================================================
   SECTION
========================================================== */

section {

   position: relative;

}

/* ==========================================================
   IMAGE
========================================================== */

img {

   display: block;

   max-width: 100%;

   height: auto;

   user-select: none;

   -webkit-user-drag: none;

}

/* ==========================================================
   SVG
========================================================== */

svg {

   display: block;

   max-width: 100%;

}

/* ==========================================================
   LINKS
========================================================== */

a {

   color: inherit;

   text-decoration: none;

   transition: var(--transition);

}

/* ==========================================================
   BUTTON
========================================================== */

button {

   border: 0;

   background: none;

   font: inherit;

   cursor: pointer;

   transition: var(--transition);

}

/* ==========================================================
   FORM
========================================================== */

input,
select,
textarea {

   font: inherit;

   color: inherit;

   outline: none;

   box-shadow: none !important;

   background: transparent;

}

/* ==========================================================
   LIST
========================================================== */

ul,
ol {

   list-style: none;

   margin: 0;

   padding: 0;

}

/* ==========================================================
   ACCESSIBILITY
========================================================== */

:focus-visible {

   outline: 2px solid var(--primary);

   outline-offset: 3px;

}

/* ==========================================================
   TEXT SELECTION
========================================================== */

::selection {

   background: rgba(244, 180, 0, .22);

   color: var(--dark);

}

/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width:991.98px) {

   .container {

      padding-left: 20px;

      padding-right: 20px;

   }

}

@media (max-width:767.98px) {

   html {

      scroll-padding-top: 80px;

   }

   .container {

      padding-left: 16px;

      padding-right: 16px;

   }

}

/* ==========================================================
   BLOG
========================================================== */

/* ==========================================================
   BLOG LAYOUT
========================================================== */

.ua-blog {

   padding: var(--space-4xl) 0;

   background: var(--bg);

}

.ua-blog-layout {

   display: grid;

   grid-template-columns:
      minmax(0, 1fr) var(--sidebar-width);

   gap: 72px;

   align-items: start;

}

.ua-blog-main {

   min-width: 0;

}

.ua-blog-sidebar {

   position: sticky;

   top: 110px;

}

/* ==========================================================
   SECTION
========================================================== */

.ua-section {

   margin-bottom: var(--space-3xl);

}

.ua-section:last-child {

   margin-bottom: 0;

}

/* ==========================================================
   SECTION HEADER
========================================================== */

.ua-section-header {

   margin-bottom: var(--space-2xl);

}

.ua-badge {

   display: inline-flex;

   align-items: center;

   gap: .6rem;

   padding: .55rem 1rem;

   border-radius: var(--radius-pill);

   background: var(--surface-green);

   color: var(--secondary);

   font-size: .78rem;

   font-weight: 700;

   letter-spacing: .08em;

   text-transform: uppercase;

}

.ua-title {

   margin: 1rem 0;

   color: var(--heading);

   font-size: clamp(2rem, 5vw, 3.4rem);

   line-height: 1.1;

   letter-spacing: -.04em;

   font-weight: 800;

}

.ua-description {

   max-width: 760px;

   color: var(--muted);

   font-size: 1.08rem;

   line-height: 1.9;

}

/* ==========================================================
   CONTENT
========================================================== */

.ua-content {

   margin-top: 2rem;

}

.ua-category {

   display: inline-flex;

   align-items: center;

   margin-bottom: 1rem;

   color: var(--secondary);

   font-size: .8rem;

   font-weight: 700;

   letter-spacing: .08em;

   text-transform: uppercase;

}

.ua-heading {

   margin-bottom: 1.2rem;

   color: var(--heading);

   font-size: clamp(1.8rem, 4vw, 2.8rem);

   line-height: 1.15;

   font-weight: 800;

}

.ua-text {

   color: var(--text);

   font-size: 1.05rem;

   line-height: 1.9;

}

/* ==========================================================
   MEDIA
========================================================== */

.ua-media {

   overflow: hidden;

   border-radius: var(--radius-lg);

   box-shadow: var(--shadow-sm);

}

.ua-media img {

   width: 100%;

   aspect-ratio: 16/9;

   object-fit: cover;

   transition: var(--transition-slow);

}

@media (min-width:992px) {

   .ua-media:hover img {

      transform: scale(1.04);

   }

}

/* ==========================================================
   WIDGET
========================================================== */

.ua-widget {

   padding: 2rem;

   border: 1px solid var(--border);

   border-radius: var(--radius-lg);

   background: var(--surface);

   box-shadow: var(--shadow-sm);

}

.ua-widget-label {

   display: inline-flex;

   align-items: center;

   padding: .45rem .9rem;

   border-radius: 999px;

   background: var(--surface-warning);

   color: var(--warning);

   font-size: .72rem;

   font-weight: 700;

   letter-spacing: .08em;

   text-transform: uppercase;

}

.ua-widget-title {

   margin: 1.3rem 0 .8rem;

   color: var(--heading);

   font-size: 1.5rem;

   line-height: 1.2;

   font-weight: 800;

}

.ua-widget-description {

   color: var(--muted);

   line-height: 1.8;

}

.ua-widget-button {

   display: flex;

   align-items: center;

   justify-content: center;

   gap: .75rem;

   width: 100%;

   height: 54px;

   margin-top: 1.8rem;

   border-radius: 999px;

   background: var(--secondary);

   color: #fff;

   font-weight: 700;

   transition: var(--transition);

}

.ua-widget-button:hover {

   background: var(--secondary-hover);

   color: #fff;

   transform: translateY(-2px);

}

.ua-widget-button i {

   transition: var(--transition);

}

.ua-widget-button:hover i {

   transform: translateX(4px);

}

/* ==========================================================
   BLOG RESPONSIVE
========================================================== */

@media (max-width:991.98px) {

   .ua-blog {

      padding: var(--space-3xl) 0;

   }

   .ua-blog-layout {

      grid-template-columns: 1fr;

      gap: var(--space-2xl);

   }

   .ua-blog-sidebar {

      position: static;

   }

}

@media (max-width:767.98px) {

   .ua-blog {

      padding: var(--space-2xl) 0;

   }

   .ua-section {

      margin-bottom: var(--space-2xl);

   }

   .ua-title {

      font-size: 2rem;

   }

   .ua-heading {

      font-size: 1.7rem;

   }

   .ua-description,

   .ua-text {

      font-size: 1rem;

      line-height: 1.8;

   }

   .ua-widget {

      padding: 1.5rem;

   }

}

/* ==========================================================
   RELATED TOURS
========================================================== */

.ua-rec {

   position: relative;

   padding: 34px 0;

   background:

      linear-gradient(180deg, #f8fbfc 0%, #eef5f7 100%);

   overflow: hidden;

}

.ua-rec::before {

   content: "";

   position: absolute;

   top: -120px;

   right: -120px;

   width: 320px;

   height: 320px;

   border-radius: 50%;

   background: rgba(15, 118, 110, .05);

}

.ua-rec::after {

   content: "";

   position: absolute;

   bottom: -180px;

   left: -180px;

   width: 420px;

   height: 420px;

   border-radius: 50%;

   background: rgba(15, 118, 110, .04);

}

.ua-rec .container {

   position: relative;

   z-index: 2;

}

/* ==========================================================
   HEADER
========================================================== */

.ua-rec-head {

   text-align: center;

   margin-bottom: 55px;

}

.ua-rec-badge {

   display: inline-flex;

   align-items: center;

   padding: .55rem 1.1rem;

   border-radius: 999px;

   background: #dff5ef;

   color: #0f766e;

   font-size: .8rem;

   font-weight: 700;

   letter-spacing: .05em;

   text-transform: uppercase;

   margin-bottom: 18px;

}

.ua-rec-title {

   font-size: 2.25rem;

   font-weight: 800;

   color: #183153;

   margin-bottom: 14px;

}

.ua-rec-subtitle {

   max-width: 760px;

   margin: auto;

   color: #64748b;

   font-size: 1.05rem;

   line-height: 1.8;

}

/* ==========================================================
   CARD
========================================================== */

.ua-rec-item {

   position: relative;

   overflow: hidden;

   border-radius: 24px;

   background: #fff;

   transition: .35s;

   box-shadow:

      0 10px 35px rgba(15, 23, 42, .07);

   margin-bottom: 28px;

}

.ua-rec-item:hover {

   transform: translateY(-6px);

   box-shadow:

      0 22px 55px rgba(15, 23, 42, .12);

}

.ua-rec-overlay {

   position: absolute;

   inset: 0;

   z-index: 10;

}

/* ==========================================================
   THUMBNAIL
========================================================== */

.ua-rec-thumb {

   position: relative;

   height: 100%;

   min-height: 250px;

   overflow: hidden;

   background: #edf2f7;

}

.ua-rec-thumb img {

   width: 100%;

   height: 100%;

   object-fit: cover;

   display: block;

   transition: transform .6s ease;

}

.ua-rec-item:hover .ua-rec-thumb img {

   transform: scale(1.08);

}

/* ==========================================================
   IMAGE OVERLAY
========================================================== */

.ua-rec-thumb::after {

   content: "";

   position: absolute;

   inset: 0;

   background: linear-gradient(to top,
         rgba(15, 23, 42, .60) 0%,
         rgba(15, 23, 42, .15) 45%,
         rgba(15, 23, 42, 0) 100%);

}

/* ==========================================================
   BADGE
========================================================== */

.ua-rec-thumb .ua-rec-badge {

   position: absolute;

   top: 18px;

   left: 18px;

   z-index: 3;

   background: #0f766e;

   color: #fff;

   padding: .55rem 1rem;

   border-radius: 999px;

   font-size: .8rem;

   font-weight: 700;

   box-shadow: 0 10px 25px rgba(15, 118, 110, .30);

}

/* ==========================================================
   DURATION
========================================================== */

.ua-rec-time {

   position: absolute;

   left: 18px;

   bottom: 18px;

   z-index: 3;

   display: inline-flex;

   align-items: center;

   gap: 8px;

   background: rgba(255, 255, 255, .96);

   backdrop-filter: blur(10px);

   border-radius: 999px;

   padding: .65rem 1rem;

   font-size: .85rem;

   font-weight: 700;

   color: #183153;

   box-shadow: 0 8px 20px rgba(15, 23, 42, .12);

}

.ua-rec-time i {

   color: #0f766e;

}

/* ==========================================================
   IMAGE RADIUS
========================================================== */

.ua-rec-thumb img {

   border-radius: 24px 0 0 24px;

}

@media(max-width:991.98px) {

   .ua-rec-thumb img {

      border-radius: 24px 24px 0 0;

   }

   .ua-rec-thumb {

      min-height: 230px;

   }

}

/* ==========================================================
   CONTENT
========================================================== */

.ua-rec-content {

   display: flex;

   flex-direction: column;

   height: 100%;

   padding: 28px;

}

/* ==========================================================
   META
========================================================== */

.ua-rec-meta {

   display: flex;

   flex-wrap: wrap;

   align-items: center;

   gap: 18px;

   margin-bottom: 16px;

   font-size: .9rem;

   color: #64748b;

}

.ua-rec-meta span {

   display: flex;

   align-items: center;

   gap: 6px;

   line-height: 1;

}

.ua-rec-meta span:first-child {

   color: #f59e0b;

   font-weight: 700;

}

.ua-rec-meta i {

   color: #0f766e;

}

/* ==========================================================
   TITLE
========================================================== */

.ua-rec-content h3 {

   margin: 0 0 14px;

   font-size: 1.7rem;

   font-weight: 800;

   color: #183153;

   line-height: 1.35;

   transition: .3s;

}

.ua-rec-item:hover h3 {

   color: #0f766e;

}

/* ==========================================================
   DESCRIPTION
========================================================== */

.ua-rec-content p {

   margin: 0;

   color: #64748b;

   font-size: 1rem;

   line-height: 1.8;

   display: -webkit-box;

   -webkit-line-clamp: 2;

   -webkit-box-orient: vertical;

   overflow: hidden;

}

/* ==========================================================
   SPACER
========================================================== */

.ua-rec-content p {

   margin-bottom: auto;

}

/* ==========================================================
   FOOTER
========================================================== */

.ua-rec-bottom {

   display: flex;

   justify-content: space-between;

   align-items: flex-end;

   gap: 25px;

   margin-top: 28px;

   padding-top: 24px;

   border-top: 1px solid #edf2f7;

}

/* ==========================================================
   PRICE
========================================================== */

.ua-rec-bottom small {

   display: block;

   margin-bottom: 6px;

   font-size: .78rem;

   color: #94a3b8;

   letter-spacing: .06em;

   text-transform: uppercase;

}

.ua-rec-bottom strong {

   display: block;

   font-size: 1.65rem;

   font-weight: 800;

   color: #0f766e;

   line-height: 1.1;

}

/* ==========================================================
   BUTTON
========================================================== */

.ua-rec-btn {

   display: inline-flex;

   align-items: center;

   gap: 10px;

   padding: 14px 24px;

   border-radius: 999px;

   background: #0f766e;

   color: #fff;

   font-weight: 700;

   transition: .3s;

   white-space: nowrap;

}

.ua-rec-btn i {

   transition: .3s;

}

.ua-rec-item:hover .ua-rec-btn {

   background: #115e59;

}

.ua-rec-item:hover .ua-rec-btn i {

   transform: translateX(6px);

}

/* ==========================================================
   CONTENT
========================================================== */

.ua-rec-content {

   display: flex;

   flex-direction: column;

   height: 100%;

   padding: 28px;

}

/* ==========================================================
   META
========================================================== */

.ua-rec-meta {

   display: flex;

   flex-wrap: wrap;

   align-items: center;

   gap: 18px;

   margin-bottom: 16px;

   font-size: .9rem;

   color: #64748b;

}

.ua-rec-meta span {

   display: flex;

   align-items: center;

   gap: 6px;

   line-height: 1;

}

.ua-rec-meta span:first-child {

   color: #f59e0b;

   font-weight: 700;

}

.ua-rec-meta i {

   color: #0f766e;

}

/* ==========================================================
   TITLE
========================================================== */

.ua-rec-content h3 {

   margin: 0 0 14px;

   font-size: 1.7rem;

   font-weight: 800;

   color: #183153;

   line-height: 1.35;

   transition: .3s;

}

.ua-rec-item:hover h3 {

   color: #0f766e;

}

/* ==========================================================
   DESCRIPTION
========================================================== */

.ua-rec-content p {

   margin: 0;

   color: #64748b;

   font-size: 1rem;

   line-height: 1.8;

   display: -webkit-box;

   -webkit-line-clamp: 2;

   -webkit-box-orient: vertical;

   overflow: hidden;

}

/* ==========================================================
   SPACER
========================================================== */

.ua-rec-content p {

   margin-bottom: auto;

}

/* ==========================================================
   FOOTER
========================================================== */

.ua-rec-bottom {

   display: flex;

   justify-content: space-between;

   align-items: flex-end;

   gap: 25px;

   margin-top: 28px;

   padding-top: 24px;

   border-top: 1px solid #edf2f7;

}

/* ==========================================================
   PRICE
========================================================== */

.ua-rec-bottom small {

   display: block;

   margin-bottom: 6px;

   font-size: .78rem;

   color: #94a3b8;

   letter-spacing: .06em;

   text-transform: uppercase;

}

.ua-rec-bottom strong {

   display: block;

   font-size: 1.65rem;

   font-weight: 800;

   color: #0f766e;

   line-height: 1.1;

}

/* ==========================================================
   BUTTON
========================================================== */

.ua-rec-btn {

   display: inline-flex;

   align-items: center;

   gap: 10px;

   padding: 14px 24px;

   border-radius: 999px;

   background: #0f766e;

   color: #fff;

   font-weight: 700;

   transition: .3s;

   white-space: nowrap;

}

.ua-rec-btn i {

   transition: .3s;

}

.ua-rec-item:hover .ua-rec-btn {

   background: #115e59;

}

.ua-rec-item:hover .ua-rec-btn i {

   transform: translateX(6px);

}

/* ==========================================================
   HOVER EFFECT
========================================================== */

.ua-rec-item:hover {

   border-color: rgba(15, 118, 110, .18);

}

.ua-rec-item:hover .ua-rec-thumb img {

   transform: scale(1.08);

}

.ua-rec-item:hover h3 {

   color: #0f766e;

}

/* ==========================================================
   IMAGE LOADING
========================================================== */

.ua-rec-thumb {

   background: #eef2f7;

}

.ua-rec-thumb img {

   backface-visibility: hidden;

   -webkit-backface-visibility: hidden;

}

/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width:1199.98px) {

   .ua-rec {

      padding: 80px 0;

   }

   .ua-rec-content {

      padding: 24px;

   }

   .ua-rec-content h3 {

      font-size: 1.45rem;

   }

}

@media (max-width:991.98px) {

   .ua-rec {

      padding: 70px 0;

   }

   .ua-rec-head {

      margin-bottom: 40px;

   }

   .ua-rec-title {

      font-size: 2rem;

   }

   .ua-rec-thumb {

      min-height: 260px;

   }

   .ua-rec-content {

      padding: 22px;

   }

   .ua-rec-bottom {

      margin-top: 24px;

   }

}

@media (max-width:767.98px) {

   .ua-rec {

      padding: 60px 0;

   }

   .ua-rec-head {

      margin-bottom: 34px;

   }

   .ua-rec-title {

      font-size: 1.7rem;

   }

   .ua-rec-subtitle {

      font-size: .95rem;

      line-height: 1.7;

   }

   .ua-rec-thumb {

      min-height: 220px;

   }

   .ua-rec-content {

      padding: 20px;

   }

   .ua-rec-content h3 {

      font-size: 1.3rem;

   }

   .ua-rec-meta {

      gap: 12px;

      font-size: .85rem;

   }

   .ua-rec-bottom {

      flex-direction: column;

      align-items: flex-start;

   }

   .ua-rec-btn {

      width: 100%;

      justify-content: center;

   }

}

@media (max-width:575.98px) {

   .ua-rec {

      padding: 50px 0;

   }

   .ua-rec-title {

      font-size: 1.5rem;

   }

   .ua-rec-thumb {

      min-height: 200px;

   }

   .ua-rec-content {

      padding: 18px;

   }

   .ua-rec-content h3 {

      font-size: 1.2rem;

      line-height: 1.4;

   }

   .ua-rec-content p {

      font-size: .92rem;

   }

   .ua-rec-bottom strong {

      font-size: 1.4rem;

   }

   .ua-rec-btn {

      padding: 12px 18px;

      font-size: .92rem;

   }

}

/* ==========================================================
   SMOOTH TRANSITION
========================================================== */

.ua-rec-item,
.ua-rec-thumb img,
.ua-rec-btn,
.ua-rec-content h3 {

   transition: all .35s ease;

}

/* ==========================================================
   MOBILE LAYOUT
========================================================== */

@media (max-width:767.98px) {

   .ua-rec-item .row {

      flex-direction: column;

   }

   .ua-rec-thumb {

      min-height: 220px;

   }

   .ua-rec-thumb img {

      border-radius: 24px 24px 0 0;

   }

   .ua-rec-content {

      padding: 20px;

   }

   .ua-rec-meta {

      gap: 10px;

      font-size: .85rem;

      margin-bottom: 14px;

   }

   .ua-rec-content h3 {

      font-size: 1.25rem;

   }

   .ua-rec-content p {

      -webkit-line-clamp: 3;

   }

   .ua-rec-bottom {

      flex-direction: column;

      align-items: flex-start;

      gap: 18px;

   }

   .ua-rec-btn {

      width: 100%;

      justify-content: center;

      padding: 14px 18px;

   }

}