/* =========================================================
   COMFORT LINE — HERO v2 (IMAGE VISIBLE + LOGO COLORS)
   Brand colors: Blue + Orange + Green + Yellow
   ========================================================= */
:root{
  --cl-blue:#0B3AA4;
  --cl-blue2:#1A57D6;
  --cl-orange:#FF7A00;
  --cl-orange2:#FFB000;
  --cl-green:#0E8F3A;
  --cl-yellow:#F6C445;

  --ink:#0C1017;
  --shadow:0 22px 70px rgba(0,0,0,.28);
  --pill:999px;
}

/* HERO BG IMAGE */
.cl-hero2{
  position: relative;
  padding: 112px 0 46px;
  overflow: hidden;
  isolation: isolate; /* important to keep layers correct */
}

/* ✅ OVERLAY FIX:
   - Less dark
   - Adds brand color glow
   - Keeps image visible
*/


/* ✅ Add extra “contrast pop” to the background image */
.cl-hero2::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;

  background-image: url("../images/coorg-hero.jpg"); /* ✅ change image here */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  transform: scale(1.05); /* subtle premium zoom */
  filter: saturate(1.25) contrast(1.12); /* boost colors */
}
.cl-hero2::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;

  /* keep it LIGHT so image shows */
  background:
    radial-gradient(900px 520px at 12% 10%, rgba(11,58,164,.30), transparent 62%),
    radial-gradient(900px 520px at 88% 12%, rgba(255,122,0,.24), transparent 65%),
    radial-gradient(900px 520px at 50% 92%, rgba(14,143,58,.16), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.42));
}
.cl-hero2 .container{
  position: relative;
  z-index: 1;
}

.cl-hero2 .container{ position:relative; z-index:1; }

/* Center block */
.cl-hero2-center{
  max-width: 90ch;
  margin: 0 auto;
  text-align:center;
}

/* ============================
   CHIPS — brand gradient chips
   ============================ */
.cl-hero2-kicker{
  display:flex;
  justify-content:center;
  align-items:center;
  gap: 12px;
  flex-wrap: nowrap;
  overflow-x:auto;
  white-space: nowrap;
  padding-bottom: 8px;
  -webkit-overflow-scrolling: touch;
}
.cl-hero2-kicker::-webkit-scrollbar{display:none}

.cl2-chip{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: var(--pill);
  font-weight: 800;
  letter-spacing: -0.01em;
  flex: 0 0 auto;
  color: #fff;

  border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 16px 45px rgba(0,0,0,.22);
}

/* Each chip gets a real logo color */
.cl-hero2-kicker .cl2-chip:nth-child(1){
  background: linear-gradient(135deg, rgba(11,58,164,.80), rgba(26,87,214,.55));
}
.cl-hero2-kicker .cl2-chip:nth-child(2){
  background: linear-gradient(135deg, rgba(14,143,58,.75), rgba(52,211,153,.45));
}
.cl-hero2-kicker .cl2-chip:nth-child(3){
  background: linear-gradient(135deg, rgba(255,122,0,.85), rgba(246,196,69,.55));
}

.cl2-chip i{
  color: #fff;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.25));
}

/* ============================
   TITLE — real color, not plain
   ============================ */
   /* ================================
   STRONG CINEMATIC OVERLAY
   ================================ */
.cl-hero2-overlay{
  position:absolute;
  inset:0;

  background:
    linear-gradient(
      to bottom,
      rgba(0,0,0,0.65) 0%,
      rgba(0,0,0,0.55) 40%,
      rgba(0,0,0,0.75) 100%
    ),
    radial-gradient(
      circle at 20% 30%,
      rgba(0,0,0,0.35),
      transparent 60%
    );

  z-index:0;
}

.cl-hero2-title{
  margin: 14px 0 12px 0;
  font-size: clamp(2.2rem, 4.4vw, 3.8rem);
  font-weight: 900;
  letter-spacing: -0.045em;
  line-height: 1.05;

  /* ✅ colorful logo gradient text */
  background: linear-gradient(
    90deg,
    #ffffff 0%,
    #EAF1FF 18%,
    #FFEDD6 52%,
    #E9FFE9 78%,
    #ffffff 100%
  );
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;

  text-shadow: 0 18px 55px rgba(0,0,0,.35);
  font-size: clamp(2.2rem, 4.5vw, 3.8rem);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.04em;

  color: #ffffff;

  text-shadow:
    0 4px 20px rgba(0,0,0,.6),
    0 8px 40px rgba(0,0,0,.5);
}

