:root{
      --brown-900:#70403C;
      --brown-700:#955551;
      --peach-300:#F1BD9F;
      --cream:#FFF8F3;
      --text:#0E0D0B;
      --muted:#6B7280;
      --border:#E7E1DB;
      --ring:#60A5FA;
      --white:#fff;
      --black:#000;
      --darkb: #70403C;
      --container:1440px;
      --radius:8px;
       --bg-cream: 30 100% 97%;
  --mystical-brown: 10 43% 34%;
  --mystical-brown-light: 4 29% 46%;
  --mystical-peach: 23 69% 79%;
  --overlay-dark: 21 34% 23%;
  --text-dark: 40 27% 6%;
  --border-hsl: 214.3 31.8% 91.4%;
  
  --shadow-soft: 0 8px 30px rgba(0,0,0,0.08);
    }


    /* hero_b */
    .hero_b{position:relative; height:324px; overflow:hidden}
    .hero_b img.bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
    .hero_b img.overlay{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; mix-blend:overlay}
    .hero_b::after{content:\"\"; position:absolute; inset:0; background:rgba(82,35,32,.7)}
    .hero_b-inner{background: rgba(82.34, 35.28, 32.33, 0.70);position:relative; z-index:1;
     height:100%; display:grid; place-items:center; text-align:center; padding:0;
    margin: 30px 0px !important;}
    .hero_b h1{color:#fff; font-weight:300; font-size:56px; margin:0 0 12px}
    .hero_b p{color:#fff; max-width:900px; margin:0 auto; letter-spacing:2px;line-height: 30px;}

    /* Steps */
    .steps{padding:40px 0}
    .steps h3{margin:0 0 40px; text-align:center; }
    .steps-track{display:flex; justify-content:center; gap:10px}
    .step{display:flex; align-items:center; gap:8px}
    .dot{width:40px; height:40px; border-radius:999px; display:grid; place-items:center; color:#fff; font-weight:600}
    .dot.primary{background:#000}
    .dot.secondary{background:var(--brown-700)}
    .bar{width:120px; height:2px; background:var(--brown-700)}
    @media(max-width:480px){ .bar{width:72px} .dot{width:32px;height:32px}}

    /* Panel */
    .panel-wrap{ padding:0px 120px 60px 120px;}
 @media (max-width: 1300px) and (min-width: 1200px) 
  {
.panel-wrap {
 padding: 0px 80px 40px 80px !important;
}
.secure strong {
    width: 280px !important;
}
  }
    .container.booking-panel{background:var(--cream);padding: 0px !important;}
    .panel{ border-radius:10px; padding:28px 0px; box-shadow:0 1px 0 rgba(16,24,40,.04)}
    .panel h2{text-align:center;}
.panel .dividerb {
    border: 0;
    border-top: 1px solid rgba(149, 85, 81, .5);
    margin: 30px 0;
    padding: 0 !important;
}
.panel-content {padding: 0px 48px;}
    /* Service - cards via radios */
    .label{display:block; font-weight:600; margin:24px 0 12px; letter-spacing:1.6px}
    .services{display:grid; grid-template-columns:1fr; gap:20px}
    @media(min-width:900px){ .services{grid-template-columns:repeat(3,1fr)} }
    .visually-hidden{position:absolute; inset:auto; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
    .card{border:1px solid var(--border); border-radius:10px; padding:20px; background:#fff; text-align:left; transition:.2s ease; cursor:pointer}
    .card:hover{box-shadow:0 1px 8px rgba(0,0,0,.05)}
    .card .top{display:flex; gap:12px; align-items:center; margin-bottom:12px}
    .card h4{margin:0; font-size:18px;font-weight: 500;}
    .card p{margin:10px 0 0; color:#0E0D0B; font-size:14px;line-height: 24px;}
    .card .price{margin-top:14px; font-size:14px; font-weight:700; color:#111}
    input[type=radio]:checked + label.card{border-color:#955551; box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.20);}

    /* Topics - chips via checkboxes */
    .topics{display:grid; gap:16px; grid-template-columns:1fr}
    @media(min-width:900px){ .topics{grid-template-columns:repeat(3,1fr)} }
    .chip{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 16px; border:1px solid var(--border); border-radius:8px; background:#fff; transition:.2s}
    .chip .left{display:flex; align-items:center; gap:12px; color:#111; font-size:14px}
    .box{width:16px; height:16px; border:1px solid #D1D5DB; border-radius:3px; display:grid; place-items:center}
    .box svg{display:none}
    input[type=checkbox]:checked + label.chip{ border-color:#D6D3D1}
    input[type=checkbox]:checked + label.chip .box{background:#111; border-color:#111}
    input[type=checkbox]:checked + label.chip .box svg{display:block; fill:#fff;width: 11px;
    height: 11px;}
    /* Buttons */
    .actions{margin-top:22px}
    .btn{background:var(--brown-900); font-size: 14px;color:#fff; border:0; padding:12px 40px; border-radius:6px; font-weight:600}
    /* SVG base */
    .icon{stroke:#060808; fill:none; stroke-width:2; width:28px; height:28px}
  .service-icon {
    width: 40px;
    height: 40px;}
    
  .price-card:has(input[type="radio"]:checked) {
    border: 1px solid #955551;
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.20);
}
.price-card.selected {
    border: 2px solid #955551;
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.20);
}

.sectionline{height:1px;background:rgba(0,0,0,.10);margin:22px 0}
.subhead{font:500 16px/20px Inter;letter-spacing:1.6px;text-transform:capitalize;margin:0 0 16px}

.subheadc{font:500 16px/20px Inter;letter-spacing:1.6px;text-transform:capitalize;margin:0px;}

/* Booking Page 2 CSS Start here */
/* Guides */
.guides{display:grid;grid-template-columns:1fr;gap:24px}
@media(min-width:1024px){.guides{grid-template-columns:repeat(2,1fr)}}
.card{position:relative;border:1px solid rgba(19,18,16,.10);background:#fff;border-radius:4px;padding: 30px 22px;}
.package.card{position:relative;border:1px solid rgba(19,18,16,.10);background:#fff;
    border-radius:4px;padding: 0px 0px;}
    .package.card p{font:400 14px/26px Inter;letter-spacing:.8px;margin: 0 0 16px;height: 45px;}

.card--active{border-color:var(--primary);box-shadow:0 0 30px rgba(0,0,0,.2)}
.card__row{display:flex;gap:16px}
.avatar{width:96px;height:126px;border-radius:112.50px;overflow:hidden;flex: 0 0 auto;position: absolute;background: transparent !important;margin-left: 0.9%;
    margin-top: 1%;}

.avatar-frame{width:96px;height:126px;border-radius:112.50px;overflow:hidden;background:var(--light);border: 1px #824B48 solid;flex:0 0 auto;z-index: 20;}
.avatar img{width: 100%;
    height: 100%;
    border-radius: 112.50px;
    object-fit: cover;
    }
.card h5{font:500 20px/30px Inter;margin:4px 0}
.card p{font:400 14px/26px Inter;letter-spacing:.8px;margin:0}
.card b{font-weight:700}
.radio{position:absolute;right:16px;top:16px;width:26px;height:26px;border-radius:50%;border:2px solid #C3C3C3}
.card--active .radio{border-color:var(--primary)}

/* Forms */
.grid-3{display:grid;grid-template-columns:1fr;gap:24px}
@media(min-width:900px){.grid-3{grid-template-columns:repeat(3,1fr)}}
.grid-2{display:grid;grid-template-columns:1fr;gap:24px}
@media(min-width:900px){.grid-2{grid-template-columns:repeat(2,1fr)}}
.label{display:block;font:400 14px/20px Poppins;color:#292A2A;margin:0 0 6px}
.input, .select{height:46px;border:1px solid var(--line);border-radius:8px;background:#fff;padding:0 12px;font:400 14px/20px Poppins;color:#292A2A;width:100%}
.input::placeholder{color:var(--muted)}

/* Buttons */
.actions{display:flex;gap:16px;margin-top:16px}

.btn--outline{border:1px solid var(--darkb);background:#fff;color:var(--darkb)}
.btn--primary{background:var(--darkb);color:#fff;border:none}
.btn--primary:hover{opacity:.9}

/* Topbar layout */
.topbar .container{display:flex;align-items:center;justify-content:space-between}
@media(min-width:768px){.nav{display:flex}}

/* Booking page 3 CSS Start here */
 

    /* Radios */
    .radios{display:flex;gap:32px}
    .radiob{display:flex;align-items:center;gap:12px;cursor:pointer}
    .radiob input{display:none}
    .radio__control{width:26px;height:26px;border-radius:50%;border:2px solid #414141;display:flex;align-items:center;justify-content:center}
    .radiob input:checked + .radio__control{border-color:var(--darkb)}
    .radiob input:checked + .radio__control::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--darkb)}
    .radio__label{font:14px Poppins,Inter,sans-serif}
    .radio__label strong{font-weight:700}

    /* Cards */
    .packages{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin:8px 0 40px}
     #packages-container{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin:8px 0 40px}
    .card{background:#fff;border:1px solid rgba(19,18,16,.10);border-radius:4px}
    .card--active{border-color:#955551;box-shadow:0 0 30px rgba(0,0,0,.2)}
    .card__head{text-align:center;padding:24px 24px 0}
    .card__title{font-size:20px;margin:0 0 8px}
    .card__subtitle{font-size:14px;letter-spacing:.7px;margin:0 0 16px}
    .card__price{text-align:center;padding:0 24px 22px}
    .amount{font-size:30px;font-weight:700}
    .time{font-size:14px;letter-spacing:.7px}
    .card__list{list-style:none;margin:0;padding:0 24px 24px;display:grid;gap:15px}
    .card__list li::before{content:"• "}

    /* Schedule */
    .schedule{margin:24px 0}
    .grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-bottom:16px}
    .field label{display:block;font:14px Poppins,Inter,sans-serif;margin:0 0 8px}
    .input{border:1px solid var(--border);border-radius:6px;height:46px;display:flex;align-items:center;padding:0 14px;background:#fff}
    .input input,.input select{border:0;outline:0;width:100%;font:14px Poppins,Inter,sans-serif;color:#292A2A;background:transparent}
    .input--icon{position:relative}
    .input--icon .icon{position:absolute;right:14px;top:50%;transform:translateY(-50%)}
    .field textarea{width:100%;border:1px solid var(--border);border-radius:8px;padding:14px;font:14px Poppins,Inter,sans-serif;resize:none;background:#fff}

    /* Payment */
    .payment{display:flex;flex-direction:column;align-items:center;margin:32px 0}
    .payment__bar{width:588px;max-width:100%;background:#F1BD9F;
        border:1px solid rgba(19,18,16,.10);border-width: 1px 1px 0px 1px;
border-radius:4px;padding:16px 24px 24px 24px;display:flex;align-items:center;gap:16px}
    .payment__title{color:var(--darkb);margin:0;font:500 16px Inter,system-ui}
    .payment__cta{color:var(--darkb);font:400 16px Inter;margin-left:auto;letter-spacing: 0.80px;}
    .note{width:588px;max-width:100%;background:#fff;border-radius:4px;padding:12px 24px;text-align:center;
        color: #70403C;
font-size: 12px;
font-family: Inter;
font-weight: 400;
line-height: 19px;
letter-spacing: 0.60px;
border: 1px rgba(19, 18, 16, 0.10) solid;
word-wrap: break-word;margin-top:-8px}

    /* Actions */
    .actions{display:flex;gap:16px;margin:24px 0}
    .actions .btn{min-width:139px}

@media (max-width: 800px) {
    .hero_b h1 {
        font-size: 28px !important;
        font-family: Inter;
        font-weight: 200;
        line-height: 40px !important;
        margin: -14px 0 20px !important;
        color: white;
    }
    .hero_b p
    {
     color: #fff;
    max-width: 629px;
    margin: 0 auto;
    font-size: 14px;
    line-height: 30px;
    letter-spacing: 2px;
    text-transform: capitalize;       
    }
    .service-heading {
    line-height: 30px !important;
}
.steps h3 {
    margin: 0 0 20px;}
.steps-track,.step
{
    gap: 0px !important;
}
.panel-wrap {
    padding: 0px 10px 10px 20px;
}
.panel-content {
    padding: 0px 18px;
}
.services,.packages, #packages-container
{
  display: flex;
        gap: 14px;
        overflow-x: auto;
        scroll-behavior: smooth;
        padding: 0px 0px !important;
}
.card,.package.card
{
    flex: 0 0 70%;
        min-width: 240px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        background: #fff;
        overflow: hidden;
}
.card p {
    font: 400 12px / 25px Inter;}
    
    .card h5 {
    font: 500 17px / 30px Inter;
    margin: 4px 0;
}
.card__list
{
    padding: 0px 10px 15px 10px !important;    
}
 .card__price {
        font-size: 14px !important;
        line-height: 35px !important;
        padding: 05px 0px 7px !important;
    }
}