/* =====================================================================
   ZOOM Mobile Theme
   Brand: #f7921e (orange) • Background: #ffffff • Font: Poppins
   ===================================================================== */

/* Google Font */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap");

/* ==============================
   Design Tokens
   ============================== */
:root{
  --ps-primary: #f7921e;

  --ps-bg: #ffffff;
  --ps-card: #ffffff;
  --ps-text: #111;
  --ps-muted: #6c757d;

  --ps-radius: 14px;
  --ps-shadow: 0 6px 18px rgba(0,0,0,.06);

  /* Layout */
  --container-max: 1320px;
  --bottom-nav-h: 68px;

  /* Header */
  --header-band-y: 18px;
  --header-soft-border: #ffe2c2;

  /* Search pill */
  --search-bg: #fff;
  --search-border: #e9edf3;
  --search-shadow: 0 8px 20px rgba(17,24,39,.08);

  /* Type */
  --fs-base: 15.5px;
  --lh-base: 1.55;
}

/* Containers (match XStore width) */
@media (min-width:1200px){
  .container, .container-lg, .container-xl, .container-xxl{ max-width: var(--container-max); }
}

/* ==============================
   Base / Typography
   ============================== */
html, body{
  background: var(--ps-bg);
  color: var(--ps-text);
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
button, input, select, textarea{ font-family: inherit; }

h1,.h1{ font-weight:800; letter-spacing:.1px; }
h2,.h2{ font-weight:700; letter-spacing:.1px; }
h3,.h3{ font-weight:700; letter-spacing:.1px; }
h4,.h4,h5,.h5,h6,.h6{ font-weight:600; }

a{ color: var(--ps-primary); }
a:hover{ color:#de7f15; }

.btn-primary{ background: var(--ps-primary); border-color: var(--ps-primary); }
.btn-primary:hover{ filter:brightness(.98); }

.text-accent{ color: var(--ps-primary) !important; }
.bg-accent{ background: var(--ps-primary) !important; color:#fff !important; }
.badge-accent{ background: var(--ps-primary); }




/* -----------------Login & Register Page -------------  */
 .auth-hero {
    /* Orange theme gradient */
    background: linear-gradient(135deg, #ff7b00 0%, #ffa94d 100%);
    color: #fff;
    border-radius: 16px;

    /* Optional: add gentle glow and depth (can remove if not needed) */
    box-shadow: 0 4px 20px rgba(255, 123, 0, 0.35);
}


/* Make hero section full viewport width even inside .container */
#heroArea.hero-full {
  width: 100vw;                           /* full browser width */
  margin-left: calc(50% - 50vw);          /* pull it out of the .container */
  margin-right: calc(50% - 50vw);
}

/* Base hero height (desktop) */
#heroArea .hero-slide {
  height: 720px;                          /* desktop height */
  width: 100%;
  object-fit: cover;                      /* nicely crop */
  display: block;
}

/* Tablet */
@media (max-width: 991.98px) {
  #heroArea .hero-slide {
    height: 340px;
  }
}

/* Mobile */
@media (max-width: 575.98px) {
  #heroArea .hero-slide {
    height: 240px;
  }
}





/* Footer banner */
.footer-banner{ margin:0; margin-top: clamp(24px,4vw,56px); }
.footer-banner-img{
  display:block; width:100vw; max-width:100%; height:auto;
  margin-left:50%; transform:translateX(-50%); border-radius:0;
}



/* ==========================
   Product card – Zoom Mobile (smaller text)
   ========================== */

