/* Body text (paragraphs, blog, content) */
body {


  line-height: 1.7;
/* Optional: dark gray for soft readability */
}




/* Optional: make headings uppercase for publishing feel */
h1, h2 {
  text-transform: uppercase;
}


/* Quicksand for headings */
h1, h2 {
  font-family: 'Quicksand', sans-serif;
  font-weight: 800;
}

/* Nunito for sub-headings */
h3, h4, h5 {
  font-family: 'Nunito', sans-serif;
  font-weight: 600;
}


     
     
        
        .authors-section {
            max-width: 1300px;
            margin: 0 auto;
            position: relative;
            overflow: visible;
        }
        
        .section-header {
            text-align: center;
            margin-bottom: 60px;
            position: relative;
            padding: 0 20px;
        }
        
        .section-tagline {
            font-size: 18px;
            color: #C19C67;
            text-transform: uppercase;
            letter-spacing: 3px;
            margin-bottom: 1px;
             margin-top: 50px;
            font-weight: 600;
            display: inline-block;
            position: relative;
        }
        
      
        
        .authors-section .section-title {
             font-family: 'Quicksand', sans-serif;
            font-size: 48px;
            color: #5D3B24;
            margin: 20px 0;
            font-weight: 800;
   
            margin-top: 20px;
        }
        
        .section-subtitle {
            font-size: 20px;
            color: #C19C67;
            max-width: 800px;
            margin: 0 auto;
            font-weight: 200;
            margin-top: -70px;
            font-weight: 800;
        }
        .readmore-content {
  display: none;
}
.readmore-toggle {
  color: #6E6E3B;
  font-weight: 600;
  cursor: pointer;
  margin-left: -2px;
}

        .content-container {
            display: flex;
            flex-wrap: wrap;
            gap: 50px;
            margin: 50px 0;
            align-items: center;
        }
        
        .text-content {
            flex: 1;
            min-width: 300px;

         
        }
        
        .text-content p {
          margin-top: -25px;
            margin-bottom: 25px;
            font-size: 17px;
            line-height: 1.8;
        }
        
        .text-content h3 {
           
            font-size: 28px;
            color: #5D3B24;
            margin: 35px 0 20px;
            padding-bottom: 10px;
            border-bottom: 2px solid #e8d9c5;
            position: relative;
        }
        
        .text-content h3::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 60px;
            height: 2px;
            background: #8c6d46;
        }
        
        .image-content {
            flex: 1;
            min-width: 300px;
            position: relative;
            text-align: center;
        }
        
        .main-image {
            width: 100%;
            margin-top: -100px;
            transition: transform 0.5s ease;
        }
        
        .main-image:hover {
            transform: scale(1.02);
        }
        
        /* Process Section Styling */
        .process-section {
            padding: 70px 40px;
            border-radius: 20px;
            margin: 60px 0;
            position: relative;
            overflow: hidden;
        }
        
        .process-header {
            margin-top: -110px;
            text-align: center;
            margin-bottom: 60px;
        }
        
        .eyebrow {
            color: #C19C67;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 2px;
            margin-bottom: 15px;
            font-size: 18px;
            margin-top: -55px;
        }
        
        .process-title {
            font-size: 42px;
            line-height: 1.3;
            font-weight: 700;
            color: #C19C67;
            margin-bottom: 20px;
          
        }
        
        .process-subtitle {
            font-size: 20px;
            color: #7a6651;
            max-width: 800px;
            margin: 0 auto;
        }
        
        /* ===== Alternating Card Timeline ===== */
      /* === TIMELINE BACKGROUND === */
.timeline-alt {
  position: relative;
  width: 100vw;                 
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  padding: 28px 0;              
  background: #ffffff;   /* ✅ pure white background */
  overflow: hidden;
  z-index: 1;
  margin-bottom: -200px;

  
    background-image: var(--fade);
    background-blend-mode: multiply;
}

  .timeline-alt .books-particles{
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    display: block;
  }
  .timeline-alt .timeline-content{
    position: relative; z-index: 2; color: #f6f2ea;
    text-align: center;
  
  }
  .timeline-title{
    font-size: clamp(28px, 4vw, 48px);
    margin: 0 0 10px;
    letter-spacing: .5px;
    text-align: center;
    margin-bottom: 50px;
    color: #5D3B24;
  }
  .timeline-alt p{
  
    font-weight: 400;
    opacity: .9;
    margin: 0;
  }

