/* ========= Fonts ========= */
@font-face{
  font-family:"myfontheading";
  src:url("/static/font/PPTelegraf-Regular.otf") format("opentype");
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"myfontPara";
  src:url("/static/font/garet/Garet-Book.otf") format("opentype");
  font-weight:400; font-style:normal; font-display:swap;
}

:root{
  --headerH:72px;
  --brand:#b20202;
  --ink:#0a0f1a;
}

/* ========= Base ========= */
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; color:#111827; font-family:"myfontPara",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
h1,h2,h3,h4,h5,h6{font-family:"myfontheading","myfontPara",sans-serif}
a{color:red; text-decoration:none}
a:hover{color:darkblue}

/* ========= Header (transparent on hero → white after hero) ========= */
.xp-header{
  position:fixed; inset:0 0 auto 0; height:var(--headerH);
  z-index:2000; display:flex; align-items:center;
  background:transparent; border:0; box-shadow:none;
  transition:background-color .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.xp-header.scrolled{
  background:#fff; border-bottom:1px solid rgba(16,24,40,.08);
  box-shadow:0 4px 14px rgba(0,0,0,.06);
}

.xp-bar{
  height:100%; width:100%; display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:0 16px;
}
@media (min-width:992px){ .xp-bar{ padding:0 40px } }

.xp-left{ display:flex; align-items:center; gap:12px; }

/* Logo sizing so it never collides with the hamburger */
.xp-logo{ height:56px; width:auto; display:block; max-width:100% }
@media (max-width: 991.98px){
  .xp-left{ width:100%; justify-content:space-between; }
}
@media (max-width:575.98px){ .xp-logo{ height:42px; max-width:100% } }

/* Desktop nav pills */
.xp-links{
  list-style:none;
  display:flex;
  gap:16px;
  margin:0;
  padding:0;
  flex-wrap: nowrap;          /* NEW: don’t wrap */
  white-space: nowrap;        /* NEW: keep pill text on one line */
}
.xp-links a{
  font-weight:700; font-size:14px; letter-spacing:.2px;
  padding:8px 12px; border-radius:999px;
  transition:opacity .15s ease, background-color .15s ease, color .15s ease;
  color:#fff; background:rgba(0,0,0,.55);
}
.xp-links a:hover{opacity:1; background:rgba(0,0,0,.32)}
.xp-links a.active{ outline:2px solid var(--brand); outline-offset:2px }

/* After scroll: lighter pills + dark text */
.xp-header.scrolled .xp-links a{ color:#111827; background:#eef1f4 }
.xp-header.scrolled .xp-links a:hover{ background:#e4e8ec }

/* ===== Hamburger (three lines → X) ===== */
.xp-toggle{
  display:inline-flex; justify-content:center; align-items:center;
  width:44px; height:44px; background:transparent; border:none; cursor:pointer; position:relative;
}
.xp-toggle .bar,
.xp-toggle .bar::before,
.xp-toggle .bar::after{
  content:""; display:block; width:26px; height:2px;
  background:#fff;                /* white over hero */
  border-radius:2px; transition:all .3s ease; position:relative;
}
.xp-toggle .bar::before{ position:absolute; top:-8px; left:0 }
.xp-toggle .bar::after{ position:absolute; top: 8px; left:0 }
.xp-toggle.active .bar{ background:transparent }
.xp-toggle.active .bar::before{ top:0; transform:rotate(45deg) }
.xp-toggle.active .bar::after{ top:0; transform:rotate(-45deg) }

/* black after the header becomes white */
.xp-header.scrolled .xp-toggle .bar,
.xp-header.scrolled .xp-toggle .bar::before,
.xp-header.scrolled .xp-toggle .bar::after{ background:#111 }
@media (min-width:992px){ .xp-toggle{ display:none } }

/* Mobile drawer */
.xp-drawer{
  position:absolute; top:var(--headerH); left:0; right:0; display:none; flex-direction:column;
  background:rgba(255,255,255,.98); border-bottom:1px solid rgba(16,24,40,.08); z-index:1999;
}
.xp-drawer a{
  padding:14px 18px; color:#111827; font-weight:700;
  border-top:1px solid rgba(16,24,40,.06); text-decoration:none;
}
.xp-drawer.open{ display:flex }

/* ========= Hero ========= */
.hero{
  position:relative; width: 100%; min-height:100vh; color:#fff; overflow:hidden; display:flex; align-items:stretch;
  background:
    radial-gradient(120% 100% at 10% 0%, rgba(255,255,255,.05) 0%, rgba(255,255,255,0) 55%),
    linear-gradient(180deg, rgb(0 0 0) 0%, rgb(0 0 0 / 92%) 20%, rgb(146 8 0) 60%),
    linear-gradient(125deg, rgb(154 5 2) 0%, rgb(151 9 4) 65%, rgb(158 0 0) 100%);
  /* Give content a touch of space under the overlay header on small screens */
  padding-top: 0;
}
@media (max-width:991.98px){ .hero{ padding-top: calc(var(--headerH) + 8px) } }
@media (min-width:992px){ .hero{ min-height:100vh } }

.hero .row{margin:0 !important; width:100%}
.hero [class*="col-"]{padding:0 !important}
.hero::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(130deg, rgba(140,0,255,.20) 0%, rgba(255,0,120,.18) 45%, rgba(20,16,30,.20) 100%);
}
.hero-content{ position:relative; z-index:2 }

/* left column */
.col-text{display:flex; align-items:center}
.col-text .inner{padding:0 20px}
@media (min-width:576px){ .col-text .inner{padding:32px 40px} }
.title{ text-align:center; font-weight:700; letter-spacing:.2px; font-size:clamp(28px,6vw,56px); line-height:1.05; margin:0 0 12px }

/* right column image */
.col-img {
  flex: 1;
  display: flex;
}
.img-fill {
  flex: 1;
  width: 100%;
  height: 100%;
  background: url("/static/img/gallery/b2.png") center center / cover no-repeat;
}
@media (min-width:576px){ .img-fill{ min-height:52vh } }
@media (min-width:992px){ .img-fill{ min-height:auto } }

/* bottom wave */
.hero-curve{position:absolute; left:0; right:0; bottom:-1px; height:90px; z-index:3}
@media (min-width:768px){ .hero-curve{ height:120px } }
.hero-curve svg{display:block; width:100%; height:100%}

/* ========= Spacer after hero ========= */
.after-hero-spacer{ height:var(--headerH) }

/* ========= Round Countdown ========= */
.rc{display:flex; flex-wrap:wrap; gap:14px; margin-top:12px; justify-content:center}
@media (min-width:576px){ .rc{gap:18px} }
.rc-item{display:flex; flex-direction:column; align-items:center}
.rc-label{font-size:12px; letter-spacing:.12em; opacity:.92; margin-bottom:8px}
.rc-ring{
  --size:96px; --thick:7px; --pct:0;
  position:relative; width:var(--size); height:var(--size);
  border-radius:50%; border:2px solid rgba(255,255,255,.92);
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.06);
}
@media (min-width:576px){ .rc-ring{ --size:104px } }
.rc-ring::before{
  content:""; position:absolute; inset:-2px; border-radius:50%;
  background:conic-gradient(#ffffff calc(var(--pct)*1%), rgba(255,255,255,.18) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(50% - var(--thick)), #000 calc(50% - var(--thick) + 1px));
          mask: radial-gradient(farthest-side, transparent calc(50% - var(--thick)), #000 calc(50% - var(--thick) + 1px));
}
.rc-ring span{font-weight:900; font-size:26px; line-height:1}
.cd-date{margin-top:12px; font-size:16px; opacity:.95; text-align:center; font-weight:700}

/* ========= Articles ========= */
.articles{background:#fff; padding:40px 0 64px}
.section-title{font-weight:900; font-size:clamp(24px,3.2vw,40px); text-align:center; color:#101828; margin:0 0 24px}
.article-card{border-radius:18px; overflow:hidden; box-shadow:0 14px 32px rgba(16,24,40,.12); display:flex; flex-direction:column; transition:.22s; background:#fff}
.article-card:hover{transform:translateY(-6px); box-shadow:0 22px 48px rgba(16,24,40,.16)}
.article-thumb{width:100%; height:220px; object-fit:cover; background:#f5f5f5}
.article-body{padding:16px 18px 14px}
.article-title{font-weight:900; font-size:18px; color:#0a2349; margin:0 0 8px; text-align:center}
.article-excerpt{color:#344054; font-size:14px}
.article-actions{padding:0 18px 16px; margin-top:auto; text-align:center}
.btn-article{display:inline-block; padding:8px 14px; border-radius:10px; background:var(--brand); color:#fff; font-weight:700; text-decoration:none; font-size:14px}
.btn-article:hover{opacity:.9; transform:translateY(-1px)}

/* ========= Clients Wall ========= */
.clients-wall{
  --logo-size: clamp(36px, 6vw, 76px);
  --gap: clamp(18px, 5vw, 64px);
  --move: clamp(220px, 28vw, 520px);
  --dur: 4600ms;
  --ease: cubic-bezier(.2,.7,.25,1);
  padding: 40px 0 60px;
  background: #fff;
}
.clients-wall h3{
  text-align: center;
  font-weight: 900;
  font-size: clamp(22px, 2.6vw, 30px);
  margin: 0 0 18px;
  color: #101828;
}
.logo-row{
  position: relative;
  overflow: hidden;
  padding: 10px 0;
  -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
          mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
  perspective: 700px;
}
.logo-track{
  display: flex;
  align-items: center;
  gap: var(--gap);
  will-change: transform;
}

/* movement */
.logo-track.move-left  { animation: burst-left  var(--dur) var(--ease) both; }
.logo-track.move-right { animation: burst-right var(--dur) var(--ease) both; }

@keyframes burst-left  {
  0%,12%{transform:translate3d(0,0,0)}
  55%,70%{transform:translate3d(calc(-1 * var(--move)),0,0)}
  100%{transform:translate3d(0,0,0)}
}
@keyframes burst-right {
  0%,12%{transform:translate3d(0,0,0)}
  55%,70%{transform:translate3d(var(--move),0,0)}
  100%{transform:translate3d(0,0,0)}
}

/* LOGOS — original colours */
.logo-row img{
  height: var(--logo-size);
  width: auto;
  filter: none;        /* no grayscale */
  opacity: 1;
  transform: translateZ(0);
  transition: transform .35s ease, box-shadow .35s ease;
}
.logo-row img:hover{
  transform: translateY(-6px) scale(1.06) rotateX(8deg) rotateY(-4deg);
  box-shadow: 0 8px 20px rgba(0,0,0,.12);
}

/* subtle bobbing */
@keyframes bob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
.logo-track img:nth-child(odd)  { animation: bob 5.4s ease-in-out infinite;  animation-delay: calc(var(--i, 0) * .07s); }
.logo-track img:nth-child(even) { animation: bob 6.1s ease-in-out infinite;  animation-delay: calc(var(--i, 0) * .07s + .2s); }



/* ========= Footer ========= */
#footer{ color:white; font-size:14px; background:black }
#footer .footer-top{ padding:48px 0 16px 0; background:black }
#footer p, #footer a{ color:white }
#footer a:hover{ color:#57aae1; text-decoration:none }
#footer .social-links a{ font-size:18px; display:inline-block; background:red; color:#fff; line-height:1; padding:8px 0; margin-right:6px; border-radius:50%; text-align:center; width:36px; height:36px; transition:.3s }
#footer .social-links a:hover{ background:#5faee3 }

/* ========= Fixed button ========= */
.Blogpagging{ font-family:"myfontPara"; background:#e60000; color:#fff; border:none; border-radius:8px; padding:10px 8px; font-weight:700; cursor:pointer }



/* Remove bullets & left indent in footer lists */
#footer ul {
  list-style: none;          /* no dots */
  padding-left: 0;           /* remove default indent */
  margin: 0;
}

#footer ul li {
  list-style: none;
  position: relative;
  padding-left: 22px; 
  padding-bottom: 6px;       /* room for the chevron icon */
}

#footer ul li > i {
  position: absolute;
  left: 0;
  top: .2em;                 /* align the icon with text */
}
#footer .footer-contact p {
  line-height: 1.8;   /* overall line height */
  margin: 0;
}

/* Add extra space for each <br> line break */
#footer .footer-contact p br {
  content: "";
  display: block;
  margin: 6px 0;      /* tweak to 8–12px if you want more space */
}