/* Card shell */
.product-card{
  --pc-border: #eef2f6;
  --pc-hover-border: #ffd7a8;      /* light orange border on hover */
  --pc-shadow: 0 8px 24px rgba(2,6,23,.05);
  --pc-shadow-hover: 0 12px 28px rgba(2,6,23,.08);

  display:flex; flex-direction:column; gap:.35rem;
 
  border:1px solid var(--pc-border);
  box-shadow: var(--pc-shadow);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

/* lift + warm border on hover/focus */
.product-card:hover{
  transform: translateY(-2px);
  box-shadow: var(--pc-shadow-hover);
  border-color: var(--pc-hover-border);
}
.product-card:focus-within{
  box-shadow: 0 0 0 3px rgba(247,146,30,.18), var(--pc-shadow);
  border-color: var(--pc-hover-border);
}

/* Make the anchor fill the available space */
.product-card > a.d-block{ flex:1; color: inherit; text-decoration: none; }

/* Kill Bootstrap link blue inside the card */
.product-card a{ color: inherit; text-decoration: none; }
.product-card a:hover{ color: inherit; }

/* Image */
.product-card .pcard-img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:contain;
  background:#ffffff;
  padding:12px;
  border:1px solid #f2f4f7;
  transition: transform .15s ease, border-color .15s ease, background-color .15s ease;
}
.product-card:hover .pcard-img{
  transform: translateY(-1px);
  border-color: #ffe4c2;           /* warmer on hover */
  background:#fffdf9;
}

/* Title (smaller) */
.product-card .product-name{
  font-weight:700;
  color:#111;
  font-size:.88rem;          /* was .95rem */
  line-height:1.15rem;       /* was 1.25rem */
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
  min-height: calc(1.15rem * 2);  /* keep 2-line height consistent */
}
.product-card:hover .product-name{ color: var(--ps-primary); }

/* Meta line (Simple / Variable) — smaller */
.product-card .small.text-muted{
  color:#6b7280 !important;
  font-size:.78rem !important;
}

/* Price row — tighter + smaller */
.product-card .price{
  margin-top:.12rem;
  display:flex; align-items:baseline; gap:.32rem;
}
.product-card .price del{
  color:#97a3b2;
  font-size:.82rem;
}
.product-card .price .fw-bold{      /* current price */
  color:#111;
  font-size:.95rem;                 /* was default size */
}
.product-card .price .text-danger{  /* sale price */
  color:#e11d48 !important;
  font-size:.95rem;
}

/* Buttons */
/* Outlined orange "Add" button */
.product-card .btn-add{
  height:40px;
  padding:0 .85rem !important;
  line-height:1 !important;
  display:inline-flex !important;
  align-items:center; justify-content:center; gap:.45rem;
  width:100%;
  font-weight:700;
  font-size:.88rem;                 /* smaller label */

  background: transparent;
  color: var(--ps-primary);
  border: 2px solid var(--ps-primary);
  border-radius: 3px;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .06s ease;
}
.product-card .btn-add i{ color: inherit; }

.product-card .btn-add:hover{
  background: rgba(247,146,30,.30);
  color:#c96e0d;
  border-color:#c96e0d;
}
.product-card .btn-add:active{
  transform: translateY(1px);
  background: rgba(247,146,30,.16);
}
.product-card .btn-add:focus{
  box-shadow: 0 0 0 3px rgba(247,146,30,.18);
}

/* Mobile tweaks (even smaller on xs) */
@media (max-width: 575.98px){
  .product-card .pcard-img{ padding:10px; }
  .product-card .product-name{
    font-size:.84rem;
    line-height:1.12rem;
    min-height: calc(1.12rem * 2);
  }
  .product-card .small.text-muted{ font-size:.76rem !important; }
  .product-card .price .fw-bold,
  .product-card .price .text-danger{ font-size:.92rem; }
  .product-card .price del{ font-size:.8rem; }
  .product-card .btn-add{ height:38px; font-size:.86rem; }
}

/* Wishlist button – same outlined style */
.product-card .btn-heart{
  width:40px; height:40px; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:3px;

  background: transparent;
  color: var(--ps-primary);
  border: 2px solid var(--ps-primary);
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .06s ease;
}
.product-card .btn-heart i{ color: inherit; }

.product-card .btn-heart:hover{
  background: rgba(247,146,30,.30);
  color:#c96e0d;
  border-color:#c96e0d;
}
.product-card .btn-heart:active{ transform: translateY(1px); }
.product-card .btn-heart:focus{ box-shadow: 0 0 0 3px rgba(247,146,30,.18); }


/* Badges */
.product-card .badge{
 
  font-weight:700;
}