/* Center line */
.timeline-alt::after{
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 3px;
  transform: translateX(-50%);
  background: #C19C67;

  opacity: 0.35;
  z-index: 2;
}

/* Timeline items container */
.timeline-alt .tl-item{
  width: min(1200px, 100%);    /* max width lock */
  margin: 18px auto;           /* center the row */
  padding: 0 16px;             /* side gutters */
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 24px;
  align-items: stretch;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .5s ease, transform .5s ease;
  z-index: 3;
}

.tl-item.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Cards */
.tl-card{
  background: #fff;
  border: 1px solid #e8d9c5;
  border-radius: 16px;
  padding: 22px 24px;
  box-shadow: 0 8px 24px rgba(93, 59, 36, 0.08);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  width: clamp(280px, 46vw, 560px);  /* limit card width */
  max-width: 100%;
  position: relative;
}

.tl-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(93, 59, 36, 0.12);
  border-color: #d9c6ab;
}

/* Odd/even alignment */
.tl-item:nth-child(odd) .tl-card  { justify-self: end; }
.tl-item:nth-child(even) .tl-card { justify-self: start; }

/* Badge */
.tl-badge {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 56px; height: 56px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: linear-gradient(135deg, #8c6d46, #5D3B24);
  color: #fff;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgba(93, 59, 36, 0.3);
  border: 3px solid #fff;
  z-index: 4;
  font-size: 20px;
}

/* Decorative pointer */
.tl-card::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 10px; height: 10px;
  background: #fff;
  border-top: 1px solid #e8d9c5;
  border-right: 1px solid #e8d9c5;
  transform: translateY(-50%) rotate(45deg);
}
.tl-item:nth-child(odd) .tl-card::after  { right: -7px; }
.tl-item:nth-child(even) .tl-card::after { left: -7px; transform: translateY(-50%) rotate(225deg); }

