/* =========================================================
   CLARION CONSULTANCY SERVICES — SITE STYLESHEET
   Brand tokens derived from the CCS logo (arc / interlock motif)
   ========================================================= */

:root{
  --ccs-blue:        #2647E0;
  --ccs-blue-light:  #4C6BFF;
  --ccs-purple:      #7A2FA6;
  --ccs-orange:      #F5941E;
  --ccs-navy:        #101B3D;
  --ccs-navy-soft:   #16224F;
  --ccs-ink:         #1A2036;
  --ccs-slate:       #5B6478;
  --ccs-bg:          #F6F7FB;
  --ccs-white:       #FFFFFF;

  --ccs-gradient: linear-gradient(100deg, var(--ccs-blue) 0%, var(--ccs-purple) 52%, var(--ccs-orange) 100%);
  --ccs-gradient-soft: linear-gradient(100deg, rgba(38,71,224,.10) 0%, rgba(122,47,166,.10) 52%, rgba(245,148,30,.10) 100%);

  --ccs-radius: 14px;
  --ccs-shadow: 0 10px 30px -12px rgba(16,27,61,.18);
  --ccs-font-head: 'Sora', sans-serif;
  --ccs-font-body: 'Inter', sans-serif;
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  font-family:var(--ccs-font-body);
  color:var(--ccs-ink);
  background:var(--ccs-bg);
  line-height:1.65;
  margin:0;
}

h1,h2,h3,h4,h5,.ccs-heading{
  font-family:var(--ccs-font-head);
  color:var(--ccs-navy);
  font-weight:700;
  line-height:1.2;
  margin:0 0 .6rem;
}

p{ color:var(--ccs-slate); }

a{ text-decoration:none; color:inherit; }

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

