:root {
  --teal: #fcdc88;
  --main-brown: #77421b;
  --dark-brown: #482411;
  --darkest-brown: #180a02;
  --mid-brown: #5f3013;
  --mid-black: #080706;
  --faded-white: rgba(255, 255, 255, 0.7);
  --faded-white2: rgba(255, 255, 255, 0.8);
  --white: #fff;
  --brown-white: #fffceb;
  --green: #1a8a10;


  --ff-poppins: "Poppins", sans-serif;
  --ff-montserrat: "Montserrat", sans-serif;

  --fs-1: calc(20px + 3.5vw);
  --fs-2: calc(14px + 1.6vw);
  --fs-3: calc(12px + 0.45vw);
  --fs-4: 18px;
  --fs-5: 17px;
  --fs-6: 16px;
  --fs-7: 15px;
  --fs-8: 14px;

  --fw-500: 500;
  --fw-600: 600;
  --fw-700: 700;
  --fw-800: 800;


  --transition: 0.25s ease-in-out;


  --section-padding: 60px;

  --radius-15: 15px;
  --radius-25: 25px;

}

/* Description Section */
.info-section {
    background: #f2f2f2;
    padding: 60px 0;
}

.info-section h3 {
    font-weight: 600;
    margin-bottom: 20px;
}

.info-section p {
    color: #444;
    line-height: 1.7;
}

.info-section ul {
    padding-left: 1.2rem;
}

.info-section ul li {
    margin-bottom: 10px;
}

.view-less {
    color: #c77c2b;
    font-weight: 500;
    cursor: pointer;
}

/* Related Tours */
.tour-card {
    border: none;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(197, 86, 35, 0.3);
    transition: 0.3s ease;
}

.tour-card:hover {
    transform: translateY(-5px);
}

.tour-card img {
    height: 220px;
    object-fit: cover;
}

.tour-card .card-body {
    padding: 20px;
}

.tour-card .card-title{
  min-height: 48px;
  line-height: 1.2;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--main-brown);
}

.price {
    color: #c77c2b;
    font-weight: 600;
}

.more-info {
    text-decoration: none;
    font-weight: 500;
    color: var(--mid-brown);
}

.more-info:hover {
    color: #c77c2b;
}

.todoicons i{
    color: var(--green);
    padding-right:10px;
}
.todoicons2 i{
    color: red;
    padding-right:10px;
}




/* ===============================
   SHARED COLLAPSIBLE STYLES
================================= */

.text-content,
.todo-wrapper {
    overflow: hidden;
    transition: max-height 0.6s ease;
    position: relative;
}

/* Collapsed State */
.text-content.collapsed,
.todo-wrapper.collapsed {
    max-height: 150px;   /* adjust if needed */
}

/* Fade Effect */
.text-content.collapsed::after,
.todo-wrapper.collapsed::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background: linear-gradient(to bottom, rgba(242,242,242,0), #f2f2f2);
}

/* Remove line clamp (we now animate height instead) */
.text-content p {
    margin-bottom: 1rem;
}

/* List Styling */
.todoicons {
    list-style: none;
    padding-left: 0;
}

.todoicons li {
    margin-bottom: 10px;
}

/* Toggle Buttons */
.toggle-btn,
.toggle-list-btn {
    display: inline-block;
    margin-top: 10px;
    color: var(--main-brown);
    cursor: pointer;
    font-weight: 500;
}

.toggle-btn:hover,
.toggle-list-btn:hover {
    color: var(--darkest-brown);
}




.tour-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.tour-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.tour-link:hover .tour-card {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}











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

.hero1 h1 {
    color: #fff;
    font-size: 4rem;
    font-weight: 600;
}

.hero1 {
    position: relative;
    height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;

    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;

    overflow: hidden;
    transform: scale(1.1);
    transition: transform 6s ease;
}

.hero1.loaded {
    transform: scale(1);
}

/* Dark overlay */
.hero1::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.55);
}

.hero1 h1 {
    position: relative;
    color: #fff;
    font-size: 4rem;
    font-weight: 600;
    z-index: 2;
}

.hero-text p{
    display: flex;
}
.hero-text p a:hover{
    color: var(--teal);
}

/* =====================================
   SCROLL REVEAL SYSTEM
===================================== */

.reveal,
.reveal-left,
.reveal-right {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal {
    transform: translateY(40px);
}

.reveal-left {
    transform: translateX(-60px);
}

.reveal-right {
    transform: translateX(60px);
}

.reveal.active,
.reveal-left.active,
.reveal-right.active {
    opacity: 1;
    transform: translate(0,0);
}

/* =====================================
   COLLAPSIBLE SECTIONS
===================================== */

.text-content,
.todo-wrapper {
    overflow: hidden;
    transition: max-height 0.6s ease;
    position: relative;
}

.text-content.collapsed,
.todo-wrapper.collapsed {
    max-height: 150px;
}

/* Fade effect */
.text-content.collapsed::after,
.todo-wrapper.collapsed::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background: linear-gradient(to bottom, rgba(242,242,242,0), #f2f2f2);
}

/* Toggle Buttons */
.toggle-btn,
.toggle-list-btn {
    display: inline-block;
    margin-top: 10px;
    color: var(--main-brown);
    cursor: pointer;
    font-weight: 500;
}

.toggle-btn:hover,
.toggle-list-btn:hover {
    color: var(--darkest-brown);
}



/* =====================================
   TOUR CARDS
===================================== */

.tour-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.tour-card {
    border: none;
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.tour-link:hover .tour-card {
    transform: translateY(-6px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.12);
}

.tour-card img {
    height: 220px;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.tour-link:hover .tour-card img {
    transform: scale(1.08);
}

.price {
    color: #c77c2b;
    font-weight: 600;
}