@media (max-width: 768px)
 {

  .authors-section .section-title {
            text-align: left;
            font-size: 20px;
            color: #5D3B24;
            margin: 20px 0;
            font-weight: 700;
   margin-bottom: -50px;
            margin-top: 20px;
        }
        .authors-section{
          margin-top: -25px;
        }
        
  .timeline-alt {
    padding: 40px 20px;
    position: relative;
  
  }

  /* Remove center line if previously set */
  .timeline-alt::after {
    display: none;
  }

  /* Add left timeline line */
  .timeline-alt::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 20px;
    width: 3px;
    background: linear-gradient(to bottom, #8c6d46, #5D3B24);
    opacity: 0.25;
    z-index: 0;
  }

  /* Make tl-item full-width, block level, and remove grid layout */
  .tl-item {
    display: block !important;
    margin: 50px 0;
    
    position: relative;
    width: 100%;
    max-width: 100%;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Disable grid layout on tl-item */
  .tl-item {
    grid-template-columns: none !important;
    column-gap: 0 !important;
  }

  /* Force card to left alignment with margin */
  .tl-card {
      margin-top: 50px;
    width: calc(100% - 40px);
    margin-left: 20px !important;
    padding: 16px 20px;
    background: #fff;
    border-left: 4px solid #8c6d46;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(93, 59, 36, 0.08);
    text-align: left;
  }

  /* Ensure no conflicting alignment rules */
  .tl-item:nth-child(odd) .tl-card,
  .tl-item:nth-child(even) .tl-card {
    justify-self: unset !important;
    grid-column: auto !important;
  }

  /* Hide arrows on left/right */
  .tl-card::after {
    display: none !important;
  }

  /* Left-aligned badge */
  .tl-badge {
    position: absolute;
    left: 20px;
    top: 0;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    font-size: 18px;
    background: #5D3B24;
    color: white;
    border: 3px solid #fff;
    box-shadow: 0 6px 18px rgba(93, 59, 36, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    z-index: 2;
    margin-left: -15px;
  }

  .tl-title {
    font-size: 18px;
    margin-bottom: 6px;
  }

  .tl-text {
    font-size: 15px;

  }

  /* Hide the alternate side spacer div if any */
  .tl-spacer {
    display: none !important;
  }
}



        /* SVG Background Elements */
        .svg-background {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
            pointer-events: none;
            overflow: hidden;
        }

        .floating-books {
            position: absolute;
            animation: float 12s ease-in-out infinite;
        }

        .floating-pen {
            position: absolute;
            animation: float 8s ease-in-out infinite;
        }

        .floating-page {
            position: absolute;
            animation: float 10s ease-in-out infinite;
            opacity: 0.7;
        }

        @keyframes float {
            0% { transform: translateY(0) rotate(0deg); }
            50% { transform: translateY(-20px) rotate(5deg); }
            100% { transform: translateY(0) rotate(0deg); }
        }

        @keyframes fadeInOut {
            0% { opacity: 0.2; }
            50% { opacity: 0.6; }
            100% { opacity: 0.2; }
        }

        @keyframes drawLine {
            from { stroke-dashoffset: 1000; }
            to { stroke-dashoffset: 0; }
        }

        .timeline-alt::before {
            content: '';
            position: absolute;
            top: 0; bottom: 0;
            left: 50%;
            width: 3px;
            transform: translateX(-50%);
            background: linear-gradient(to bottom, #8c6d46, #5D3B24);
            border-radius: 3px;
            opacity: 0.35;
            z-index: 1;
         
        }

        .tl-item {
             margin-top: -150px;
            position: relative;
            display: grid;
            grid-template-columns: 1fr 1fr;
            column-gap: 40px;
            align-items: stretch;
            margin: 36px 0;
            opacity: 0;
            transform: translateY(10px);
            transition: opacity .5s ease, transform .5s ease;
            z-index: 2;
        }

        .tl-item.is-visible {
            opacity: 1;
            transform: translateY(0);
        }

        
        /* Left/Right placement */
        .tl-item:nth-child(odd) .tl-card { grid-column: 1 / 2; }
        .tl-item:nth-child(odd) .tl-spacer { grid-column: 2 / 3; }
        .tl-item:nth-child(even) .tl-card { grid-column: 2 / 3; }
        .tl-item:nth-child(even) .tl-spacer { grid-column: 1 / 2; }

        /* Badge (number bubble) bridging center line */
        .tl-badge {
          
            position: absolute;
            left: 50%;
            top: 50%;
            width: 56px; height: 56px;
            transform: translate(-50%, -50%);
            border-radius: 50%;
            background: linear-gradient(135deg, #8c6d46, #5D3B24);
            color: #fff;
            font-weight: 700;
            display: flex; align-items: center; justify-content: center;
            box-shadow: 0 6px 18px rgba(93, 59, 36, 0.3);
            border: 3px solid #fff;
            z-index: 3;
            font-size: 20px;
        }

        /* Decorative pointer from card to midpoint (subtle) */
        .tl-card::after {
            content: '';
            position: absolute;
            top: 50%;
            width: 14px; height: 14px;
            background: #fff;
            border-top: 1px solid #e8d9c5;
            border-right: 1px solid #e8d9c5;
            transform: translateY(-50%) rotate(45deg);
        }

        .tl-item:nth-child(odd) .tl-card::after { right: -7px; }
        .tl-item:nth-child(even) .tl-card::after { left: -7px; transform: translateY(-50%) rotate(225deg); }

        .tl-kicker {
            font-size: 13px;
            letter-spacing: 1.2px;
            text-transform: uppercase;
            color: #8c6d46;
            font-weight: 600;
            margin-bottom: 6px;
        }

        .tl-title {
        
            font-size: 22px;
            color: #5D3B24;
            margin-bottom: 8px;
            font-weight: 700;
        }

        .tl-text {
            font-size: 16px;
            color: #4a3c2a;
            line-height: 1.7;
        }


        .open-book-shape{ 
  position:absolute; left:0; width:100%;
  height:clamp(120px,14vw,220px);
  display:block; pointer-events:none; z-index:3;
  filter: drop-shadow(0 12px 28px rgba(0,0,0,.18));
}
.open-book-bottom{ bottom:0; }   /* top wali ke liye .open-book-top{ top:0 } */




        /* Let the vertical line start below the header */
.timeline-alt { 
  --tl-line-start: 240px;  /* adjust as needed based on header height */
}

/* existing center line: change top to use variable */
.timeline-alt::after{
  content: '';
  position: absolute;
  top: var(--tl-line-start);  /* was top: 0 */
  bottom: 0;
  left: 50%;
  width: 3px;
  transform: translateX(-50%);
  background: linear-gradient(to bottom, #8c6d46, #5D3B24);
  border-radius: 3px;
  opacity: 0.35;
  z-index: 2;
}

/* header block */
.timeline-header{
  position: relative;
  z-index: 3;
  max-width: 900px;
  margin: 0 auto 28px;
  padding: 0 24px;
  text-align: center;
  margin-top: -20px;
}

 .eyebrow{
  color:#5D3B24;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:2px;
  font-size:18px;
  display:block;
  margin-bottom:8px;
  margin-top: 120px;
  text-align:center;
}

.timeline-header .timeline-title{
 
  font-size: clamp(28px, 4vw, 42px);
  color:#5D3B24;
  font-weight:700;
  line-height:1.25;
  margin: 6px 0 10px;
}

.timeline-header .timeline-subtitle{
  font-size: clamp(15px, 2.2vw, 18px);
  color:#7a6651;
  max-width: 760px;
  margin: 0 auto;
}

/* Mobile tweaks: header smaller, line starts closer */
@media (max-width: 768px){
  .timeline-alt{ --tl-line-start: 140px; } /* if you hide the line on mobile, ignore */
  .timeline-header{ margin-bottom: 18px; padding: 0 16px; }
}

        /* Responsive */
        @media (max-width: 900px) {
            .timeline-alt::before { left: 28px; }
            .tl-item {
                grid-template-columns: 1fr;
                row-gap: 14px;
                margin: 28px 0;
            }
            .tl-card {
                grid-column: 1 / -1;
                padding-left: 24px; /* space for badge */
            }
            .tl-item .tl-spacer { display: none; }
            .tl-badge {
                left: 28px; top: 0;
                transform: translate(-50%, -50%);
            }
            .tl-card::after { display: none; }
            
            /* Adjust SVG elements for mobile */
            .floating-books, .floating-pen, .floating-page {
                display: none;
            }
        }

        /* Even smaller tweaks */
        @media (max-width: 480px) {
            .tl-title { font-size: 28px; }
            .tl-text  { font-size: 16px; }
            .tl-badge { width: 50px; height: 50px; font-size: 18px; }
        }
@media (max-width: 768px) {
  .authors-section {
    padding: 0 20px;
  }

  .section-header {
    text-align: left;
    margin-bottom: 40px;
    margin-top: 0px;
  }

  .section-tagline {
    font-size: 16px;
    letter-spacing: 1px;
    margin-top: 30px;
    margin-bottom: -6px;
    text-align: center;
  }

  .section-title {
    font-size: 28px;
    line-height: 1.3;
    margin: 10px 0;
      margin-top: -10px;
  }

  .section-subtitle {
    font-size: 16px;
    margin-top: -60px;
    margin-bottom: -20px;
    max-width: 100%;
  }

  .content-container {
    flex-direction: column;
    gap: 30px;
    margin: 30px 0;
  }

  .image-content {
    order: 1; /* image comes first */
    margin-bottom: 10px;
  }
   .image-content {
            flex: 1;
            min-width: 200px;
            position: relative;
            text-align: center;
        }
        

  .main-image {
    max-width: 100%;
    margin-top: 0;
  }

  .text-content {
    order: 2;
    padding: 0;
  }

  .text-content h3 {
    font-size: 22px;
    margin-top: 30px;
  }

  .text-content p {
    font-size: 16px;
    margin-top: 10px;
    line-height: 1.7;
  }
}
/* serviceprocesss */

    .container {
      max-width: 2000px;
      margin: 0 auto;
      padding: 0 20px;
    }

    .process-section {
      padding: 8rem 0;
      background: #ffffff;
      position: relative;
      overflow: hidden;
      margin-top: -90px;
      margin-bottom: -20px;
    }

    /* Background with icons (single wrapper only) */
    .background-elements {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      z-index: 0;
      overflow: hidden;
      /* NOTE: Do NOT set opacity here, warna sab icons fade ho jayenge */
    }

    /* Floating background SVG icons */
    .bg-icon {
      position: absolute;
      opacity: 0.18;         /* subtle but visible */
      animation: float 25s infinite ease-in-out;
      filter: drop-shadow(0 4px 8px rgba(0,0,0,0.12));
    }

    .icon-book       { width: 120px; top: 10%; left: 8%;   animation-delay: 0s; }
    .icon-quill      { width: 100px; top: 22%; right: 10%; animation-delay: -6s; }
    .icon-paper      { width: 120px; bottom: 18%; left: 12%; animation-delay: -12s; }
    .icon-typewriter { width: 140px; bottom: 24%; right: 8%; animation-delay: -18s; }
    .icon-rocket     { width: 110px; top: 36%; left: 46%; animation-delay: -22s; }

    @keyframes float {
      0%, 100% { transform: translateY(0) rotate(0deg); }
      33%      { transform: translateY(-14px) rotate(4deg); }
      66%      { transform: translateY(10px) rotate(-4deg); }
    }

    .section-title {
      text-align: center;
      margin-bottom: 5rem;
      color: #5D3B24;
      position: relative;
      font-family: 'Cormorant Garamond', serif;
      font-weight: 700;
      font-size: 3.5rem;
      letter-spacing: 1px;
      z-index: 2;
    }

    .section-title:after {
      content: '';
      display: block;
      width: 100px;
      height: 3px;
      background: linear-gradient(90deg, transparent, #C2996A, transparent);
      margin: 20px auto;
      border-radius: 2px;
    }

    .process-steps {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 30px;
      position: relative;
      z-index: 2; /* above background icons */
    }

    .step {
      background: rgba(255, 255, 255, 0.9);
      border-radius: 16px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
      padding: 40px 30px;
      width: 100%;
      max-width: 380px;
      transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      position: relative;
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, 0.5);
      backdrop-filter: blur(5px);
    }

    .step::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 5px;
      background: linear-gradient(90deg, #C2996A, #8a6d3b);
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    .step:hover {
      transform: translateY(-10px);
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
    }

    .step:hover::before { opacity: 1; }

    .step-number {
      position: absolute;
      top: 0;
      right: 0;
      background: linear-gradient(135deg, #C2996A 0%, #8a6d3b 100%);
      color: white;
      font-size: 1.3rem;
      font-weight: 700;
      width: 45px;
      height: 45px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-bottom-left-radius: 16px;
      box-shadow: -3px 3px 10px rgba(0,0,0,0.1);
    }

    .step-icon {
      font-size: 3rem;
      margin-bottom: 25px;
      background: #C19C67;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      filter: drop-shadow(0 3px 5px rgba(139, 108, 66, 0.2));
      transition: all 0.4s ease;
    }

    .step:hover .step-icon { transform: scale(1.1); }

    .step-title {
      font-size: 1.7rem;
      margin-bottom: 20px;
      color: #C19C67;
      font-weight: 600;
      font-family: 'Cormorant Garamond', serif;
      letter-spacing: 0.5px;
    }

    .step-description {
      color: #7a6a5f;
      font-size: 1.05rem;
      line-height: 1.7;
   
    }

    /* Responsive */
    @media (max-width: 1200px) {
      .process-steps { gap: 25px; }
      .step { max-width: 340px; padding: 35px 25px; }
    }

    @media (max-width: 992px) {
      .process-steps { gap: 20px; }
      .step { max-width: 300px; padding: 30px 20px; }
      .section-title { font-size: 3rem; }
    }

    @media (max-width: 768px) {
      .process-steps { flex-direction: column; align-items: center; }
      .step { margin-bottom: 30px; max-width: 90%; }
      .section-title { font-size: 2.5rem; }
      .process-section { padding: 5rem 0; }
    }

    @media (max-width: 576px) {
      .step { max-width: 100%; }
      .section-title { font-size: 2.2rem; }
      .step-icon { font-size: 2.5rem; }
      .step-title { font-size: 1.5rem; }
    }

/* tab */
   :root {
            --brand-color: #C2996A;
            --light-tint: #fff7f0;
            --text-color: #333;
            --light-gray: #f5f5f5;
            --border-radius: 8px;
            --shadow: 0 4px 12px rgba(0,0,0,0.08);
            --transition: all 0.3s ease;
        }
        
        
        
       
        
        .editing-tabs {
          margin-top:-20px;
            max-width: 1400px;
           margin-bottom:20px;
         
            overflow: hidden;
        }
        
        .section-heading {
            text-align: center;
            padding: 40px 20px 20px;
            font-size:3rem;
            color: #5D3B24;
            margin-bottom: 30px;
        }
        
        .tabs-container {
           margin-top:15px;
            display: flex;
            flex-direction: column;
        }
        
        .tabs-list {
            display: flex;
            flex-wrap: wrap;
            list-style: none;
            border-bottom: 1px solid #eee;
        }
        
        .tab-item {
            flex: 1;
            min-width: 120px;
        }
        
        .tab-button {
            width: 100%;
            padding: 16px 12px;
            background: white;
            border: none;
            border-bottom: 3px solid transparent;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 8px;
            font-weight: 800;
            color: #C2996A;
            transition: var(--transition);
            font-size: 15px;
        }
        
        .tab-button:hover {
            background-color: var(--light-tint);
        }
        
        .tab-button.active {
            border-bottom-color: var(--brand-color);
            color: var(--brand-color);
        }
        
        .tab-button i {
            font-size: 1.2rem;
        }
        
        .tabpanels {
            position: relative;
        }
        
        .tabpanel {
            display: none;
            padding: 30px;
            animation: fadeIn 0.5s ease forwards;
        }
        
        .tabpanel.active {
            display: block;
        }
        
        .panel-content {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 30px;
            align-items: center;
        }
        
        .panel-text h3 {
            font-size: 1.8rem;
            margin-bottom: 15px;
            color: var(--brand-color);
        }
        
        .panel-text p {
            font-size: 1.1rem;
            color: #555;
        }
        
        .panel-image {
            border-radius: var(--border-radius);
            overflow: hidden;
            box-shadow: var(--shadow);
            transition: var(--transition);
            height: 300px;
            margin-top: 50px;
        }
        
        .panel-image:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 16px rgba(0,0,0,0.12);
        }
        
        .panel-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        
        /* Responsive styles */
        @media (max-width: 900px) {
            .panel-content {
                grid-template-columns: 1fr;
            }
            
            .panel-image {
                order: -1;
                height: 250px;
            }
        }
        
        @media (max-width: 640px) {
            .tabs-list {
                flex-direction: column;
            }
            
            .tab-button {
                flex-direction: row;
                justify-content: flex-start;
                gap: 15px;
                text-align: left;
                padding: 15px 20px;
            }
            
            .section-heading {
                font-size: 1.8rem;
                padding: 30px 15px 15px;
            }
            
            .tabpanel {
                padding: 20px;
            }
          }
          /* tab */

          * {
  border: none !important; /* Debugging borders hatao */
}

.section-wrapper {
  padding: 60px 20px;
}

.section-container {
  max-width: 1200px;
  margin: 0 auto;
}

/* Intro (Hero) */
.intro-block {
  text-align: center;
  margin-bottom: 60px;
}

.main-heading {
  font-size: 40px;
  font-weight: 800;
  color: #5D3B24;
  margin-bottom: 16px;
}

.intro-text {
  font-size: 20px;
  color: #555;
  margin: 0 auto;
  max-width: 700px;
}

/* Features Grid */
.features-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-bottom: 60px;
  justify-content: center;
}

.feature-card {
  flex: 1 1 300px;
  background: #fff;
  border-radius: 12px;
  padding: 28px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  text-align: center;
}

.feature-card lottie-player {
  width: 90px;
  height: 90px;
  margin: 0 auto 16px;
}

.feature-title {
  font-size: 22px;
  margin-bottom: 12px;
  color: #C2996A;
}

.feature-desc {
  font-size: 16px;
  color: #555;
  margin: 0;
}

/* Quote */
.highlight-quote {
  background: #C2996A;
  color: #fff;
  padding: 40px;
  border-radius: 16px;
  text-align: center;
  margin-bottom: 60px;
}

.highlight-quote p {
  margin: 0;
  font-size: 22px;
  font-style: italic;
  line-height: 1.8;
}

/* Editorial */
.editorial-block {
  text-align: center;
  max-width: 850px;
  margin: 0 auto;
}

.editorial-title {
  font-size: 28px;
  font-weight: 700;
  color: #5D3B24;
  margin-bottom: 16px;
}

.editorial-text {
  font-size: 18px;
  color: #444;
  margin: 0;
}

/* Responsive */
@media (max-width: 768px) {
  /* Intro (Hero) */
.intro-block {
  text-align: left;
  margin-top: -50px;
}

  .main-heading {
    font-size: 25px;
  }
  .intro-text {
    font-size: 18px;
  }
  .feature-card {
    flex: 1 1 100%;
    margin-top: -10px;
    text-align: left;
  }
  .highlight-quote p {
    font-size: 18px;
    text-align: left;
  }
  .editorial-title {
  font-size: 25px;
 text-align: left;
  margin-top: -10px;
}
.editorial-text{
  text-align: left;
}

}

/* General CTA container */
.cta-container {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 30px;
  padding: 0 20px;
    margin-left: -80px;
}

/* Base CTA Button Styles */
.cta-btn {
  display: inline-flex;
  align-items: center;
  padding: 12px 24px;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 50px;
  text-decoration: none;
  color: #fff;
  background-color: #C59D73; /* Default Button Color */
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  text-align: center;
  min-width: 100px;
  justify-content: center;
  /* margin-left: 50px; */
  position: relative;
  left:45px;

}

/* CTA Button Hover Effects */
.cta-btn:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.2), 0 0 15px rgba(166, 168, 126, 0.3);
}

/* Specific Button Color Variations */
.cta-btn-talk {
  background-color: #C59D73;
}

.cta-btn-quote {
  background-color: #5D3B24;
}

.cta-btn-call {
  background-color: #C59D73;
  font-weight: 700;
}

/* Font Awesome Icons */
.cta-btn i {
  margin-right: 10px;
  font-size: 1.1rem;
}

/* Responsive Design */
@media (max-width: 768px) {
  /* Use grid layout for mobile view to align two buttons per row */
  .cta-container {
    display: grid;
    grid-template-columns: 1fr 1fr; /* First two buttons in one row */
    grid-gap: 15px;
    justify-items: center; /* Center the buttons */
    margin-top: 30px;
     margin-left: 0px;
  }

  /* Ensure the third button takes a new line */
  .cta-btn:nth-child(3) {
    grid-column: span 2; /* Make the third button take up the full row */
  }

  .cta-btn {
    font-size: 0.9rem; /* Adjust font size */
    padding: 10px 20px;
    min-width: 130px;
     position: relative;
  left:-15px;
    
  }

  /* Adjust icon sizes for smaller screens */
  .cta-btn i {
    font-size: 1rem;
    margin-right: 8px;
  }
}

/* Mobile-first adjustments */
@media (max-width: 480px) {
  .cta-container {
    gap: 10px;
  }

  .cta-btn {
    font-size: 0.85rem; /* Smaller font on smaller screens */
    padding: 8px 16px;
    min-width: 120px;
  }
  
  /* Adjust icon sizes for smaller screens */
  .cta-btn i {
    font-size: 0.9rem;
    margin-right: 6px;
  }
}
/* idea tab */
.book-process-container {
  text-align: center;
  margin: 40px auto;
  padding: 40px 50px;
  background: linear-gradient(135deg, #fdfdfd, #f5f2ef);
  border-radius: 20px;
  max-width: 950px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);

  transition: all 0.3s ease-in-out;
}

.book-process-container:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
}

.book-process-title {
  font-size: clamp(24px, 4.5vw, 30px);
  font-weight: 800;
  color: #5D3B24;
  margin-bottom: 24px;
  letter-spacing: 0.5px;
}

.book-process-description {
  font-size: clamp(16px, 3vw, 20px);
  color: #444;
  line-height: 1.9;
  font-weight: 400;
  margin-bottom: 30px;
  max-width: 750px;
  margin-left: auto;
  margin-right: auto;
}

.book-process-steps {
  display: flex;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
}

.step {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 180px;
  padding: 20px;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease-in-out;
}

.step:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.15);
}

