/* =====================================================================
   restyle.css — original visual treatment for IRTESH sections.
   Deliberately differs from the base template look (spacing, section
   titles, cards, dividers, hover states). Hero is intentionally untouched.
   Loaded last so it wins. Scoped to .content-area so it never touches the
   hero slider section (el-4a05c06c) which we exclude explicitly.
   ===================================================================== */

/* ---- Section titles: new treatment (accent kicker bar + tighter type) ---- */
.content-area .rt-el-title.section-heading .rtin-title {
  position: relative;
  display: inline-block;
  letter-spacing: -0.5px;
  padding-bottom: 18px;
}
.content-area .rt-el-title.section-heading .rtin-title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 54px;
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(90deg, #0929ca, #4f6bff);
}
.content-area .rt-el-title.section-heading .rtin-subtitle {
  max-width: 620px;
  margin: 14px auto 0;
  opacity: 0.92;
}

/* ---- Speaker cards: rounded frame, lift on hover, ring accent ---- */
.content-area .speaker-layout1 .item-img {
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.content-area .speaker-layout1:hover .item-img {
  transform: translateY(-8px);
  box-shadow: 0 18px 44px rgba(9, 41, 202, 0.35);
}
.content-area .speaker-layout1 .item-img img {
  border-radius: 18px;
}
.content-area .speaker-layout1 .item-title {
  margin-top: 18px;
}

/* ---- Program Agenda: modern card rows (carousel kept as-is) ---- */

/* Turn the table into separated rows using collapsed borders + spacing. */
.content-area .schedule-layout1 {
  border-collapse: separate;
  border-spacing: 0 16px;      /* vertical gap between the row-cards */
  background: transparent;
}
.content-area .schedule-layout1 tbody { background: transparent; }
/* remove the theme's striped background so our cards show cleanly */
.content-area .schedule-layout1 tbody tr:nth-of-type(odd),
.content-area .schedule-layout1 tbody tr:nth-of-type(even) {
  background: transparent !important;
}

/* Each row = a white card: shadow on the cells, rounded outer corners,
   accent left border, lift on hover. */
.content-area .schedule-layout1 tr.menu-item {
  transition: transform 0.28s ease, box-shadow 0.28s ease;
}
.content-area .schedule-layout1 tr.menu-item > th,
.content-area .schedule-layout1 tr.menu-item > td {
  background: #ffffff;
  border: 0 !important;
  border-top: 1px solid #eef0f6;
  border-bottom: 1px solid #eef0f6;
  box-shadow: 0 6px 20px rgba(20, 30, 70, 0.06);
  vertical-align: middle;
  padding: 20px 18px;
}
/* round the outer corners of the card (first & last cell of each row) */
.content-area .schedule-layout1 tr.menu-item > *:first-child {
  border-radius: 14px 0 0 14px;
  border-left: 1px solid #eef0f6;
}
.content-area .schedule-layout1 tr.menu-item > *:last-child {
  border-radius: 0 14px 14px 0;
  border-right: 1px solid #eef0f6;
}
.content-area .schedule-layout1 tr.menu-item:hover {
  transform: translateY(-3px);
}
.content-area .schedule-layout1 tr.menu-item:hover > th,
.content-area .schedule-layout1 tr.menu-item:hover > td {
  box-shadow: 0 14px 34px rgba(9, 41, 202, 0.14);
  border-color: #e3e7f5;
}

/* Left badge (event-color) -> clean rounded accent block */
.content-area .schedule-layout1 tr.menu-item > th.event-color {
  border-radius: 14px 0 0 14px;
  color: #fff;
  text-align: center;
  padding: 20px 16px;
  min-width: 150px;
  position: relative;
}
.content-area .schedule-layout1 .day-number {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.5px;
  opacity: 0.9;
  margin-bottom: 4px;
}
.content-area .schedule-layout1 .schedule-date {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 17px;
  line-height: 1.2;
}

/* Session title */
.content-area .schedule-layout1 .schedule-title {
  margin: 0;
}
.content-area .schedule-layout1 .schedule-title a {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 18px;
  color: #1a2340;
  transition: color 0.25s ease;
}
.content-area .schedule-layout1 tr.menu-item:hover .schedule-title a {
  color: #0929ca;
}
/* drop the theme's little dash under the title */
.content-area .schedule-layout1 .schedule-title:after,
.content-area .schedule-layout1 .schedule-title a:after { display: none !important; content: none !important; }

/* Time -> blue pill with clock */
.content-area .schedule-layout1 .schedule-time {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(9, 41, 202, 0.08);
  color: #0929ca;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
}
.content-area .schedule-layout1 .schedule-time i {
  color: #0929ca !important;
  font-size: 15px;
}

/* Speaker photo — fills its circular ring, cleaner border */
.content-area .schedule-layout1 .schedule-speaker {
  overflow: hidden;
  padding: 0;
  border: 3px solid #ffffff;
  box-shadow: 0 4px 14px rgba(20, 30, 70, 0.16);
}
.content-area .schedule-layout1 .schedule-speaker li,
.content-area .schedule-layout1 .schedule-speaker .speaker-img-tooltip,
.content-area .schedule-layout1 .schedule-speaker .speaker-img-tooltip > a {
  display: block;
  width: 100%;
  height: 100%;
  line-height: 0;
  margin: 0;
  padding: 0;
  text-align: center;
}
.content-area .schedule-layout1 .schedule-speaker img.rounded-circle {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 50%;
  display: block;
  margin: 0;
}

/* Mobile: allow the card table to scroll rather than squash */
@media (max-width: 767px) {
  .content-area .schedule-layout1 tr.menu-item > th,
  .content-area .schedule-layout1 tr.menu-item > td { padding: 14px 12px; }
  .content-area .schedule-layout1 .schedule-title a { font-size: 16px; }
  .content-area .schedule-layout1 tr.menu-item > th.event-color { min-width: 120px; }
}

/* ---- Sponsors: logo cards on a tinted panel (carousel kept as-is) ---- */

/* 1) Tinted background panel for the whole section */
.content-area .el-c2f5084 {
  background: linear-gradient(180deg, #f6f8fc 0%, #eef1f8 100%);
}

/* 2) Tier heading -> pill with a small dot accent */
.content-area .sponsonrs-type-title {
  text-align: center;
  margin-bottom: 34px;
}
.content-area .sponsonrs-type-title h3 {
  display: inline-block;
  position: relative;
  padding: 8px 22px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid #e2e7f3;
  box-shadow: 0 4px 14px rgba(20, 30, 70, 0.05);
  color: #1a2340;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
/* remove the theme's dash under the tier heading */
.content-area .sponsonrs-type-title h3:after,
.content-area .sponsonrs-type-title h3:before {
  display: none !important;
  content: none !important;
}

/* 3) Each logo -> a clean white card with border + shadow + hover lift */
.content-area .sponsonrs-box {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 118px;
  margin: 8px;
  padding: 22px 18px;
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid #e6ebf5;
  box-shadow: 0 8px 24px rgba(20, 30, 70, 0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.content-area .sponsonrs-box:hover {
  transform: translateY(-6px);
  border-color: #c9d3f0;
  box-shadow: 0 18px 40px rgba(9, 41, 202, 0.14);
}
.content-area .sponsonrs-box a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.content-area .sponsonrs-box img {
  max-width: 100%;
  max-height: 54px;
  width: auto;
  height: auto;
  /* logos muted by default, full colour on hover (grey-scale-on already sets
     grayscale; we control the transition + hover reveal cleanly here) */
  filter: grayscale(100%);
  opacity: 0.72;
  transition: filter 0.35s ease, opacity 0.35s ease;
}
.content-area .sponsonrs-box:hover img {
  filter: grayscale(0);
  opacity: 1;
}

/* ---- Blog cards: rounded corners, stronger lift, accent underline on title ---- */
.content-area .blog-layout3 {
  border-radius: 16px;
  overflow: hidden;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.content-area .blog-layout3:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.28);
}
.content-area .blog-layout3 .item-date {
  border-radius: 8px;
}

/* ---- Info-box items: subtle divider + spacing tweak ---- */
.content-area .rt-el-info-box.rtin-style1 {
  padding: 6px 0;
}

/* ---- Newsletter: rounder input + button, roomier ---- */
.content-area .subscribe-layout1 .form-control {
  border-radius: 10px 0 0 10px;
  height: 58px;
}
.content-area .subscribe-layout1 .input-group-addon .btn-fill {
  border-radius: 0 10px 10px 0;
}

/* ---- Slightly more breathing room between stacked sections (not the hero) ---- */
.content-area .section:not(.el-4a05c06c):not(.el-56941cdd) > .container-inner {
  padding-top: 6px;
  padding-bottom: 6px;
}

/*-------------------------------------
#. Loading screen: pulsing IRTESH logo
---------------------------------------*/

/* Replace the old wave-grid preloader with the IRTESH logo, gently pulsing on
   the brand-blue background. We hide the original square tiles and render the
   logo centred via a ::before with the light logo. */
#preloader.preloader,
#preloader {
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: #0929ca !important;
}
/* hide the old animated squares */
#preloader.preloader .items {
  display: none !important;
}
/* centred pulsing logo */
#preloader.preloader::before {
  content: "";
  width: 260px;
  max-width: 60vw;
  height: 90px;
  background-image: url("../assets/img/logo-light.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  animation: irtesh-pulse 1.4s ease-in-out infinite;
}
/* soft glow ring behind the logo for a bit of life */
#preloader.preloader::after {
  content: "";
  position: absolute;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.18);
  animation: irtesh-ring 1.4s ease-out infinite;
}
@keyframes irtesh-pulse {
  0%, 100% { opacity: 0.55; transform: scale(0.94); }
  50%      { opacity: 1;    transform: scale(1);    }
}
@keyframes irtesh-ring {
  0%   { transform: scale(0.7);  opacity: 0.9; }
  100% { transform: scale(1.35); opacity: 0;   }
}