/* Mobile tweaks */
@media (max-width: 575.98px){
 
  .product-card .pcard-img{ padding:10px; }
  .product-card .product-name{
    font-size:.9rem; line-height:1.2rem;
    min-height: calc(1.2rem * 2);
  }
  .product-card .btn-add{ height:38px; }
}




/* ==============================
   Mobile bottom nav
   ============================== */
.mbottom-nav{
  position:fixed; left:0; right:0; bottom:0; z-index:1040;
  display:grid; grid-template-columns:repeat(5,1fr);
  background: var(--ps-primary); color:#fff; border-top:1px solid rgba(0,0,0,.06);
  padding:8px 6px calc(8px + env(safe-area-inset-bottom));
  box-shadow:0 -6px 16px rgba(0,0,0,.08);
}
.mbottom-nav .mbitem{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-decoration:none; color:#fff; gap:4px; min-height:48px; line-height:1; font-weight:600;
}
.mbottom-nav .mbitem i{ font-size:22px; }
.mbottom-nav .mbitem span{ font-size:12px; }
.mbottom-nav .mbitem.active{ color:#fff9f2; }
.mbottom-nav .mbadge{
  position:absolute; top:2px; right:22%; transform:translate(50%,-40%);
  background:#dc3545; color:#fff; font-size:10px; padding:2px 6px; border-radius:999px; line-height:1;
}
@media (max-width:991.98px){ body{ padding-bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom)); } }
@media (min-width:992px){ .mbottom-nav{ display:none; } body{ padding-bottom:0 !important; } }

/* ==============================
   Misc polish
   ============================== */
section.mb-5{ scroll-margin-top:84px; }
@media (min-width:992px){
  .row.g-4 > [class*="col-lg-3"] .product-card{ min-height:100%; }
}

/* PRODUCT PAGE image sizing (desktop) */
@media (min-width:992px){
  #pd-main{ max-height:390px; width:100%; height:auto; object-fit:contain; display:block; }
}


}

/* ========== WhatsApp floating button (MOBILE ONLY) ========== */
.whatsapp-fab {
  position: fixed;
  right: 14px;
  bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom) + 14px);
  z-index: 1050; /* above hero & content, below offcanvas */
  display: inline-flex;
  width: 54px;
  height: 54px;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: #25D366; /* WhatsApp green */
  color: #fff !important;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.18);
  border: 0;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.whatsapp-fab i {
  font-size: 26px;
  line-height: 1;
}

.whatsapp-fab:hover {
  transform: translateY(-1px);
  filter: brightness(0.98);
}

.whatsapp-fab:active {
  transform: translateY(0);
}



/* ========== Bottom nav polish ========== */
.mbottom-nav .mbitem i {
  font-size: 22px;
}

.mbottom-nav .mbitem span {
  font-size: 12px;
}

.mbottom-nav .mbitem.active i,
.mbottom-nav .mbitem.active span {
  opacity: 1;
  filter: brightness(1.12);
}

.mbottom-nav .mbitem:not(.active) {
  opacity: 0.95;
}

.mbottom-nav .mbitem:active {
  transform: translateY(1px);
}

/* Tiny screens safe-area adjustment */
@media (max-width: 360px) {
  .whatsapp-fab {
    right: 10px;
    bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom) + 10px);
  }
}




    /* Section headers (centered title + right "View all") */
    .section-head {
        position: relative;
        min-height: 40px;
        display: flex;
        align-items: center;
        margin-bottom: 1rem;
    }

    .section-head h4 {
        margin: 0 auto;
        text-align: center;
    }

    .section-head .cta-desktop {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
    }

    /* Footer banner (or bottom placement): full width, rounded */
    .footer-banner-img,
    .mid-banner-img {
        display: block;
        width: 100%;
        height: auto;
        border-radius: var(--ps-radius, 16px);
    }

   
    
    /* title chip behind section headings */