.step-icon {
  width: 60px;
  height: 60px;
  margin-bottom: 15px;
  border-radius: 50%;
  background: #f4eae3;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  color: #5D3B24;
  transition: all 0.3s ease-in-out;
}

.step:hover .step-icon {
  background: #5D3B24;
  color: #fff;
}

.step-title {
  font-size: 18px;
  color: #5D3B24;
  font-weight: 600;
  text-align: center;
  margin-top: 5px;
}

/* 📱 Mobile Responsive */
@media (max-width: 768px) {
  .book-process-container {
    text-align: left;
    padding: 30px 20px;
  }

  .book-process-title,
  .book-process-description {
    text-align: left;
    margin-left: 0;
    margin-right: 0;
  }

  .book-process-steps {
    flex-direction: column;
    gap: 20px;
    align-items: flex-start;
  }

  .step {
    flex-direction: row;
    align-items: center;
    max-width: 100%;
    gap: 15px;
    padding: 15px 20px;
  }

  .step-icon {
    margin-bottom: 0;
    flex-shrink: 0;
  }

  .step-title {
    text-align: left;
    font-size: 16px;
  }
}

/* idea tab */
/* Main Container */
.cta-section {
  width: 100%;
  background-color: #5D3B24;
  overflow: hidden;
  color: #fff;
  position: relative;
  transition: all 0.3s ease;
}