.ccs-gradient-text{
  background:var(--ccs-gradient);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.ccs-btn{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--ccs-font-head);
  font-weight:600; font-size:.95rem;
  padding:.7rem 1.5rem;
  border-radius:50px;
  border:none;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.ccs-btn-primary{
  background:var(--ccs-gradient);
  color:#fff;
  box-shadow:0 8px 20px -6px rgba(122,47,166,.45);
}
.ccs-btn-primary:hover{ transform:translateY(-2px); box-shadow:0 12px 26px -6px rgba(122,47,166,.55); color:#fff; }
.ccs-btn-outline {
    background: linear-gradient( 135deg, #2c1a63, var(--ccs-purple) );
    border: 1.5px solid var(--ccs-navy);
    color: white;
}
    .ccs-btn-outline:hover {
        background: linear-gradient( 90deg, #241246, #3b1f7a, var(--ccs-purple), var(--ccs-orange), var(--ccs-purple), #3b1f7a, #241246 );
        color: #fff;
    }

/* =========================================================
   HEADER
   ========================================================= */
.ccs-header{
  position:sticky; top:0; z-index:1030;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(16,27,61,.08);
  transition:box-shadow .25s ease;
}
.ccs-header.is-scrolled{ box-shadow:0 8px 24px -14px rgba(16,27,61,.35); }

.ccs-navbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 0;
}

.ccs-brand{ display:flex; align-items:center; gap:12px; }
.ccs-brand img{ height:44px; width:auto; display:block; }
.ccs-brand-text{ display:flex; flex-direction:column; line-height:1.1; }
.ccs-brand-text strong{
  font-family:var(--ccs-font-head); font-size:1.05rem; font-weight:700; color:var(--ccs-navy);
  letter-spacing:.2px;
}
.ccs-brand-text span{ font-size:.68rem; color:var(--ccs-slate); letter-spacing:1.5px; }

.ccs-nav-links{ display:none; }
@media (min-width:992px){
  .ccs-nav-links{
    display:flex; align-items:center; gap:6px; list-style:none; margin:0; padding:0;
  }
  .ccs-nav-links a{
    font-weight:600; font-size:.94rem; color:var(--ccs-ink);
    padding:10px 16px; border-radius:8px; position:relative;
    transition:color .18s ease;
  }
  .ccs-nav-links a:hover{ color:var(--ccs-blue); }
  .ccs-nav-links a.active{ color:var(--ccs-purple); }
  .ccs-nav-links a.active::after{
    content:''; position:absolute; left:16px; right:16px; bottom:5px; height:2.5px;
    background:var(--ccs-gradient); border-radius:2px;
  }
    .ccs-nav-links li.ccs-has-sub {
        position: relative;
    }
    .ccs-has-sub > a {
        cursor: default;
    }

    .ccs-submenu {
        list-style: none;
        margin: 0;
        padding: 8px 0;
        position: absolute;
        top: 100%;
        left: 0;
        min-width: 230px;
        background: #fff;
        border-radius: 12px;
        border-top: 3px solid var(--ccs-orange);
        box-shadow: 0 16px 34px -12px rgba(16,27,61,.3);
        opacity: 0;
        visibility: hidden;
        transform: translateY(10px);
        transition: opacity .25s ease, transform .25s ease, visibility .25s;
        z-index: 1050;
    }

    .ccs-has-sub:hover > .ccs-submenu{
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .ccs-submenu li a {
        display: block;
        padding: 10px 20px;
        border-radius: 0;
        white-space: nowrap;
        font-weight: 500;
        color: var(--ccs-navy);
        transition: background .2s ease, color .2s ease, padding-left .2s ease;
    }

        .ccs-submenu li a:hover {
            background: #f3effa;
            color: var(--ccs-purple);
            padding-left: 26px;
        }

    .ccs-has-sub:hover > a .ccs-sub-arrow {
        transform: rotate(180deg);
    }
}

.ccs-nav-actions{ display:flex; align-items:center; gap:10px; }

.ccs-toggler{
  border:1.5px solid rgba(16,27,61,.15);
  background:#fff; width:46px; height:46px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.25rem; color:var(--ccs-navy);
}
@media (min-width:992px){ .ccs-toggler{ display:none; } }

/* Offcanvas mobile menu — Bootstrap handles slide/backdrop mechanics;
   the styling below is brand-specific and layered on top. */
.ccs-offcanvas{ width:300px; }
.ccs-offcanvas .offcanvas-header{
  background:var(--ccs-navy); padding:22px 20px;
}
.ccs-offcanvas .offcanvas-header .ccs-brand-text strong,
.ccs-offcanvas .offcanvas-header .ccs-brand-text span{ color:#fff; }
.ccs-offcanvas .btn-close{ filter:invert(1); opacity:.85; }
.ccs-offcanvas .offcanvas-body{ padding:10px 14px 24px; }
.ccs-offcanvas-links{ list-style:none; margin:0; padding:0; }
.ccs-offcanvas-links li + li{ border-top:1px solid rgba(16,27,61,.06); }
.ccs-offcanvas-links a{
  display:block; padding:15px 12px; font-weight:600; color:var(--ccs-ink); font-size:1.02rem;
  border-radius:8px;
}
.ccs-offcanvas-links a:hover{ background:var(--ccs-gradient-soft); color:var(--ccs-purple); }
.ccs-offcanvas-cta{ margin:18px 12px 0; }
.ccs-offcanvas-cta .ccs-btn{ width:100%; justify-content:center; }

/* =========================================================
   FOOTER
   ========================================================= */
.ccs-footer{ background:var(--ccs-navy); color:#c8cde3; position:relative; }
.ccs-footer::before{
  content:''; position:absolute; top:0; left:0; right:0; height:4px; background:var(--ccs-gradient);
}
.ccs-footer .container-xl{ padding-top:56px; padding-bottom:26px; }
/*.ccs-footer-grid{ display:grid; grid-template-columns:1fr; gap:36px; }
@media (min-width:768px){ .ccs-footer-grid{ grid-template-columns:1.3fr 1fr 1fr; gap:28px; } }*/
/* columns ke beech vertical line (sirf desktop) */
@media (min-width:992px) {
    .ccs-footer-line {
        border-left: 1px solid rgba(255,255,255,.14);
    }
}

.ccs-footer-brand{ display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.ccs-footer-brand img{ height:38px; }
.ccs-footer-brand strong{ font-family:var(--ccs-font-head); color:#fff; font-size:1.05rem; }
.ccs-footer p{ color:#a7aec9; font-size:.92rem; }
.ccs-footer h6 {
    font-family: var(--ccs-font-head);
    color: #fff;
    font-size: .85rem;
    letter-spacing: 2px;
    margin-bottom: 16px;
}
.ccs-footer-item{ display:flex; gap:12px; margin-bottom:14px; align-items:flex-start; }
.ccs-footer-icon{
  flex:0 0 auto; width:34px; height:34px; border-radius:50%;
  background:var(--ccs-gradient); display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:.9rem;
}
.ccs-footer-item a, .ccs-footer-item span{ color:#c8cde3; }
.ccs-footer-item a:hover{ color:#fff; }
.ccs-footer-links{ list-style:none; margin:0; padding:0; }
.ccs-footer-links li{ margin-bottom:10px; }
.ccs-footer-links a{ color:#c8cde3; font-size:.92rem; }
.ccs-footer-links a:hover{ color:#fff; }
.ccs-footer-bottom{
  border-top:2px solid rgba(255,255,255,.08); margin-top:36px; padding-top:20px;
  font-size:.82rem; color:#8890ab; display:flex; flex-wrap:wrap; gap:10px;
  justify-content:space-between;
}

/* Utility: page content offset for sticky header not needed (in-flow) */
.ccs-main{ min-height:60vh; }

/* =========================================================
   TOP GRADIENT BAR (animated left-right-left)
   ========================================================= */
.ccs-topbar {
    height: 5px;
    background: linear-gradient(90deg,#241246,#3b1f7a,var(--ccs-purple),var(--ccs-orange),var(--ccs-purple),#3b1f7a,#241246);
    background-size: 300% 100%;
    animation: ccsBarSlide 6s ease-in-out infinite alternate;
}

@keyframes ccsBarSlide {
    0% {
        background-position: 0% 0;
    }

    100% {
        background-position: 100% 0;
    }
}

/* =========================================================
   SUBMENU ARROW + OFFCANVAS SUBMENU
   ========================================================= */
.ccs-sub-arrow {
    font-size: .7rem;
    margin-left: 4px;
    display: inline-block;
    transition: transform .25s ease;
}

.ccs-offcanvas-sub {
    list-style: none;
    margin: 0;
    padding: 0 0 6px 14px;
}

    .ccs-offcanvas-sub li + li {
        border-top: 0;
    }

    .ccs-offcanvas-sub a {
        display: block;
        padding: 11px 12px;
        font-weight: 500;
        font-size: .96rem;
        color: var(--ccs-slate);
        border-radius: 8px;
        border-left: 3px solid var(--ccs-orange);
    }

        .ccs-offcanvas-sub a:hover {
            background: var(--ccs-gradient-soft);
            color: var(--ccs-purple);
        }

/* offcanvas arrow rotate when open */
.ccs-offcanvas-links a[aria-expanded="true"] .ccs-sub-arrow {
    transform: rotate(180deg);
}


/* =========================================================
   NAVBAR FIX – no wrap, arrow inline, tight spacing
   ========================================================= */
@media (min-width: 992px) {

    .ccs-nav-links {
        flex-wrap: nowrap;
        gap: 2px;
    }

        .ccs-nav-links > li {
            flex: 0 0 auto;
        }

            .ccs-nav-links > li > a {
                display: inline-flex;
                align-items: center;
                white-space: nowrap;
                padding: 10px 11px;
            }

        .ccs-nav-links .ccs-sub-arrow {
            margin-left: 5px;
            line-height: 1;
        }

    .ccs-nav-actions .ccs-btn {
        white-space: nowrap;
        padding: .6rem 1.2rem;
    }
}

/* Chhoti laptop screens (992px - 1279px): aur tight */
@media (min-width: 992px) and (max-width: 1279.98px) {

    .ccs-nav-links > li > a {
        padding: 10px 8px;
    }

    .ccs-brand-text span {
        display: none;
    }
}

.ccs-offcanvas-links a.d-flex {
    display: flex !important;
}