/*-------------------------------------
#. Countdown — gradient band + shimmer + flipping digits
---------------------------------------*/

/* Pinned full-width strip on the hero's bottom edge, upgraded to a creative
   look: a blue→dark gradient band with a moving light shimmer, a glowing brand
   accent line, and digits that FLIP/slide in as they tick. The jQuery.countdown
   plugin re-renders the digit HTML every second, so a CSS animation on each
   fresh <h2> replays automatically each tick — giving the live flip effect. */

/* 1) Section -> full-width strip pinned onto the hero's bottom edge */
.el-56941cdd,
.el-56941cdd.secondery-bgcolor {
  background-color: transparent !important;
  position: relative;
  z-index: 50;
  margin-top: -78px;
}
.el-56941cdd > .container-inner {
  max-width: 100% !important;
  padding: 0 !important;
}
.el-56941cdd .container-fluid-wrp { padding: 0; }

/* 2) The gradient band + shimmer */
.el-56941cdd .countdown-layout1 {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 26px 0 24px;
  overflow: hidden;
  border-radius: 0;
  /* diagonal brand-blue -> deep navy gradient */
  background: linear-gradient(115deg, #0929ca 0%, #0a1440 55%, #060b28 100%);
  border-top: 3px solid #4f6bff;
  box-shadow: 0 -8px 34px rgba(9, 41, 202, 0.35),
              inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
/* soft glow just under the accent line */
.el-56941cdd .countdown-layout1::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; height: 60px;
  background: radial-gradient(120% 60px at 50% 0,
              rgba(79, 107, 255, 0.55), transparent 70%);
  pointer-events: none;
}
/* moving shimmer sweep across the band */
.el-56941cdd .countdown-layout1::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: -40%;
  width: 40%;
  background: linear-gradient(100deg, transparent,
              rgba(255, 255, 255, 0.10), transparent);
  transform: skewX(-18deg);
  animation: cd-shimmer 5.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes cd-shimmer {
  0%   { left: -45%; }
  55%  { left: 120%; }
  100% { left: 120%; }
}

/* 3) Digit blocks row */
.el-56941cdd .event-countdown {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: stretch;
  justify-content: center;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 16px;
  perspective: 500px;              /* enables the 3D flip on digits */
}
.el-56941cdd .event-countdown .countdown-section {
  flex: 1 1 0;
  position: relative;
  text-align: center;
  padding: 4px 6px;
}
/* glowing gradient dividers between blocks */
.el-56941cdd .event-countdown .countdown-section + .countdown-section::before {
  content: "";
  position: absolute;
  left: 0; top: 12%;
  height: 76%;
  width: 1px;
  background: linear-gradient(to bottom, transparent,
              rgba(120, 150, 255, 0.6), transparent);
}
/* kill the theme's own colon/dot separators AND the .widget h3:after accent
   dash that the theme adds under every widget heading (i.e. under each label). */
.el-56941cdd .event-countdown .countdown-section:after,
.el-56941cdd .event-countdown .countdown-section h2:after,
.el-56941cdd .event-countdown .countdown-section h2:before,
.el-56941cdd .event-countdown .countdown-section h3:after,
.el-56941cdd .event-countdown .countdown-section h3:before {
  display: none !important;
  content: none !important;
}

/* 4) Digits: big, glowing, and FLIP in on each tick */
.el-56941cdd .event-countdown .countdown-section h2 {
  color: #ffffff !important;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 46px;
  line-height: 1;
  margin: 0 0 8px;
  letter-spacing: -0.5px;
  text-shadow: 0 2px 18px rgba(79, 107, 255, 0.55);
  transform-origin: 50% 0;
}
/* Only the SECONDS digit flips each tick (it's the one that changes every
   second). Days/Hours/Minutes stay solid, so the strip reads cleanly and only
   the live-ticking number animates. The plugin re-renders every second, so this
   flip replays on the fresh seconds <h2> automatically. */
.el-56941cdd .event-countdown .countdown-section:last-child h2 {
  animation: cd-flip 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
@keyframes cd-flip {
  0%   { transform: rotateX(-82deg) translateY(-5px); opacity: 0; }
  55%  { transform: rotateX(8deg)   translateY(0);    opacity: 1; }
  100% { transform: rotateX(0deg);                    opacity: 1; }
}
.el-56941cdd .event-countdown .countdown-section h3 {
  color: rgba(200, 212, 255, 0.85) !important;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  margin: 0;
}

/* 5) Responsive */
@media (max-width: 767px) {
  .el-56941cdd { margin-top: -52px; }
  .el-56941cdd .countdown-layout1 { padding: 18px 0 16px; }
  .el-56941cdd .event-countdown { padding: 0 8px; }
  .el-56941cdd .event-countdown .countdown-section h2 { font-size: 28px; }
  .el-56941cdd .event-countdown .countdown-section h3 { font-size: 9px; letter-spacing: 1.5px; }
}