/* Background Large Text */
.cta-bg-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  font-size: clamp(3rem, 15vw, 12rem); /* ✅ responsive font size */
  font-weight: 900;
  color: white;
  opacity: 0.1;
  line-height: 1;
  user-select: none;
  text-align: center;
  word-break: break-word;
  padding: 0 10px;
}

/* Foreground Content */
.cta-content {
  position: relative;
  z-index: 1;
  padding: clamp(24px, 6vw, 64px) clamp(16px, 4vw, 48px);
  text-align: center;
  max-width: 1200px;
  margin: 0 auto;
}

.cta-title {
  font-size: clamp(1.5rem, 4vw, 2.5rem); /* scales smoothly */
  font-weight: 700;
  margin-bottom: clamp(12px, 2vw, 20px);
  color: #ffffff;
}

.cta-description {
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  margin-bottom: clamp(20px, 5vw, 40px);
  opacity: 0.9;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}

/* Buttons */
.cta-buttons {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap; /* ✅ wrap for mobile */
}

.cta-btn {
  display: inline-block;
  font-weight: 600;
  padding: clamp(10px, 2.5vw, 14px) clamp(24px, 6vw, 36px);
  border-radius: 9999px;
  text-decoration: none;
  font-size: clamp(0.9rem, 2vw, 1rem);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
  text-align: center;
}