.cl-hero2-lead{
  margin: 0 auto 24px auto;
  max-width: 78ch;
  color: rgba(255,255,255,.92);
  font-weight: 650;
  line-height: 1.75;

  text-shadow: 0 4px 18px rgba(0,0,0,.55);
}

/* ============================
   BOOKING BAR — colorful edges
   ============================ */
.cl-hero2-bar{
  margin: 28px auto 22px auto;
  width: min(1100px, 100%);
  display:grid;
  grid-template-columns: 1.3fr 1.3fr .9fr 1fr auto;
  gap: 12px;
  padding: 16px;
  border-radius: 22px;

  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: var(--shadow);
  position:relative;
}

/* ✅ Colorful border glow */
.cl-hero2-bar::before{
  content:"";
  position:absolute; inset:-1px;
  border-radius: 22px;
  padding: 1px;
  background: linear-gradient(90deg,
    rgba(11,58,164,.55),
    rgba(255,122,0,.55),
    rgba(14,143,58,.45)
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events:none;
}

/* labels */
.cl2-label{
  display:block;
  font-size: .82rem;
  font-weight: 800;
  color: rgba(255,255,255,.92);
  margin: 0 0 6px 2px;
}

.cl2-input{
  width:100%;
  height: 52px;
  border-radius: 16px;
  padding: 0 14px;
  font-weight: 750;
  color: rgba(12,16,23,.92);
  background: rgba(255,255,255,.98);
  border: 1px solid rgba(12,16,23,.12);
  outline:none;
}

.cl2-input:focus{
  border-color: rgba(255,122,0,.70);
  box-shadow: 0 0 0 4px rgba(255,122,0,.18);
}

/* ICON ONLY buttons */
.cl2-actions{
  display:flex;
  align-items:flex-end;
  gap: 10px;
  padding-bottom: 1px;
}

.cl2-iconBtn{
  width: 58px;
  height: 58px;
  border-radius: 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 22px;
  color:#fff;
  text-decoration:none;
  transition: transform .18s ease, box-shadow .18s ease;
}

.cl2-iconBtn--wa{
  background: linear-gradient(135deg, #25D366, #16A34A);
  box-shadow: 0 18px 50px rgba(37,211,102,.35);
}
.cl2-iconBtn--wa:hover{ transform: translateY(-2px); }

.cl2-iconBtn--call{
  background: linear-gradient(135deg, var(--cl-blue2), var(--cl-blue));
  box-shadow: 0 18px 50px rgba(26,87,214,.35);
}
.cl2-iconBtn--call:hover{ transform: translateY(-2px); }

/* ============================
   TRUST TILES — vivid, not grey
   ============================ */
.cl-hero2-trust{
  margin: 18px auto 10px auto;
  width: min(1000px, 100%);
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.cl2-tile{
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 14px 14px;
  border-radius: 18px;
  color:#fff;



  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 18px 55px rgba(0,0,0,.20);
    background: rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(12px);
}

.cl2-icon{
  width: 50px;
  height: 50px;
  border-radius: 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex: 0 0 auto;
  border: 1px solid rgba(255,255,255,.25);
}

.cl2-icon i{
  font-size: 18px;
  color: #0C1017 !important;
}

/* logo-based icon blocks */
.cl-hero2-trust .cl2-tile:nth-child(1) .cl2-icon{
  background: linear-gradient(135deg, var(--cl-orange), var(--cl-yellow));
}
.cl-hero2-trust .cl2-tile:nth-child(2) .cl2-icon{
  background: linear-gradient(135deg, #34D399, var(--cl-green));
}
.cl-hero2-trust .cl2-tile:nth-child(3) .cl2-icon{
  background: linear-gradient(135deg, #93C5FD, var(--cl-blue));
}

.cl2-txt strong{
  display:block;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.cl2-txt span{
  display:block;
  margin-top: 4px;
  font-weight: 650;
  color: rgba(255,255,255,.85);
}

.cl-hero2-note{
  margin: 10px auto 0 auto;
  width: min(980px, 100%);
  text-align:center;
  color: rgba(255,255,255,.88);
  font-weight: 650;
  line-height: 1.6;
}

/* Responsive */
@media (max-width: 991px){
  .cl-hero2{ padding: 92px 0 34px; }
  .cl-hero2-bar{ grid-template-columns: 1fr 1fr; }
  .cl2-actions{ grid-column: 1 / -1; justify-content:center; }
  .cl-hero2-trust{ grid-template-columns: 1fr; }
}

@media (max-width: 575px){
  .cl-hero2-kicker{
    flex-direction: column;
    gap: 10px;
    overflow: visible;
    white-space: normal;
  }
  .cl-hero2-bar{ grid-template-columns: 1fr; }
}