.section-head .title-chip{
  display:inline-block;
  background: var(--bs-primary, #0d6efd); /* your theme blue */
  color:#fff;
  padding:.35rem .85rem;
  border-radius:.5rem;
  line-height:1.1;
  box-shadow:0 2px 6px rgba(13,110,253,.25);
  /* keep the chip only as wide as the text */
  max-width:100%;
}
.section-head h4{ margin:0; }




/* Section title chips — themed per section */
.section-head .title-chip{
  display:inline-block;
  color:#fff;
  padding:.40rem .90rem;
  border-radius:.6rem;
  line-height:1.1;
  font-weight:700;
  letter-spacing:.2px;
  box-shadow:0 6px 16px rgba(0,0,0,.06);
  border:1px solid rgba(255,255,255,.18);
  max-width:100%;
  white-space:nowrap;
}

/* Brand orange (Find Your Parts) */
.section-head .chip-orange{
  background: var(--ps-primary);
  box-shadow: 0 6px 18px rgba(247,146,30,.35);
}



/* optional: subtle hover pulse on desktop */
@media (hover:hover){
  .section-head .title-chip:hover{ filter:brightness(1.02); }
}

/* Left-align section headers */
.section-head{
  justify-content: flex-start;   /* stop centering the row */
}
.section-head h4{
  margin: 0;                     /* remove auto margins */
  text-align: left;              /* left text */
}



/* Make ALL outline-primary buttons use your theme orange */
.btn-outline-primary{
  color: var(--ps-primary) !important;
  border-color: var(--ps-primary) !important;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus{
  background: var(--ps-primary) !important;
  border-color: var(--ps-primary) !important;
  color: #fff !important;
}
.btn-outline-primary:active{
  background: var(--ps-primary) !important;
  border-color: var(--ps-primary) !important;
  color: #fff !important;
}

/* === Category rail: full orange tiles (perfect square image) === */

/* card width */
.cat-rail .rail-item{
  flex: 0 0 160px;
  width: 160px;
  scroll-snap-align: start;
}

/* whole card becomes an orange tile */
.cat-round{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:.55rem;
  padding:12px;
  background: linear-gradient(135deg, var(--ps-primary) 0%, #ffbd6a 100%) !important;
  border:1px solid #ffd7a8 !important;
  border-radius:16px !important;
  box-shadow:0 10px 22px rgba(2,6,23,.06);
  transition: transform .20s ease, box-shadow .15s ease;
}
.cat-round:hover{ transform: translateY(-3px); box-shadow:0 14px 30px rgba(2,6,23,.10); }

/* image frame — PERFECT SQUARE via aspect-ratio */
.cat-oval{
  width:100%;
  aspect-ratio: 1 / 1;
  height:auto !important;
  padding:0;
  border-radius:12px !important;
  overflow:hidden;
  /* subtle light panel so transparent PNGs read on orange */
  background: rgba(255,255,255,.12) !important;
  border:1px solid rgba(255,255,255,.35) !important;
  box-shadow: inset 0 1px 4px rgba(255,255,255,.12);
  margin-bottom:.45rem;
}

/* inner wrapper must be transparent */
.cat-rail .oval-inner{
  width:100%; height:100%;
  border-radius:12px; padding:0;
  background: transparent !important;
}

/* show FULL image (no crop) */
.cat-oval img{
  width:100% !important; height:100% !important;
  object-fit:contain !important;
  border-radius:0 !important;
  padding:10px;
  image-rendering:auto;
}

/* text area on orange */
.cat-round .title{
  background:transparent !important;
  font-weight:800; font-size:.95rem;
  color:#fff !important;
  white-space:normal;
  margin:0; line-height:1.2;
  text-shadow:0 1px 0 rgba(0,0,0,.06);
}
.cat-round .sub{
  background:transparent !important;
  font-size:.80rem; color:#fff !important;
  margin:0; line-height:1.2; opacity:.95;
}

/* mobile tweak */
@media (max-width:575.98px){
  .cat-rail .rail-item{ flex-basis:140px; width:140px; }
}

/* remove any previous alternating palette overrides */
.cat-rail > .rail-item .cat-oval{
  background: rgba(255,255,255,.12) !important;
  border-color: rgba(255,255,255,.35) !important;
}




/* === Primary = brand orange on ALL states === */
.btn-primary{
  background: var(--ps-primary) !important;
  border-color: var(--ps-primary) !important;
  color:#fff !important;
}
.btn-primary:hover,
.btn-primary:active,
.btn-primary.active,
.show > .btn-primary.dropdown-toggle{
  background:#c96e0d !important;   /* warmer hover/active */
  border-color:#c96e0d !important;
  color:#fff !important;
}
.btn-primary:focus,
.btn-check:focus + .btn-primary{
  box-shadow:0 0 0 .2rem rgba(247,146,30,.25) !important;
}
.btn-primary:disabled,
.btn-primary.disabled{
  background: var(--ps-primary) !important;
  border-color: var(--ps-primary) !important;
  opacity:.65;
  color:#fff !important;
}

/* === Reusable globals === */
.btn-accent{
  background: var(--ps-primary) !important;
  border:2px solid var(--ps-primary) !important;
  color:#fff !important;
  font-weight:700;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .06s ease;
}
.btn-accent:hover,
.btn-accent:active,
.btn-accent.active{
  background:#c96e0d !important;
  border-color:#c96e0d !important;
  color:#fff !important;
}
.btn-accent:focus{ box-shadow:0 0 0 3px rgba(247,146,30,.18) !important; }

.btn-outline-accent{
  background:transparent !important;
  border:2px solid var(--ps-primary) !important;
  color: var(--ps-primary) !important;
  font-weight:700;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .06s ease;
}
.btn-outline-accent:hover,
.btn-outline-accent:active,
.btn-outline-accent.active{
  background: rgba(247,146,30,.12) !important;
  border-color:#c96e0d !important;
  color:#c96e0d !important;
}
.btn-outline-accent:focus{ box-shadow:0 0 0 3px rgba(247,146,30,.18) !important; }





 /* ===== Mid-banner with features (no blank space) ===== */
.midstrip{ --bd:#eef2f6; --muted:#6b7280; }

/* Right banner side: make the column height define the whole row */
.midstrip .banner-wrap,
.midstrip .banner-item{ height:100%; }
.midstrip .mid-banner-img{
  display:block; width:100%; height:100%;
  object-fit:cover; border-radius: var(--ps-radius,14px);
}

/* Feature card fills the same height as image */
.midstrip .feat-card{
  background:#fff; border:1px solid var(--bd);
  box-shadow:0 8px 24px rgba(2,6,23,.05);
  height:100%;
  display:flex;                    /* allow children to flex and fill */
  flex-direction:column;
}

/* Each row expands evenly so there is no empty space */
.midstrip .feat-row{
  display:flex; align-items:center; gap:.9rem;
  padding:16px 14px;
  border-bottom:1px solid var(--bd);
  flex:1 1 0;                      /* <- this makes rows share the height */
}
.midstrip .feat-row:last-child{ border-bottom:0; }

/* Icon + text */
.midstrip .feat-ico{
  width:44px; height:44px; min-width:44px;
  display:inline-flex; align-items:center; justify-content:center;
  border:2px solid var(--ps-primary);
  color:var(--ps-primary);
  border-radius:12px;
  font-size:1.15rem; line-height:1;
  background:#fff;
}
.midstrip .feat-title{
  margin:0; font-weight:800; font-size:.98rem; letter-spacing:.2px;
  color:#111;
}
.midstrip .feat-sub{ margin:2px 0 0; font-size:.9rem; color:var(--muted); }

/* Mobile: natural heights (stack) */
@media (max-width:991.98px){
  .midstrip .feat-card{ order:2; }
  .midstrip .banner-wrap{ order:1; }
  .midstrip .banner-item,
  .midstrip .mid-banner-img{ height:auto; }
  .midstrip .feat-row{ flex:0 0 auto; }   /* don't force equal heights on phones */
}




/* ===== Brands loop ribbon ===== */
.section-brands .title-chip.chip-orange{
  background: #fff6eb; border: 1px solid #ffedd9; color: #c76a00;
}

.brand-strip{
  --gap: 28px;
  --speed: 28s;            /* lower = faster */
  position: relative;
  overflow: hidden;
  padding: 10px 0;
  border-radius: 10px;
  background: #fff;        /* or transparent */
}

.brand-track{
  display: flex;
  align-items: center;
  gap: var(--gap);
  width: max-content;      /* shrink to content so animation is smooth */
  animation: brand-marquee var(--speed) linear infinite;
  will-change: transform;
}

/* pause on hover (desktop) */
.brand-strip:hover .brand-track{ animation-play-state: paused; }

.brand{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 120px;        /* ensures consistent spacing */
  height: 64px;            /* logo strip height */
  padding: 8px 14px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
  transition: transform .15s ease, box-shadow .15s ease;
}
.brand:hover{ transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.08); }

.brand img{
  max-height: 50px;        /* keep logos neat */
  max-width: 120px;
  width: auto; height: auto;
  object-fit: contain;
  filter: saturate(.98) contrast(1.02);
}

/* Mobile tweaks */
@media (max-width: 575.98px){
  .brand{ min-width: 100px; height: 56px; padding: 6px 10px; }
  .brand img{ max-height: 34px; max-width: 100px; }
  .brand-strip{ --gap: 18px; --speed: 22s; }
}

/* Endless left scroll: we duplicated the items once, so translate -50% loops perfectly */
@keyframes brand-marquee{
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}










/* ===== Home highlights (4-column icon row, like reference) ===== */
/* ===== Home highlights (match ceylontouristik.de) ===== */

.ct-highlights {
  background-color: #ffffff;
}

.ct-highlight {
  padding: 3rem 1rem 3.25rem;
  transition: transform .25s ease, box-shadow .25s ease;
}

.ct-highlight:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
}

/* Icon + pastel circle behaviour */
.ct-icon-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2rem;
  font-size: 2.2rem;          /* icon line size */
  color: #111;
  z-index: 1;
}

/* small circle a bit ABOVE icon by default */
.ct-icon-wrap::before {
  content: "";
  position: absolute;
  width: 140px;               /* base size, scaled down */
  height: 140px;
  border-radius: 50%;
  top: 30%;                   /* above icon */
  left: 50%;
  transform: translate(-50%, -50%) scale(0.6);  /* looks smaller */
  z-index: -1;
  transition: top .25s ease, transform .25s ease, box-shadow .25s ease;
}

/* on hover → circle moves to center & grows (like reference) */
.ct-highlight:hover .ct-icon-wrap::before {
  top: 50%;
  transform: translate(-50%, -50%) scale(1);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.06);
}