/* Primary Button */
.cta-btn.primary {
  background-color: #C2996A;
  color: #ffffff;
}

.cta-btn.primary:hover {
  background-color: #a87f55;
}

/* Secondary Button */
.cta-btn.secondary {
  background-color: #ffffff;
  color: #C2996A;
}

.cta-btn.secondary:hover {
  background-color: #f5f5f5;
}

/* 📱 Mobile Adjustments */
@media (max-width: 768px) {
  .cta-content {
    text-align: left;
    margin-top: 60px;
  }
  .cta-buttons {
    justify-content: flex-start;
    gap: 12px;
	  padding-left: 15px;
  }
}
@media (max-width: 768px) {
  .hide-mobile {
    display: none;
  }
}
/* Base: no negative margin */
.btn-cta {
  padding: 12px 24px;
  background-color: #5D3B24;
  color: #fff;
  text-decoration: none;
  border-radius: 6px;
  font-weight: 700;
  text-align: center;
  flex: 0 1 auto;
  transition: transform .15s ease, opacity .15s ease;
}

/* Mobile layout: 2 buttons in first row, 3rd on its own row */
@media (max-width: 480px) {
  .cta-group { 
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
	   margin-bottom: -20px;
      margin-top: 20px;
  }
  .btn-cta {
    flex: 1 1 calc(50% - 8px); /* two per row */
    padding: 12px 16px;
    font-size: 0.95rem;
  }
  .btn-cta:nth-child(3) {
    flex-basis: 100%;          /* third goes full width on next row */
  }
}