/* Pastel circle colors (similar to site) */
.ct-icon-1::before { background: #ffe1ba; }  /* beige */
.ct-icon-2::before { background: #e6ffcf; }  /* light green */
.ct-icon-3::before { background: #e0f0ff; }  /* light blue */
.ct-icon-4::before { background: #ffd8ea; }  /* light pink */

/* Titles & text */
.ct-highlight-title {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 1rem;
}

.ct-highlight-text {
  font-size: 0.98rem;
  color: #777777;
  max-width: 320px;
  margin: 0 auto;
}

/* Vertical dotted separators between columns on desktop */
@media (min-width: 992px) {
  .ct-highlights-row > div.col-lg-3 {
    position: relative;
  }

  .ct-highlights-row > div.col-lg-3:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 14%;
    bottom: 14%;
    right: 0;
    border-right: 1px dashed #d2d2d2;
  }
}


/* ===== About block (Ceylon Touristik text + image) ===== */

.ct-about-block {
  background: #ffffff;
}

/* big thin title, spaced like reference */
.ct-about-title {
  font-size: 3.2rem;
  font-weight: 300;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 2.5rem;
}

/* main paragraph */
.ct-about-text {
  font-size: 1rem;
  line-height: 1.9;
  color: #6d6d6d;
  margin-bottom: 1.5rem;
}

/* quote line at bottom */
.ct-about-quote {
  font-size: 1rem;
  line-height: 1.7;
  color: #444444;
  margin-top: 0.5rem;
}

/* right image – same height feel, no rounded corners */
.ct-about-image-wrap {
  width: 100%;
  height: 100%;
}

.ct-about-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* spacing tweaks for smaller screens */
@media (max-width: 991.98px) {
  .ct-about-title {
    font-size: 2.4rem;
    letter-spacing: 0.12em;
    margin-bottom: 1.7rem;
  }

  .ct-about-block {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
}


/* ===== Destinations intro (Reiseziele in Sri Lanka) ===== */

.ct-dest-intro {
  background: #ffffff;
}

.ct-dest-intro-title {
  font-size: 3.2rem;
  font-weight: 300;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 2.5rem;
}

.ct-dest-intro-text {
  max-width: 1100px;
  margin: 0 auto;
  font-size: 1rem;
  line-height: 1.9;
  color: #555555;
}

/* Slightly smaller on mobile */
@media (max-width: 991.98px) {
  .ct-dest-intro-title {
    font-size: 2.4rem;
    letter-spacing: 0.12em;
    margin-bottom: 1.8rem;
  }

  .ct-dest-intro {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
}


/* ===== Destinations grid (Bentota / Polonnaruwa / Anuradhapura / Kandy) ===== */

.ct-dest-grid {
  background: #ffffff;
}

.ct-dest-item {
  /* keep very clean, no card border */
}

.ct-dest-image-wrap {
  overflow: hidden;
}

.ct-dest-image {
  width: 100%;
  height: 260px;
  object-fit: cover;
  transition: transform .4s ease;
  display: block;
}

.ct-dest-image-wrap:hover .ct-dest-image {
  transform: scale(1.04);
}

/* destination title – bold, condensed, uppercase like reference */
.ct-dest-title {
  font-size: 1.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 0.6rem;
}

/* description text */
.ct-dest-text {
  font-size: 0.95rem;
  line-height: 1.8;
  color: #555555;
}

/* See More button */
.ct-dest-more-btn {
  padding: 0.55rem 1.6rem;
  border-radius: 0;
  border: 1px solid #014e1d;
  background-color: #014e1d;
  color: #ffffff;
  font-size: 0.9rem;
}

.ct-dest-more-btn:hover {
  background-color: #0b6c2a;
  border-color: #0b6c2a;
  color: #ffffff;
}

/* small screens: taller images */
@media (max-width: 991.98px) {
  .ct-dest-image {
    height: 230px;
  }
}


/* ===== TOUREN / Testimonial intro section ===== */

.ct-tour-reviews {
  background: #ffffff;
}

/* Top "TOUREN" title */
.ct-tour-title {
  font-size: 3rem;
  font-weight: 300;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 0;
}

/* Light panel area */
.ct-tour-panel {
  background: #f6f9fc;           /* very light grey/blue like reference */
  position: relative;
  overflow: hidden;
}

/* Small label */
.ct-tour-kicker {
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #777;
}

/* Main heading */
.ct-tour-heading {
  font-size: 2.2rem;
  font-weight: 400;
  line-height: 1.4;
  margin: 0;
  color: #111;
}

/* Side images */
.ct-tour-img-left,
.ct-tour-img-right {
  position: absolute;
  display: block;
  max-width: 330px;
}

/* left stacked photos */
.ct-tour-img-left {
  left: 4%;
  bottom: -40px;
}

/* right passport / camera */
.ct-tour-img-right {
  right: 4%;
  bottom: -60px;
}

/* Responsive tweaks */
@media (max-width: 991.98px) {
  .ct-tour-title {
    font-size: 2.4rem;
    letter-spacing: 0.12em;
  }

  .ct-tour-heading {
    font-size: 1.8rem;
  }

  .ct-tour-img-left,
  .ct-tour-img-right {
    max-width: 200px;
  }

  .ct-tour-img-left {
    left: -40px;
    bottom: -30px;
  }

  .ct-tour-img-right {
    right: -40px;
    bottom: -40px;
  }
}

@media (max-width: 575.98px) {
  /* On very small screens you can hide the side images if needed */
  .ct-tour-img-left,
  .ct-tour-img-right {
    display: none;
  }

  .ct-tour-panel {
    padding-bottom: 2.5rem;
  }
}