/**
* Template Name: HeroBiz
* Updated: May 30 2023 with Bootstrap v5.3.0
* Template URL: https://bootstrapmade.com/herobiz-bootstrap-business-template/
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
*/

/**
* Check out variables.css for easy customization of colors, typography, and other repetitive properties
*/
/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
:root {
  scroll-behavior: smooth;
}

a {
  color: var(--color-links);
  text-decoration: none;
}

a:hover {
  color: var(--color-links-hover);
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-default);
  margin: 20px 0;
}

/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
#preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  overflow: hidden;
  background: var(--color-white);
  transition: all 0.6s ease-out;
  width: 100%;
  height: 100vh;
}

#preloader:before,
#preloader:after {
  content: "";
  position: absolute;
  border: 4px solid var(--color-primary);
  border-radius: 50%;
  animation: animate-preloader 2s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

#preloader:after {
  animation-delay: -0.5s;
}

@keyframes animate-preloader {
  0% {
    width: 10px;
    height: 10px;
    top: calc(50% - 5px);
    left: calc(50% - 5px);
    opacity: 1;
  }

  100% {
    width: 72px;
    height: 72px;
    top: calc(50% - 36px);
    left: calc(50% - 36px);
    opacity: 0;
  }
}

/*--------------------------------------------------------------
# Sections & Section Header
--------------------------------------------------------------*/
section {
  padding: 20px 0;
  overflow: hidden;
}

.section-header {
  text-align: center;
  padding-bottom: 40px;
}

.section-header h2 {
  font-size: 48px;
  font-weight: 300;
  margin-bottom: 20px;
  color: var(--color-secondary);
}

.section-header p {
  margin: 0 auto;
  color: var(--color-secondary-light);
}

@media (min-width: 1280px) {
  .section-header p {
    max-width: 80%;
  }
}

/*--------------------------------------------------------------
# Breadcrumbs
--------------------------------------------------------------*/
.breadcrumbs {
  padding: 15px 0;
  background: rgba(var(--color-secondary-rgb), 0.05);
  min-height: 40px;
  /* 135px was a hardcoded guess at the fixed header's height. The header's
     actual height varies (topbar text can wrap differently across viewport
     widths/zoom levels), so a static guess that's even slightly too small
     lets this heading start underneath the still-fixed header — main.js now
     measures the real header height on load/resize and sets --header-h;
     135px stays only as the pre-JS/no-JS fallback. */
  margin-top: var(--header-h, 135px);
}

.breadcrumbs h2 {
  font-size: 30px;
  font-weight: 300;
  margin: 0;
}

.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 14px;
}

.breadcrumbs ol li+li {
  padding-left: 10px;
}

.breadcrumbs ol li+li::before {
  display: inline-block;
  padding-right: 10px;
  color: var(--color-secondary-light);
  content: "/";
}

@media (max-width: 992px) {
  .breadcrumbs .d-flex {
    display: block !important;
  }

  .breadcrumbs h2 {
    margin-bottom: 10px;
    font-size: 24px;
  }

  .breadcrumbs ol {
    display: block;
  }

  .breadcrumbs ol li {
    display: inline-block;
  }
}

/*--------------------------------------------------------------
# Scroll top button
--------------------------------------------------------------*/
.scroll-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 15px;
  bottom: 15px;
  z-index: 995;
  background: var(--color-primary);
  width: 40px;
  height: 40px;
  border-radius: 4px;
  transition: all 0.4s;
}

.scroll-top i {
  font-size: 24px;
  color: var(--color-white);
  line-height: 0;
}

.scroll-top:hover {
  background: rgba(var(--color-primary-rgb), 0.85);
  color: var(--color-white);
}

.scroll-top.active {
  visibility: visible;
  opacity: 1;
}

/*--------------------------------------------------------------
# Disable aos animation delay on mobile devices
--------------------------------------------------------------*/
@media screen and (max-width: 768px) {
  [data-aos-delay] {
    transition-delay: 0 !important;
  }
}

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
.header {
  padding: 5px 0; /* 15px 0; */
  transition: all 0.5s;
  z-index: 997;
  /* Header is position:fixed (see .fixed-top) with no background of its own,
     so page content sitting behind it (e.g. .breadcrumbs, if it starts even
     a few px too early) shows through and visually overlaps the nav text.
     Always opaque now, not just once .sticked is added on scroll. */
  background: var(--color-white);
}

.header.sticked {
  background: var(--color-white);
 /* box-shadow: 0px 2px 20px rgba(var(--color-primary-dark-rgb), 0.5);*/
  box-shadow: 0px 2px 20px rgba(var(--color-secondary-rgb), 0.2);
}

/* == Site logo ===========================================================
   assets/img/logo.webp is 320x197 - a LANDSCAPE mark. This rule used to cap
   it with max-height:65px AND max-width:48px at the same time, which is two
   conflicting instructions about its shape, and the <img> in header.php
   declared width="60" height="100" - a PORTRAIT box. Those numbers were not
   invented: they belong to image/logo.webp, a DIFFERENT and genuinely
   portrait 120x163 file used by the print and admin templates. They were
   copied onto the wrong image.

   Sizing is by HEIGHT with width:auto, which is the right way round for a
   horizontal logo in a fixed-height bar: the height is what has to agree
   with the header, and the width can be whatever the artwork needs.

   margin-top:-50px is also gone. It pulled the logo up out of a flex row
   that is already align-items:center, so on short viewports it rode up into
   the utility bar above and was clipped - the "not properly seen on
   different devices" part. The stray "/" it ended with is a CSS syntax
   error and shows the rule was left mid-edit.
   ======================================================================== */
.header .logo img {
    display: block;
    height: 46px;
    width: auto;
    max-width: 100%;
    margin-right: 8px;
}
@media (max-width: 991px) { .header .logo img { height: 40px; } }
@media (max-width: 575px) { .header .logo img { height: 34px; margin-right: 6px; } }

.header .logo h1 {
  font-size: 32px;
  font-weight: 300;
  color: var(--color-secondary);
  font-family: var(--font-default);
}

.header .logo h1 span {
  color: var(--color-primary);
  font-weight: 500;
}

.header .btn-getstarted,
.header .btn-getstarted:focus {
  font-size: 16px;
  color: var(--color-white);
  background: var(--color-primary);
  padding: 8px 23px;
  border-radius: 4px;
  transition: 0.3s;
  font-family: var(--font-default);
}

.header .btn-getstarted:hover,
.header .btn-getstarted:focus:hover {
  color: var(--color-white);
  background: rgba(var(--color-primary-rgb), 0.85);
}

@media (max-width: 1279px) {

  .header .btn-getstarted,
  .header .btn-getstarted:focus {
    margin-right: 50px;
  }
}

/*--------------------------------------------------------------
# Desktop Navigation 
--------------------------------------------------------------*/
#navbar{
	margin-left: -10px;
}
@media (min-width: 1280px) {
  .navbar {
    padding: 0;
    position: relative;
  }

  .navbar ul {
    margin: 0;
    padding: 0;
    display: flex;
    list-style: none;
    align-items: center;
  }

  .navbar li {
    position: relative;
  }

  .navbar>ul>li {
    white-space: nowrap;
  }

  .navbar a,
  .navbar a:focus {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    font-family: var(--font-default);
    font-size: 16px;
    font-weight: 400;
    color: rgba(var(--color-secondary-dark-rgb), 0.7);
    white-space: nowrap;
    transition: 0.3s;
    position: relative;
  }

  .navbar a i,
  .navbar a:focus i {
    font-size: 12px;
    line-height: 0;
    margin-left: 5px;
  }

  .navbar>ul>li>a:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: var(--color-primary);
    visibility: hidden;
    transition: all 0.3s ease-in-out 0s;
    transform: scaleX(0);
    transition: all 0.3s ease-in-out 0s;
  }

  .navbar a:hover:before,
  .navbar li:hover>a:before,
  .navbar .active:before {
    visibility: visible;
    transform: scaleX(0.7);
  }

  .navbar a:hover,
  .navbar .active,
  .navbar .active:focus,
  .navbar li:hover>a {
    color: var(--color-primary);
  }

  .navbar .dropdown a:hover:before,
  .navbar .dropdown:hover>a:before,
  .navbar .dropdown .active:before {
    visibility: hidden;
  }

  /* Matches the panel that opens beneath it (was --color-secondary slate,
     which now clashes with the teal dropdown). Rounding only the top corners
     makes the open item and its panel read as one connected surface. */
  .navbar .dropdown a:hover,
  .navbar .dropdown .active,
  .navbar .dropdown .active:focus,
  .navbar .dropdown:hover>a {
    color: var(--color-white);
    background: var(--color-primary-dark);
    border-radius: 7px 7px 0 0;
    transition: background-color .18s ease, color .18s ease;
  }

  /* ── Dropdown panel ───────────────────────────────────────────────────
     Was flat slate (--color-secondary #485664) with square corners and no
     shadow, which read as a different site to the teal header above it.
     Now the brand dark teal, lifted off the page with a radius and shadow so
     it reads as a panel floating over the content rather than a block welded
     to the navbar. */
  .navbar .dropdown ul {
    display: block;
    position: absolute;
    left: 0;
    top: 100%;
    margin: 0;
    padding: 8px 0;
    z-index: 99;
    opacity: 0;
    visibility: hidden;
    background: var(--color-primary-dark);
    border-radius: 0 0 10px 10px;
    border-top: 3px solid var(--color-primary);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .22);
    /* Slide down a few px on open instead of appearing instantly — enough to
       read as deliberate, short enough not to feel sluggish. */
    transform: translateY(-8px);
    transition: opacity .22s ease, transform .22s ease, visibility .22s;
  }

  .navbar .dropdown ul li {
    min-width: 200px;
  }

  /* 0.5 alpha was the washed-out grey in the old menu — too faint to read
     comfortably and well under any sane contrast threshold. 0.9 keeps the
     hierarchy against a pure-white hover without sacrificing legibility. */
  .navbar .dropdown ul a {
    padding: 10px 20px;
    font-size: 15px;
    text-transform: none;
    font-weight: 400;
    color: rgba(var(--color-white-rgb), 0.9);
    /* .navbar a sets white-space:nowrap, which is right for the top-level bar
       (those items must stay on one line) but wrong inside a panel: a label
       longer than the column just ran off the edge and got cut, which is what
       happened to "Pay the Publication Charges For Foreign/International
       Author". Wrapping means a long label costs a second line instead of
       silently losing its ending. justify-content on .navbar a is
       space-between, so flex-start is needed to keep wrapped lines aligned
       left rather than pushed apart. */
    white-space: normal;
    justify-content: flex-start;
    line-height: 1.45;
    /* Always present so turning it visible on hover shifts nothing. */
    border-left: 3px solid transparent;
    transition: background-color .18s ease, color .18s ease,
                border-color .18s ease, padding-left .18s ease;
  }

  .navbar .dropdown ul a i {
    font-size: 12px;
  }

  /* Hover: lighter teal wash, full-white text, and an accent bar that slides
     in on the left. The 4px nudge gives the pointer something that visibly
     responds — the old menu changed colour and nothing else. */
  .navbar .dropdown ul a:hover,
  .navbar .dropdown ul .active,
  .navbar .dropdown ul .active:hover,
  .navbar .dropdown ul li:hover>a {
    color: var(--color-white);
    background: rgba(var(--color-primary-rgb), .55);
    border-left-color: var(--color-primary-light);
    padding-left: 24px;
  }

  .navbar .dropdown:hover>ul {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  /* Respect a reduced-motion preference: keep the fade, drop the movement. */
  @media (prefers-reduced-motion: reduce) {
    .navbar .dropdown ul,
    .navbar .dropdown:hover>ul {
      transform: none;
      transition: opacity .15s ease, visibility .15s;
    }
    .navbar .dropdown ul a { transition: none; }
    .navbar .dropdown ul a:hover { padding-left: 20px; }
  }

  .navbar .megamenu {
    position: static;
  }

  /* ── Mega menu (For Author) ───────────────────────────────────────────
     Two columns of links with 10px of padding and no gap: the columns ran
     into each other and the whole panel sat flush against the viewport edges.
     Roomier padding, a real gap, and a hairline rule between columns so the
     eye can tell where one list ends. */
  .navbar .megamenu ul {
    right: 0;
    padding: 14px 10px;
    display: flex;
    gap: 10px;
    border-radius: 0 0 12px 12px;
  }

  .navbar .megamenu ul li {
    flex: 1;
  }

  .navbar .megamenu ul li + li {
    border-left: 1px solid rgba(var(--color-white-rgb), .1);
    padding-left: 10px;
  }

  .navbar .megamenu ul li a,
  .navbar .megamenu ul li:hover>a {
    color: rgba(var(--color-white-rgb), 0.9);
    background: none;
  }

  /* Rounded hover chip rather than a full-bleed bar — inside a wide panel a
     block that spans the whole column looks like a selection, not a hover. */
  .navbar .megamenu ul li a {
    border-radius: 7px;
    border-left: 0;
  }

  .navbar .megamenu ul li a:hover,
  .navbar .megamenu ul li .active,
  .navbar .megamenu ul li .active:hover {
    color: var(--color-white);
    background: rgba(var(--color-primary-rgb), .6);
    padding-left: 20px;
  }

  .navbar .dropdown .dropdown ul {
    top: 0;
    left: calc(100% - 30px);
    visibility: hidden;
  }

  .navbar .dropdown .dropdown:hover>ul,
  .navbar .dropdown .dropdown:focus-within>ul {
    opacity: 1;
    top: 0;
    left: 100%;
    visibility: visible;
  }

  /* ══ Navigation robustness ══════════════════════════════════════════════
     Three real failure modes, all of which showed up as "the menu doesn't
     display properly at some resolutions".
     ═══════════════════════════════════════════════════════════════════════ */

  /* 1. MEGA MENU WIDTH.
     .megamenu is position:static, so its panel is measured against .navbar —
     which is as wide as the header. On a 1080p screen that is already wide;
     on a 1440p or 4K monitor the panel stretches edge to edge and two short
     columns of links float in a sea of empty teal. Capping the width keeps it
     a readable panel at every resolution instead of scaling with the monitor. */
  .navbar .megamenu ul {
    max-width: 780px;
    left: auto;
    right: 0;
  }

  /* 2. PANELS RUNNING OFF THE RIGHT EDGE.
     Every panel opens with left:0, i.e. rightward. That is fine for items on
     the left of the bar, but Conference and Contact are the last two items —
     their panels open past the viewport and get clipped, and the narrower the
     window the worse it is.

     The old fix keyed off viewport width (@media 1280-1366 forced ALL nested
     menus to left:-90%), which is why it behaved inconsistently: it flipped
     menus on the LEFT of the bar too, where there was nothing wrong, and did
     nothing at other widths. Direction should follow POSITION IN THE NAV, not
     the size of the screen — that is correct at every resolution. */
  .navbar > ul > li:nth-last-child(-n+2) > ul {
    left: auto;
    right: 0;
    border-radius: 10px 0 10px 10px;
  }

  /* Their nested submenus have to flip too, or they reopen the same problem
     one level deeper. */
  .navbar > ul > li:nth-last-child(-n+2) .dropdown ul {
    left: auto;
    right: calc(100% - 30px);
  }

  .navbar > ul > li:nth-last-child(-n+2) .dropdown:hover>ul,
  .navbar > ul > li:nth-last-child(-n+2) .dropdown:focus-within>ul {
    left: auto;
    right: 100%;
  }

  /* 3. KEYBOARD ACCESS.
     The menu was hover-only: tabbing through the header skipped every
     submenu link, so the entire "For Author", "Conference" and "Contact"
     sections were unreachable without a mouse. :focus-within opens the panel
     when anything inside it takes focus, which makes Tab work exactly like
     hover — no JavaScript, and it also fixes the panel snapping shut on
     touchscreen laptops, which fire focus rather than a sustained hover. */
  .navbar .dropdown:focus-within>ul {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .navbar .dropdown ul a:focus-visible {
    outline: 2px solid var(--color-white);
    outline-offset: -3px;
    background: rgba(var(--color-primary-rgb), .55);
    color: var(--color-white);
  }

  /* 4. THE DIAGONAL GAP.
     Moving the pointer from the parent item down-and-across to a link clips
     the corner of the panel. The 8px open animation means that for the first
     frames the panel is not yet under the cursor either. This invisible strip
     bridges the seam so the menu stops closing mid-reach — the single most
     common "it keeps disappearing" complaint with hover menus. */
  .navbar .dropdown > ul::before {
    content: "";
    position: absolute;
    top: -12px;
    left: 0;
    right: 0;
    height: 12px;
  }
}

/* The 1280-1366px block that used to sit here forced EVERY nested submenu to
   left:-90% / -100%. It was a blunt fix for panels overflowing the right edge:
   it flipped menus on the left of the bar as well, where they then opened off
   the LEFT edge instead, and it applied at those widths only — so the same
   menu behaved differently on a 1366px laptop and a 1920px monitor. That is
   the inconsistency you were seeing.

   Replaced by the position-based rules in the main 1280px block above
   (li:nth-last-child(-n+2)), which flip only the menus that are actually near
   the right edge and do so at every resolution. Nothing width-specific is
   needed here any more. */

/*--------------------------------------------------------------
# Mobile Navigation
--------------------------------------------------------------*/
@media (max-width: 1279px) {
  .navbar {
    position: fixed;
    top: 0;
    left: -100%;
    width: calc(100% - 70px);
    bottom: 0;
    transition: 0.3s;
    z-index: 9997;
  }

  .navbar ul {
    position: absolute;
    inset: 0;
    padding: 10px 0;
    margin: 0;
    background: rgba(var(--color-secondary-rgb), 0.9);
    overflow-y: auto;
    transition: 0.3s;
    z-index: 9998;
  }

  .navbar a,
  .navbar a:focus {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    font-size: 16px;
    font-weight: 500;
    color: rgba(var(--color-white-rgb), 0.7);
    white-space: nowrap;
    transition: 0.3s;
  }

  .navbar a i,
  .navbar a:focus i {
    font-size: 12px;
    line-height: 0;
    margin-left: 5px;
  }

  .navbar a:hover,
  .navbar .active,
  .navbar .active:focus,
  .navbar li:hover>a {
    color: var(--color-white);
  }

  .navbar .dropdown ul,
  .navbar .dropdown .dropdown ul {
    position: static;
    display: none;
    padding: 10px 0;
    margin: 10px 20px;
    transition: all 0.5s ease-in-out;
    border: 1px solid rgba(var(--color-secondary-light-rgb), 0.3);
  }

  .navbar .dropdown>.dropdown-active,
  .navbar .dropdown .dropdown>.dropdown-active {
    display: block;
  }

  .mobile-nav-toggle {
    display: block !important;
    color: var(--color-secondary);
    font-size: 28px;
    cursor: pointer;
    line-height: 0;
    transition: 0.5s;
    position: fixed;
    top: 20px;
    z-index: 9999;
    right: 20px;
  }

  .mobile-nav-toggle.bi-x {
    color: var(--color-white);
  }

  .mobile-nav-active {
    overflow: hidden;
    z-index: 9995;
    position: relative;
  }

  .mobile-nav-active .navbar {
    left: 0;
  }

  .mobile-nav-active .navbar:before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(var(--color-secondary-rgb), 0.8);
    z-index: 9996;
  }
}

/*--------------------------------------------------------------
# Index Page
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# Animated Hero Section
--------------------------------------------------------------*/
.hero-animated {
  width: 100%;
  min-height: 50vh;
  background: url("../img/hero-bg.png") center center;
  background-size: cover;
  position: relative;
  padding: 120px 0 60px;
}

.hero-animated h2 {
  margin: 0 0 10px 0;
  font-size: 48px;
  font-weight: 300;
  color: var(--color-secondary);
  font-family: var(--font-default);
}

.hero-animated h2 span {
  color: var(--color-primary);
}

.hero-animated p {
  color: rgba(var(--color-secondary-rgb), 0.8);
  margin: 0 0 30px 0;
  font-size: 20px;
  font-weight: 400;
}

.hero-animated .animated {
  margin-bottom: 60px;
  animation: up-down 2s ease-in-out infinite alternate-reverse both;
}

@media (min-width: 992px) {
  .hero-animated .animated {
    max-width: 45%;
  }
}

@media (max-width: 991px) {
  .hero-animated .animated {
    max-width: 60%;
  }
}

@media (max-width: 575px) {
  .hero-animated .animated {
    max-width: 80%;
  }
}

.hero-animated .btn-get-started {
  font-size: 16px;
  font-weight: 400;
  display: inline-block;
  padding: 10px 28px;
  border-radius: 4px;
  transition: 0.5s;
  color: var(--color-white);
  background: var(--color-primary);
  font-family: var(--font-default);
}

.hero-animated .btn-get-started:hover {
  background: rgba(var(--color-primary-rgb), 0.8);
}

.hero-animated .btn-watch-video {
  font-size: 16px;
  transition: 0.5s;
  margin-left: 25px;
  font-family: var(--font-default);
  color: var(--color-secondary);
  font-weight: 600;
}

.hero-animated .btn-watch-video i {
  color: var(--color-primary);
  font-size: 32px;
  transition: 0.3s;
  line-height: 0;
  margin-right: 8px;
}

.hero-animated .btn-watch-video:hover {
  color: var(--color-primary);
}

.hero-animated .btn-watch-video:hover i {
  color: rgba(var(--color-primary-rgb), 0.8);
}

@media (max-width: 640px) {
  .hero-animated h2 {
    font-size: 32px;
  }

  .hero-animated p {
    font-size: 18px;
    margin-bottom: 30px;
  }

  .hero-animated .btn-get-started,
  .hero-animated .btn-watch-video {
    font-size: 14px;
  }
}

@keyframes up-down {
  0% {
    transform: translateY(10px);
  }

  100% {
    transform: translateY(-10px);
  }
}

/*--------------------------------------------------------------
# Carousel Hero Section
--------------------------------------------------------------*/
.hero {
  width: 100%;
  padding: 0;
  background: var(--color-black);
  background: url("../img/hero-bg.png") center center;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 140px 0 60px 0;
}

.hero .carousel-item {
  overflow: hidden;
}

@media (max-width: 640px) {
  .hero .container {
    padding: 0 60px;
  }
}

.hero h2 {
  color: var(--color-secondary);
  margin-bottom: 25px;
  font-size: 48px;
  font-weight: 300;
  animation: fadeInDown 1s both 0.2s;
}

@media (max-width: 768px) {
  .hero h2 {
    font-size: 30px;
  }
}

.hero p {
  color: var(--color-secondary-light);
  animation: fadeInDown 1s both 0.4s;
  font-weight: 500;
  margin-bottom: 30px;
}

.hero .img {
  margin-bottom: 40px;
  animation: fadeInDownLite 1s both;
}

.hero .btn-get-started {
  font-family: var(--font-default);
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 1px;
  display: inline-block;
  padding: 8px 32px;
  border-radius: 5px;
  transition: 0.5s;
  animation: fadeInUp 1s both 0.6s;
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
}

.hero .btn-get-started:hover {
  background: var(--color-primary);
  color: var(--color-white);
}

.hero .carousel-control-prev {
  justify-content: start;
}

@media (min-width: 640px) {
  .hero .carousel-control-prev {
    padding-left: 15px;
  }
}

.hero .carousel-control-next {
  justify-content: end;
}

@media (min-width: 640px) {
  .hero .carousel-control-next {
    padding-right: 15px;
  }
}

.hero .carousel-control-next-icon,
.hero .carousel-control-prev-icon {
  background: none;
  font-size: 26px;
  line-height: 0;
  background: rgba(var(--color-secondary-rgb), 0.4);
  color: rgba(var(--color-white-rgb), 0.98);
  border-radius: 50px;
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero .carousel-control-next-icon {
  padding-left: 3px;
}

.hero .carousel-control-prev-icon {
  padding-right: 3px;
}

.hero .carousel-control-prev,
.hero .carousel-control-next {
  transition: 0.3s;
}

.hero .carousel-control-prev:focus,
.hero .carousel-control-next:focus {
  opacity: 0.5;
}

.hero .carousel-control-prev:hover,
.hero .carousel-control-next:hover {
  opacity: 0.9;
}

.hero .carousel-indicators li {
  cursor: pointer;
  background: rgba(var(--color-secondary-rgb), 0.5);
  overflow: hidden;
  border: 0;
  width: 12px;
  height: 12px;
  border-radius: 50px;
  opacity: 0.6;
  transition: 0.3s;
}

.hero .carousel-indicators li.active {
  opacity: 1;
  background: var(--color-primary);
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInDownLite {
  from {
    opacity: 0;
    transform: translate3d(0, -10%, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/*--------------------------------------------------------------
# Fullscreen Hero Section
--------------------------------------------------------------*/
.hero-fullscreen {
  width: 100%;
  min-height: 100vh;
  background: url("../img/hero-fullscreen-bg.jpg") center center;
  background-size: cover;
  position: relative;
  padding: 120px 0 60px;
}

.hero-fullscreen:before {
  content: "";
  background: rgba(var(--color-white-rgb), 0.85);
  position: absolute;
  inset: 0;
}

@media (min-width: 1365px) {
  .hero-fullscreen {
    background-attachment: fixed;
  }
}

.hero-fullscreen h2 {
  margin: 0 0 10px 0;
  font-size: 48px;
  font-weight: 300;
  color: var(--color-secondary);
  font-family: var(--font-default);
}

.hero-fullscreen h2 span {
  color: var(--color-primary);
}

.hero-fullscreen p {
  color: rgba(var(--color-secondary-rgb), 0.8);
  margin: 0 0 30px 0;
  font-size: 20px;
  font-weight: 400;
}

.hero-fullscreen .btn-get-started {
  font-size: 16px;
  font-weight: 400;
  display: inline-block;
  padding: 10px 28px;
  border-radius: 4px;
  transition: 0.5s;
  color: var(--color-white);
  background: var(--color-primary);
  font-family: var(--font-default);
}

.hero-fullscreen .btn-get-started:hover {
  background: rgba(var(--color-primary-rgb), 0.8);
}

.hero-fullscreen .btn-watch-video {
  font-size: 16px;
  transition: 0.5s;
  margin-left: 25px;
  font-family: var(--font-default);
  color: var(--color-secondary);
  font-weight: 600;
}

.hero-fullscreen .btn-watch-video i {
  color: var(--color-primary);
  font-size: 32px;
  transition: 0.3s;
  line-height: 0;
  margin-right: 8px;
}

.hero-fullscreen .btn-watch-video:hover {
  color: var(--color-primary);
}

.hero-fullscreen .btn-watch-video:hover i {
  color: rgba(var(--color-primary-rgb), 0.8);
}

@media (max-width: 640px) {
  .hero-fullscreen h2 {
    font-size: 32px;
  }

  .hero-fullscreen p {
    font-size: 18px;
    margin-bottom: 30px;
  }

  .hero-fullscreen .btn-get-started,
  .hero-fullscreen .btn-watch-video {
    font-size: 14px;
  }
}

/*--------------------------------------------------------------
# Static Hero Section
--------------------------------------------------------------*/
.hero-static {
  width: 100%;
  min-height: 90vh;
  background: url("../img/hero-bg.png") center center;
  background-size: cover;
  position: relative;
  padding: 150px 0 60px;
}

.hero-static h2 {
  margin: 0 0 10px 0;
  font-size: 48px;
  font-weight: 300;
  color: var(--color-secondary);
  font-family: var(--font-default);
}

.hero-static h2 span {
  color: var(--color-primary);
}

.hero-static p {
  color: rgba(var(--color-secondary-rgb), 0.8);
  margin: 0 0 15px 0;
  font-size: 18px;
  font-weight: 400;
}

.hero-static .btn-get-started {
  font-size: 16px;
  font-weight: 400;
  display: inline-block;
  padding: 10px 28px;
  border-radius: 4px;
  transition: 0.5s;
  color: var(--color-white);
  background: var(--color-primary);
  font-family: var(--font-default);
}

.hero-static .btn-get-started:hover {
  background: rgba(var(--color-primary-rgb), 0.8);
}

.hero-static .btn-watch-video {
  font-size: 16px;
  transition: 0.5s;
  margin-left: 25px;
  font-family: var(--font-default);
  color: var(--color-secondary);
  font-weight: 600;
}

.hero-static .btn-watch-video i {
  color: var(--color-primary);
  font-size: 32px;
  transition: 0.3s;
  line-height: 0;
  margin-right: 8px;
}

.hero-static .btn-watch-video:hover {
  color: var(--color-primary);
}

.hero-static .btn-watch-video:hover i {
  color: rgba(var(--color-primary-rgb), 0.8);
}

@media (max-width: 640px) {
  .hero-static h2 {
    font-size: 32px;
  }

  .hero-static p {
    font-size: 16px;
    margin-bottom: 20px;
  }

  .hero-static .btn-get-started,
  .hero-static .btn-watch-video {
    font-size: 14px;
  }
}

/*--------------------------------------------------------------
# Featured Services Section
--------------------------------------------------------------*/
.featured-services .service-item {
  padding: 30px;
  transition: all ease-in-out 0.4s;
  background: var(--color-white);
  height: 100%;
}

.featured-services .service-item .icon {
  margin-bottom: 10px;
}

.featured-services .service-item .icon i {
  color: var(--color-primary);
  font-size: 36px;
  transition: 0.3s;
}

.featured-services .service-item h4 {
  font-weight: 600;
  margin-bottom: 15px;
  font-size: 24px;
}

.featured-services .service-item h4 a {
  color: var(--color-secondary);
  transition: ease-in-out 0.3s;
}

.featured-services .service-item p {
  line-height: 24px;
  font-size: 14px;
  margin-bottom: 0;
}

.featured-services .service-item:hover {
  transform: translateY(-10px);
  box-shadow: 0px 0 60px 0 rgba(var(--color-secondary-rgb), 0.1);
}

.featured-services .service-item:hover h4 a {
  color: var(--color-primary);
}

/*--------------------------------------------------------------
# About Section
--------------------------------------------------------------*/
.about .about-img {
  position: relative;
  margin: 60px 0 0 60px;
}

.about .about-img:before {
  position: absolute;
  inset: -60px 0 0 -60px;
  z-index: -1;
  content: "";
  background: url("../img/about-bg.png") top left;
  background-repeat: no-repeat;
}

@media (max-width: 575px) {
  .about .about-img {
    margin: 30px 0 0 30px;
  }

  .about .about-img:before {
    inset: -30px 0 0 -30px;
  }
}

.about h3 {
  color: var(--color-secondary);
  font-family: var(--font-default);
  font-weight: 300;
  font-size: 32px;
  margin-bottom: 20px;
}

@media (max-width: 768px) {
  .about h3 {
    font-size: 28px;
  }
}

.about .nav-pills {
  border-bottom: 1px solid rgba(var(--color-secondary-rgb), 0.2);
}

.about .nav-pills li+li {
  margin-left: 40px;
}

.about .nav-link {
  background: none;
  font-size: 18px;
  font-weight: 400;
  color: var(--color-secondary);
  padding: 12px 0;
  margin-bottom: -2px;
  border-radius: 0;
  font-family: var(--font-default);
}


.about .nav-link.active {
  color: var(--color-primary);
  background: none;
  border-bottom: 3px solid var(--color-primary);
}

@media (max-width: 575px) {
  .about .nav-link {
    font-size: 16px;
  }
}

.about .tab-content h4 {
  font-size: 18px;
  margin: 0;
  font-weight: 700;
  color: var(--color-secondary);
}

.about .tab-content i {
  font-size: 22px;
  line-height: 0;
  margin-right: 8px;
  color: var(--color-primary);
}

/*--------------------------------------------------------------
# Clients Section
--------------------------------------------------------------*/
.clients {
  padding: 0 0 60px 0;
}

.clients .swiper-slide img {
  opacity: 0.5;
  transition: 0.3s;
  filter: grayscale(100);
}

.clients .swiper-slide img:hover {
  filter: none;
  opacity: 1;
}

/*--------------------------------------------------------------
# Call To Action Section
--------------------------------------------------------------*/
.cta {
  padding: 0;
  margin-bottom: 60px;
}

.cta .container {
  padding: 80px;
  background: rgba(var(--color-secondary-rgb), 0.1);
  border-radius: 15px;
}

@media (max-width: 992px) {
  .cta .container {
    padding: 60px;
  }
}

.cta .content h3 {
  color: var(--color-secondary);
  font-size: 48px;
  font-weight: 700;
}

.cta .content h3 em {
  font-style: normal;
  position: relative;
}

.cta .content h3 em:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  height: 10px;
  background: rgba(var(--color-primary-rgb), 0.5);
  z-index: -1;
}

.cta .content p {
  color: var(--color-secondary);
  font-weight: 600;
  font-size: 18px;
}

.cta .content .cta-btn {
  color: var(--color-white);
  font-weight: 500;
  font-size: 16px;
  display: inline-block;
  padding: 12px 40px;
  border-radius: 5px;
  transition: 0.5s;
  margin-top: 10px;
  background: rgba(var(--color-primary-dark-rgb), 0.9);
}

.cta .content .cta-btn:hover {
  background: var(--color-primary);
}

.cta .img {
  position: relative;
}

.cta .img:before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(var(--color-white-rgb), 0.5);
  border-radius: 15px;
  transform: rotate(12deg);
}

.cta .img:after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(var(--color-white-rgb), 0.9);
  border-radius: 15px;
  transform: rotate(6deg);
}

.cta .img img {
  position: relative;
  z-index: 3;
  border-radius: 15px;
}

/*--------------------------------------------------------------
# On Focus Section
--------------------------------------------------------------*/
.onfocus {
  padding: 0;
}

.onfocus .video-play {
  min-height: 400px;
  background: linear-gradient(rgba(var(--color-black-rgb), 0.4), rgba(var(--color-black-rgb), 0.7)), url("../img/onfocus-video-bg.jpg") center center;
  background-size: cover;
}

.onfocus .content {
  background: linear-gradient(rgba(var(--color-secondary-rgb), 0.5), rgba(var(--color-secondary-rgb), 0.8)), url("../img/onfocus-content-bg.jpg") center center;
  background-size: cover;
  color: rgba(var(--color-white-rgb), 0.8);
  padding: 40px;
}

@media (min-width: 768px) {
  .onfocus .content {
    padding: 80px;
  }
}

.onfocus .content h3 {
  font-weight: 600;
  font-size: 32px;
  color: var(--color-white);
}

.onfocus .content ul {
  list-style: none;
  padding: 0;
}

.onfocus .content ul li {
  padding-bottom: 10px;
}

.onfocus .content ul i {
  font-size: 20px;
  padding-right: 4px;
  color: var(--color-primary);
}

.onfocus .content p:last-child {
  margin-bottom: 0;
}

.onfocus .content .read-more {
  font-family: var(--font-default);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 1px;
  padding: 12px 24px;
  border-radius: 5px;
  transition: 0.3s;
  display: -nline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  background: var(--color-primary);
}

.onfocus .content .read-more i {
  font-size: 18px;
  margin-left: 5px;
  line-height: 0;
  transition: 0.3s;
}

.onfocus .content .read-more:hover {
  background: rgba(var(--color-primary-rgb), 0.9);
  padding-right: 19px;
}

.onfocus .content .read-more:hover i {
  margin-left: 10px;
}

.onfocus .play-btn {
  width: 94px;
  height: 94px;
  background: radial-gradient(var(--color-primary) 50%, rgba(var(--color-primary-rgb), 0.4) 52%);
  border-radius: 50%;
  display: block;
  position: absolute;
  left: calc(50% - 47px);
  top: calc(50% - 47px);
  overflow: hidden;
}

.onfocus .play-btn:before {
  content: "";
  position: absolute;
  width: 120px;
  height: 120px;
  animation-delay: 0s;
  animation: pulsate-btn 2s;
  animation-direction: forwards;
  animation-iteration-count: infinite;
  animation-timing-function: steps;
  opacity: 1;
  border-radius: 50%;
  border: 5px solid rgba(var(--color-primary-rgb), 0.7);
  top: -15%;
  left: -15%;
  background: rgba(198, 16, 0, 0);
}

.onfocus .play-btn:after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-40%) translateY(-50%);
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 15px solid var(--color-white);
  z-index: 100;
  transition: all 400ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.onfocus .play-btn:hover:before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-40%) translateY(-50%);
  width: 0;
  height: 0;
  border: none;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 15px solid var(--color-white);
  z-index: 200;
  animation: none;
  border-radius: 0;
}

.onfocus .play-btn:hover:after {
  border-left: 15px solid var(--color-primary);
  transform: scale(20);
}

@keyframes pulsate-btn {
  0% {
    transform: scale(0.6, 0.6);
    opacity: 1;
  }

  100% {
    transform: scale(1, 1);
    opacity: 0;
  }
}

/*--------------------------------------------------------------
# Features Section
--------------------------------------------------------------*/
.features .nav-tabs {
  border: 0;
}

.features .nav-link {
  border: 0;
  padding: 25px 20px;
  color: var(--color-secondary);
  box-shadow: 5px 5px 25px rgba(var(--color-secondary-rgb), 0.15);
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  transition: 0s;
  cursor: pointer;
  height: 100%;
}

.features .nav-link i {
  font-size: 32px;
  line-height: 0;
}

.features .nav-link h4 {
  text-align: center;
  font-size: 18px;
  font-weight: 600;
  margin: 10px 0 0 0;
  color: var(--color-secondary);
}

.features .nav-link:hover {
  box-shadow: 0 0 15px rgba(33,33,33,.2);	
  color: var(--color-primary);
}

.features .nav-link.active {
  transition: 0.3s;
  background: var(--color-secondary) linear-gradient(rgba(var(--color-primary-rgb), 0.95), rgba(var(--color-primary-rgb), 0.6));
  border-color: var(--color-primary);
}

.features .nav-link.active h4 {
  color: var(--color-white);
}

.features .nav-link.active i {
  color: var(--color-white) !important;
}

.features .tab-content {
  margin-top: 30px;
}

.features .tab-pane.active {
  animation: fadeIn 0.5s ease-out;
}

.features .tab-pane h3 {
  font-weight: 600;
  font-size: 36px;
  color: var(--color-secondary);
}

.features .tab-pane ul {
  list-style: none;
  padding: 0;
}

.features .tab-pane ul li {
  padding-bottom: 10px;
}

.features .tab-pane ul i {
  font-size: 24px;
  margin-right: 4px;
  color: var(--color-primary);
}

.features .tab-pane p:last-child {
  margin-bottom: 0;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

/*--------------------------------------------------------------
# Services Section
--------------------------------------------------------------*/
.services .img {
  border-radius: 8px;
  overflow: hidden;
}

.services .img img {
  transition: 0.6s;
}

.services .details {
  padding: 50px 30px;
  /* margin: -100px 30px 0 30px; */
  transition: all ease-in-out 0.3s;
  background: var(--color-white);
  position: relative;
  background: rgba(var(--color-white-rgb), 0.9);
  text-align: center;
  border-radius: 8px;
  box-shadow: 0px 0 25px rgba(var(--color-black-rgb), 0.1);
}

.services .details .icon {
  margin: 0;
  width: 72px;
  height: 72px;
  background: var(--color-primary);
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  color: var(--color-white);
  font-size: 28px;
  transition: ease-in-out 0.3s;
  position: absolute;
  top: -36px;
  left: calc(50% - 36px);
  border: 6px solid var(--color-white);
}

.services .details h3 {
  color: var(--color-default);
  font-weight: 700;
  margin: 10px 0 15px 0;
  font-size: 22px;
  transition: ease-in-out 0.3s;
}

.services .details p {
  line-height: 24px;
  font-size: 14px;
  margin-bottom: 0;
}

.services .service-item:hover .details h3 {
  color: var(--color-primary);
}

.services .service-item:hover .details .icon {
  background: var(--color-white);
  border: 2px solid var(--color-primary);
}

.services .service-item:hover .details .icon i {
  color: var(--color-primary);
}

.services .service-item:hover .img img {
  transform: scale(1.2);
}

/*--------------------------------------------------------------
# Testimonials Section
--------------------------------------------------------------*/
.testimonials {
  padding: 80px 0;
  background: url("../img/testimonials-bg.jpg") no-repeat;
  background-position: center center;
  background-size: cover;
  position: relative;
}

.testimonials::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(var(--color-secondary-dark-rgb), 0.8);
}

.testimonials .section-header {
  margin-bottom: 40px;
}

.testimonials .testimonials-carousel,
.testimonials .testimonials-slider {
  overflow: hidden;
}

.testimonials .testimonial-item {
  text-align: center;
  color: var(--color-white);
}

.testimonials .testimonial-item .testimonial-img {
  width: 100px;
  border-radius: 50%;
  border: 6px solid rgba(var(--color-white-rgb), 0.15);
  margin: 0 auto;
}

.testimonials .testimonial-item h3 {
  font-size: 20px;
  font-weight: bold;
  margin: 10px 0 5px 0;
  color: var(--color-white);
}

.testimonials .testimonial-item h4 {
  font-size: 14px;
  color: rgba(var(--color-white-rgb), 0.6);
  margin: 0 0 15px 0;
}

.testimonials .testimonial-item .stars {
  margin-bottom: 15px;
}

.testimonials .testimonial-item .stars i {
  color: var(--color-yellow);
  margin: 0 1px;
}

.testimonials .testimonial-item .quote-icon-left,
.testimonials .testimonial-item .quote-icon-right {
  color: rgba(var(--color-white-rgb), 0.6);
  font-size: 26px;
  line-height: 0;
}

.testimonials .testimonial-item .quote-icon-left {
  display: inline-block;
  left: -5px;
  position: relative;
}

.testimonials .testimonial-item .quote-icon-right {
  display: inline-block;
  right: -5px;
  position: relative;
  top: 10px;
  transform: scale(-1, -1);
}

.testimonials .testimonial-item p {
  font-style: italic;
  margin: 0 auto 15px auto;
}

.testimonials .swiper-pagination {
  margin-top: 20px;
  position: relative;
}

.testimonials .swiper-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background-color: rgba(var(--color-white-rgb), 0.4);
  opacity: 0.5;
}

.testimonials .swiper-pagination .swiper-pagination-bullet-active {
  background-color: var(--color-white);
  opacity: 1;
}

@media (min-width: 992px) {
  .testimonials .testimonial-item p {
    width: 80%;
  }
}

/*--------------------------------------------------------------
# Pricing Section
--------------------------------------------------------------*/
.pricing {
  background: rgba(var(--color-secondary-rgb), 0.04);
}

.pricing .pricing-item {
  padding: 60px 40px;
  box-shadow: 0 3px 20px -2px rgba(var(--color-gray-rgb), 0.15);
  background: var(--color-white);
  height: 100%;
  display: flex;
  flex-direction: column;
  border: 4px solid var(--color-white);
  border-radius: 10px;
  overflow: hidden;
}

.pricing .pricing-header {
  background: linear-gradient(rgba(var(--color-secondary-rgb), 0.9), rgba(var(--color-secondary-rgb), 0.9)), url("../img/pricing-bg.jpg") center center;
  background-size: cover;
  text-align: center;
  padding: 40px;
  margin: -60px -40px 0;
}

.pricing h3 {
  font-weight: 600;
  margin-bottom: 5px;
  font-size: 36px;
  color: var(--color-white);
}

.pricing h4 {
  font-size: 48px;
  color: var(--color-white);
  font-weight: 400;
  font-family: var(--font-default);
  margin-bottom: 0;
}

.pricing h4 sup {
  font-size: 28px;
}

.pricing h4 span {
  color: rgba(var(--color-white-rgb), 0.6);
  font-size: 24px;
}

.pricing ul {
  padding: 30px 0;
  list-style: none;
  color: var(--color-gray);
  text-align: left;
  line-height: 20px;
}

.pricing ul li {
  padding: 10px 0;
  display: flex;
  align-items: center;
}

.pricing ul i {
  color: var(--color-primary);
  font-size: 36px;
  padding-right: 3px;
  line-height: 0;
}

.pricing ul .na {
  color: rgba(var(--color-gray-rgb), 0.5);
}

.pricing ul .na i {
  color: rgba(var(--color-gray-rgb), 0.5);
  font-size: 24px;
  padding-left: 4px;
}

.pricing ul .na span {
  text-decoration: line-through;
}

.pricing .buy-btn {
  display: inline-block;
  padding: 12px 40px;
  border-radius: 6px;
  color: var(--color-primary);
  transition: none;
  font-size: 16px;
  font-weight: 700;
  transition: 0.3s;
  border: 1px solid var(--color-primary);
}

.pricing .buy-btn:hover {
  background: var(--color-primary);
  color: var(--color-white);
}

.pricing .featured {
  border-color: var(--color-primary);
}

.pricing .featured .pricing-header {
  background: linear-gradient(rgba(var(--color-primary-rgb), 0.9), rgba(var(--color-primary-rgb), 0.9)), url("../img/pricing-bg.jpg") center center;
}

.pricing .featured .buy-btn {
  background: var(--color-primary);
  color: var(--color-white);
}

/*--------------------------------------------------------------
# F.A.Q Section
--------------------------------------------------------------*/
@media (max-width: 991px) {
  .faq {
    padding: 0;
  }
}

.faq .content h3 {
  font-weight: 400;
  font-size: 34px;
  color: var(--color-secondary);
}

.faq .content h4 {
  font-size: 20px;
  font-weight: 700;
  margin-top: 5px;
}

.faq .content p {
  font-size: 15px;
  color: var(--color-gray);
}

.faq .img {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  min-height: 400px;
}

.faq .accordion-item {
  border: 0;
  margin-top: 15px;
  box-shadow: 0px 5px 25px 0px rgba(var(--color-black-rgb), 0.06);
}

.faq .accordion-collapse {
  border: 0;
}

.faq .accordion-button {
  padding: 15px 40px 20px 60px;
  font-weight: 600;
  border: 0;
  font-size: 18px;
  color: var(--color-default);
  text-align: left;
  background: var(--color-white);
  box-shadow: none;
  border-radius: 5px;
}

.faq .accordion-button:not(.collapsed) {
  color: var(--color-primary);
  border-bottom: 0;
  box-shadow: none;
}

.faq .question-icon {
  position: absolute;
  top: 14px;
  left: 25px;
  font-size: 20px;
  color: var(--color-primary);
}

.faq .accordion-button:after {
  position: absolute;
  right: 15px;
  top: 15px;
  color: var(--color-primary);
}

.faq .accordion-body {
  padding: 0 30px 25px 60px;
  border: 0;
  border-radius: 5px;
  background: var(--color-white);
  box-shadow: none;
}

/*--------------------------------------------------------------
# Portfolio Section
--------------------------------------------------------------*/
.portfolio .portfolio-flters {
  padding: 0;
  margin: 0 auto 30px auto;
  list-style: none;
  text-align: center;
}

.portfolio .portfolio-flters li {
  cursor: pointer;
  display: inline-block;
  padding: 0;
  font-size: 18px;
  font-weight: 300;
  margin: 0 10px;
  line-height: 1;
  margin-bottom: 5px;
  transition: all 0.3s ease-in-out;
}

.portfolio .portfolio-flters li:hover,
.portfolio .portfolio-flters li.filter-active {
  color: var(--color-primary);
}

.portfolio .portfolio-flters li:first-child {
  margin-left: 0;
}

.portfolio .portfolio-flters li:last-child {
  margin-right: 0;
}

@media (max-width: 575px) {
  .portfolio .portfolio-flters li {
    font-size: 14px;
    margin: 0 5px;
  }
}

.portfolio .portfolio-item {
  position: relative;
  border: 1px solid var(--color-white);
  overflow: hidden;
  z-index: 1;
}

.portfolio .portfolio-item img {
  transition: all 0.3s;
}

.portfolio .portfolio-item:before {
  content: "";
  inset: 0;
  position: absolute;
  background: rgba(var(--color-secondary-rgb), 0.8);
  z-index: 2;
  transition: 0.5s;
  visibility: hidden;
  opacity: 0;
}

.portfolio .portfolio-item .portfolio-info {
  opacity: 0;
  position: absolute;
  inset: auto 40px 40px 40px;
  z-index: 3;
  transition: all ease-in-out 0.3s;
  padding: 20px;
}

.portfolio .portfolio-item .portfolio-info h4 {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-white);
  padding-right: 50px;
}

.portfolio .portfolio-item .portfolio-info .preview-link,
.portfolio .portfolio-item .portfolio-info .details-link {
  position: absolute;
  right: 50px;
  font-size: 24px;
  top: calc(50% - 14px);
  color: rgba(var(--color-white-rgb), 0.7);
  transition: 0.3s;
  line-height: 0;
}

.portfolio .portfolio-item .portfolio-info .preview-link:hover,
.portfolio .portfolio-item .portfolio-info .details-link:hover {
  color: var(--color-white);
}

.portfolio .portfolio-item .portfolio-info .details-link {
  right: 14px;
  font-size: 28px;
}

.portfolio .portfolio-item:hover:before {
  visibility: visible;
  opacity: 1;
}

.portfolio .portfolio-item:hover img {
  transform: scale(1.2);
}

.portfolio .portfolio-item:hover .portfolio-info {
  opacity: 1;
  inset: auto 10px 0 10px;
}

/*--------------------------------------------------------------
# Team Section
--------------------------------------------------------------*/
.team .team-member .member-img {
  border-radius: 8px;
  overflow: hidden;
}

.team .team-member .social {
  position: absolute;
  left: 0;
  top: -18px;
  right: 0;
  opacity: 0;
  transition: ease-in-out 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.team .team-member .social a {
  transition: color 0.3s;
  color: var(--color-white);
  background: var(--color-primary);
  margin: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  transition: 0.3s;
}

.team .team-member .social a i {
  line-height: 0;
  font-size: 16px;
}

.team .team-member .social a:hover {
  background: var(--color-primary-light);
}

.team .team-member .social i {
  font-size: 18px;
  margin: 0 2px;
}

.team .team-member .member-info {
  padding: 30px 15px;
  text-align: center;
  box-shadow: 0px 2px 15px rgba(var(--color-black-rgb), 0.1);
  background: var(--color-white);
  margin: -50px 20px 0 20px;
  position: relative;
  border-radius: 8px;
}

.team .team-member .member-info h4 {
  font-weight: 400;
  margin-bottom: 5px;
  font-size: 24px;
  color: var(--color-secondary);
}

.team .team-member .member-info span {
  display: block;
  font-size: 16px;
  font-weight: 400;
  color: var(--color-gray);
}

.team .team-member .member-info p {
  font-style: italic;
  font-size: 14px;
  line-height: 26px;
  color: var(--color-gray);
}

.team .team-member:hover .social {
  opacity: 1;
}

/*--------------------------------------------------------------
# Recent Blog Posts
--------------------------------------------------------------*/
.recent-blog-posts .post-box {
  transition: 0.3s;
  height: 100%;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}

.recent-blog-posts .post-box .post-img {
  overflow: hidden;
  position: relative;
  border-radius: 10px;
}

.recent-blog-posts .post-box .post-img img {
  transition: 0.5s;
}

.recent-blog-posts .post-box .meta {
  margin-top: 15px;
}

.recent-blog-posts .post-box .meta .post-date {
  font-size: 15px;
  font-weight: 400;
  color: var(--color-primary);
}

.recent-blog-posts .post-box .meta .post-author {
  font-size: 15px;
  font-weight: 400;
  color: var(--color-secondary);
}

.recent-blog-posts .post-box .post-title {
  font-size: 24px;
  color: var(--color-secondary);
  font-weight: 700;
  margin: 15px 0 0 0;
  position: relative;
  transition: 0.3s;
}

.recent-blog-posts .post-box p {
  margin: 15px 0 0 0;
  color: rgba(var(--color-secondary-dark-rgb), 0.7);
}

.recent-blog-posts .post-box .readmore {
  display: flex;
  align-items: center;
  font-weight: 600;
  line-height: 1;
  transition: 0.3s;
  margin-top: 15px;
}

.recent-blog-posts .post-box .readmore i {
  line-height: 0;
  margin-left: 4px;
  font-size: 18px;
}

.recent-blog-posts .post-box:hover .post-title {
  color: var(--color-primary);
}

.recent-blog-posts .post-box:hover .post-img img {
  transform: scale(1.1);
}

/*--------------------------------------------------------------
# Contact Section
--------------------------------------------------------------*/
.contact .map {
  margin-bottom: 40px;
}

.contact .map iframe {
  border: 0;
  width: 100%;
  height: 400px;
}

.contact .info {
  padding: 40px;
  box-shadow: 0px 2px 15px rgba(var(--color-black-rgb), 0.1);
  overflow: hidden;
}

.contact .info h3 {
  font-weight: 600;
  font-size: 24px;
}

.contact .info p {
  color: var(--color-secondary-light);
  margin-bottom: 30px;
  font-size: 15px;
}

.contact .info-item+.info-item {
  padding-top: 20px;
  margin-top: 20px;
  border-top: 1px solid rgba(var(--color-secondary-rgb), 0.15);
}

.contact .info-item i {
  font-size: 24px;
  color: var(--color-primary);
  transition: all 0.3s ease-in-out;
  margin-right: 20px;
}

.contact .info-item h4 {
  padding: 0;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 5px;
  color: var(--color-secondary);
}

.contact .info-item p {
  padding: 0;
  margin-bottom: 0;
  font-size: 14px;
  color: var(--color-secondary-light);
}

.contact .php-email-form {
  width: 100%;
  background: var(--color-white);
}

.contact .php-email-form .form-group {
  padding-bottom: 8px;
}

.contact .php-email-form .error-message {
  display: none;
  color: var(--color-white);
  background: var(--color-red);
  text-align: left;
  padding: 15px;
  font-weight: 600;
}

.contact .php-email-form .error-message br+br {
  margin-top: 25px;
}

.contact .php-email-form .sent-message {
  display: none;
  color: var(--color-white);
  background: var(--color-green);
  text-align: center;
  padding: 15px;
  font-weight: 600;
}

.contact .php-email-form .loading {
  display: none;
  background: var(--color-white);
  text-align: center;
  padding: 15px;
}

.contact .php-email-form .loading:before {
  content: "";
  display: inline-block;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  margin: 0 10px -6px 0;
  border: 3px solid var(--color-green);
  border-top-color: var(--color-white);
  animation: animate-loading 1s linear infinite;
}

.contact .php-email-form input[type=text],
.contact .php-email-form input[type=email],
.contact .php-email-form textarea {
  border-radius: 0px;
  box-shadow: none;
  font-size: 14px;
}

.contact .php-email-form input[type=text]:focus,
.contact .php-email-form input[type=email]:focus,
.contact .php-email-form textarea:focus {
  border-color: var(--color-secondary-light);
}

.contact .php-email-form input[type=text],
.contact .php-email-form input[type=email] {
  height: 48px;
  padding: 10px 15px;
}

.contact .php-email-form textarea {
  padding: 10px 12px;
  height: 290px;
}

.contact .php-email-form button[type=submit] {
  background: var(--color-primary);
  border: 0;
  padding: 13px 50px;
  color: var(--color-white);
  transition: 0.4s;
  border-radius: 0;
}

.contact .php-email-form button[type=submit]:hover {
  background: rgba(var(--color-primary-rgb), 0.85);
}

@keyframes animate-loading {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/*--------------------------------------------------------------
# Portfolio Details
--------------------------------------------------------------*/
.portfolio-details {
  padding-top: 40px;
}

.portfolio-details .portfolio-details-slider img {
  width: 100%;
}

.portfolio-details .portfolio-details-slider .swiper-pagination {
  margin-top: 20px;
  position: relative;
}

.portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background-color: var(--color-white);
  opacity: 1;
  border: 1px solid var(--color-primary);
}

.portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet-active {
  background-color: var(--color-primary);
}

.portfolio-details .portfolio-info {
  padding: 30px;
  box-shadow: 0px 0 30px rgba(var(--color-secondary-rgb), 0.15);
}

.portfolio-details .portfolio-info h3 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--color-secondary-light);
}

.portfolio-details .portfolio-info ul {
  list-style: none;
  padding: 0;
  font-size: 15px;
}

.portfolio-details .portfolio-info ul li+li {
  margin-top: 10px;
}

.portfolio-details .portfolio-description {
  padding-top: 30px;
}

.portfolio-details .portfolio-description h2 {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 20px;
}

.portfolio-details .portfolio-description p {
  padding: 0;
}

/*--------------------------------------------------------------
# Blog Stylings
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# Blog Home Posts List
--------------------------------------------------------------*/
.blog .posts-list article {
  box-shadow: 0 4px 16px rgba(var(--color-black-rgb), 0.1);
  padding: 30px;
  height: 100%;
}

.blog .posts-list article+article {
  margin-top: 60px;
}

.blog .posts-list .post-img {
  max-height: 240px;
  margin: -30px -30px 0 -30px;
  overflow: hidden;
}

.blog .posts-list .title {
  font-size: 24px;
  font-weight: 700;
  padding: 0;
  margin: 20px 0 0 0;
}

.blog .posts-list .title a {
  color: var(--color-secondary);
  transition: 0.3s;
}

.blog .posts-list .title a:hover {
  color: var(--color-primary);
}

.blog .posts-list .meta-top {
  margin-top: 20px;
  color: var(--color-gray);
}

.blog .posts-list .meta-top ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  align-items: center;
  padding: 0;
  margin: 0;
}

.blog .posts-list .meta-top ul li+li {
  padding-left: 20px;
}

.blog .posts-list .meta-top i {
  font-size: 16px;
  margin-right: 8px;
  line-height: 0;
  color: rgba(var(--color-primary-rgb), 0.8);
}

.blog .posts-list .meta-top a {
  color: var(--color-gray);
  font-size: 14px;
  display: inline-block;
  line-height: 1;
}

.blog .posts-list .content {
  margin-top: 20px;
}

.blog .posts-list .read-more a {
  display: inline-block;
  background: var(--color-primary);
  color: var(--color-white);
  padding: 8px 30px;
  transition: 0.3s;
  font-size: 14px;
  border-radius: 4px;
}

.blog .posts-list .read-more a:hover {
  background: rgba(var(--color-primary-rgb), 0.8);
}

/*--------------------------------------------------------------
# Blog Details Page
--------------------------------------------------------------*/
.blog .blog-details {
  box-shadow: 0 4px 16px rgba(var(--color-black-rgb), 0.1);
  padding: 0 20px;
}

.blog .blog-details .post-img {
  margin: -30px -30px 20px -30px;
  overflow: hidden;
}

.blog .blog-details .title {
  font-size: 28px;
  font-weight: 700;
  padding: 0;
  margin: 20px 0 0 0;
  color: var(--color-secondary);
}

.blog .blog-details .content {
  margin-top: 0px;
  padding: 20px 0;
}

.blog .blog-details .content h3 {
  font-size: 22px;
  margin-top: 30px;
  font-weight: bold;
}

.blog .blog-details .content blockquote {
  overflow: hidden;
  background-color: rgba(var(--color-secondary-rgb), 0.06);
  padding: 20px;
  position: relative;  
  margin: 20px 0;
}

.blog .blog-details .content blockquote p {
  color: var(--color-default);
  line-height: 1.6;
  margin-bottom: 0;
  font-style: italic;
  font-weight: 500;
  font-size: 22px;
}

.blog .blog-details .content blockquote:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background-color: var(--color-secondary);
  margin-top: 20px;
  margin-bottom: 20px;
}

.blog .blog-details .meta-top {
  margin-top: 20px;
  color: var(--color-gray);
}

.blog .blog-details .meta-top ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  align-items: center;
  padding: 0;
  margin: 0;
}

.blog .blog-details .meta-top ul li+li {
  padding-left: 20px;
}

.blog .blog-details .meta-top i {
  font-size: 16px;
  margin-right: 8px;
  line-height: 0;
  color: rgba(var(--color-primary-rgb), 0.8);
}

.blog .blog-details .meta-top a {
  color: var(--color-gray);
  font-size: 14px;
  display: inline-block;
  line-height: 1;
}

.blog .blog-details .meta-bottom {
  padding-top: 10px;
  border-top: 1px solid rgba(var(--color-secondary-rgb), 0.15);
}

.blog .blog-details .meta-bottom i {
  color: var(--color-secondary-light);
  display: inline;
}

.blog .blog-details .meta-bottom a {
  color: rgba(var(--color-secondary-rgb), 0.8);
  transition: 0.3s;
}

.blog .blog-details .meta-bottom a:hover {
  color: var(--color-primary);
}

.blog .blog-details .meta-bottom .cats {
  list-style: none;
  display: inline;
  padding: 0 20px 0 0;
  font-size: 14px;
}

.blog .blog-details .meta-bottom .cats li {
  display: inline-block;
}

.blog .blog-details .meta-bottom .tags {
  list-style: none;
  display: inline;
  padding: 0;
  font-size: 14px;
}

.blog .blog-details .meta-bottom .tags li {
  display: inline-block;
}

.blog .blog-details .meta-bottom .tags li+li::before {
  padding-right: 6px;
  color: var(--color-default);
  content: ",";
}

.blog .blog-details .meta-bottom .share {
  font-size: 16px;
}

.blog .blog-details .meta-bottom .share i {
  padding-left: 5px;
}

.blog .post-author {
  padding: 20px;
  margin-top: 30px;
  box-shadow: 0 4px 16px rgba(var(--color-black-rgb), 0.1);
}

.blog .post-author img {
  max-width: 80px;
  margin-right: 30px;
}

/* A landscape logo used as a round avatar. The conference pages put
   assets/img/logo.webp (320x197) in a .rounded-circle, and border-radius:50%
   on a landscape box is an ELLIPSE - it squeezes the mark and cuts its
   corners off. A square box with object-fit:contain keeps the whole logo and
   turns the circle into a frame around it instead of a crop of it.

   Placed after the rule above rather than before it: both selectors are one
   element and two classes, so this only wins on document order.
   background + padding give the mark room inside the ring; without them a
   contained image touches the curve on two sides. */
.post-author img.rounded-circle {
    width: 64px;
    height: 64px;
    max-width: 64px;
    object-fit: contain;
    padding: 7px;
    background: var(--color-white);
    border: 1px solid var(--color-line);
    margin-right: 16px;
}

.blog .post-author h4 {
  font-weight: 600;
  font-size: 22px;
  margin-bottom: 0px;
  padding: 0;
  color: var(--color-secondary);
}

.blog .post-author .social-links {
  margin: 0 10px 10px 0;
}

.blog .post-author .social-links a {
  color: rgba(var(--color-secondary-rgb), 0.5);
  margin-right: 5px;
}

.blog .post-author p {
  font-style: italic;
  color: rgba(var(--color-gray-rgb), 0.8);
  margin-bottom: 0;
}

/*--------------------------------------------------------------
# Blog Sidebar
--------------------------------------------------------------*/
.blog .sidebar .download{
	text-align: center;
    display: block;
    width: 100%;
}

.blog .sidebar {
  padding: 30px;
  box-shadow: 0 4px 16px rgba(var(--color-black-rgb), 0.1);
}

.blog .sidebar .sidebar-title {
  font-size: 20px;
  font-weight: 700;
  padding: 0;
  margin: 0;
  color: var(--color-secondary);
}

.blog .sidebar .sidebar-item+.sidebar-item {
  margin-top: 40px;
}

.blog .sidebar .search-form form {
  background: var(--color-white);
  border: 1px solid rgba(var(--color-secondary-rgb), 0.3);
  padding: 3px 10px;
  position: relative;
}

.blog .sidebar .search-form form input[type=text] {
  border: 0;
  padding: 4px;
  border-radius: 4px;
  width: calc(100% - 40px);
}

.blog .sidebar .search-form form input[type=text]:focus {
  outline: none;
}

.blog .sidebar .search-form form button {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  border: 0;
  background: none;
  font-size: 16px;
  padding: 0 15px;
  margin: -1px;
  background: var(--color-primary);
  color: var(--color-white);
  transition: 0.3s;
  border-radius: 0 4px 4px 0;
  line-height: 0;
}

.blog .sidebar .search-form form button i {
  line-height: 0;
}

.blog .sidebar .search-form form button:hover {
  background: rgba(var(--color-primary-rgb), 0.8);
}

.blog .sidebar .categories ul {
  list-style: none;
  padding: 0;
}

.blog .sidebar .categories ul li+li {
  padding-top: 10px;
}

.blog .sidebar .categories ul a {
  /* color: var(--color-secondary); */
  transition: 0.3s;
}

.blog .sidebar .categories ul a:hover {
  color: var(--color-default);
}

.blog .sidebar .categories ul a span {
  padding-left: 5px;
  color: rgba(var(--color-default-rgb), 0.4);
  font-size: 14px;
}

.blog .sidebar .recent-posts .post-item {
  display: flex;
}

.blog .sidebar .recent-posts .post-item+.post-item {
  margin-top: 15px;
}

.blog .sidebar .recent-posts img {
  width: 80px;
  margin: 10px;
  padding: 10px;	
  /*margin-right: 15px;*/
}

.blog .sidebar .recent-posts h4 {
  font-size: 18px;
  font-weight: 400;
}

.blog .sidebar .recent-posts h4 a {
  color: var(--color-secondary);
  transition: 0.3s;
}

.blog .sidebar .recent-posts h4 a:hover {
  color: var(--color-primary);
}

.blog .sidebar .recent-posts time {
  display: block;
  font-style: italic;
  font-size: 14px;
  color: rgba(var(--color-default-rgb), 0.4);
}

.blog .sidebar .tags {
  margin-bottom: -10px;
}

.blog .sidebar .tags ul {
  list-style: none;
  padding: 0;
}

.blog .sidebar .tags ul li {
  display: inline-block;
}

.blog .sidebar .tags ul a {
  color: var(--color-secondary-light);
  font-size: 14px;
  padding: 6px 14px;
  margin: 0 6px 8px 0;
  border: 1px solid rgba(var(--color-secondary-light-rgb), 0.8);
  display: inline-block;
  transition: 0.3s;
}

.blog .sidebar .tags ul a:hover {
  color: var(--color-white);
  border: 1px solid var(--color-primary);
  background: var(--color-primary);
}

.blog .sidebar .tags ul a span {
  padding-left: 5px;
  color: rgba(var(--color-secondary-light-rgb), 0.8);
  font-size: 14px;
}

/*--------------------------------------------------------------
# Blog Comments
--------------------------------------------------------------*/
.blog .comments {
  margin-top: 30px;
}

.blog .comments .comments-count {
  font-weight: bold;
}

.blog .comments .comment {
  margin-top: 30px;
  position: relative;
}

.blog .comments .comment .comment-img {
  margin-right: 14px;
}

.blog .comments .comment .comment-img img {
  width: 60px;
}

.blog .comments .comment h5 {
  font-size: 16px;
  margin-bottom: 2px;
}

.blog .comments .comment h5 a {
  font-weight: bold;
  color: var(--color-default);
  transition: 0.3s;
}

.blog .comments .comment h5 a:hover {
  color: var(--color-primary);
}

.blog .comments .comment h5 .reply {
  padding-left: 10px;
  color: var(--color-secondary);
}

.blog .comments .comment h5 .reply i {
  font-size: 20px;
}

.blog .comments .comment time {
  display: block;
  font-size: 14px;
  color: rgba(var(--color-secondary-rgb), 0.8);
  margin-bottom: 5px;
}

.blog .comments .comment.comment-reply {
  padding-left: 40px;
}

.blog .comments .reply-form {
  margin-top: 30px;
  padding: 30px;
  box-shadow: 0 4px 16px rgba(var(--color-black-rgb), 0.1);
}

.blog .comments .reply-form h4 {
  font-weight: bold;
  font-size: 22px;
}

.blog .comments .reply-form p {
  font-size: 14px;
}

.blog .comments .reply-form input {
  border-radius: 4px;
  padding: 10px 10px;
  font-size: 14px;
}

.blog .comments .reply-form input:focus {
  box-shadow: none;
  border-color: rgba(var(--color-primary-rgb), 0.8);
}

.blog .comments .reply-form textarea {
  border-radius: 4px;
  padding: 10px 10px;
  font-size: 14px;
}

.blog .comments .reply-form textarea:focus {
  box-shadow: none;
  border-color: rgba(var(--color-primary-rgb), 0.8);
}

.blog .comments .reply-form .form-group {
  margin-bottom: 25px;
}

.blog .comments .reply-form .btn-primary {
  border-radius: 4px;
  padding: 10px 20px;
  border: 0;
  background-color: var(--color-secondary);
}

.blog .comments .reply-form .btn-primary:hover {
  background-color: rgba(var(--color-secondary-rgb), 0.8);
}

/*--------------------------------------------------------------
# Blog Home Pagination
--------------------------------------------------------------*/
.blog .blog-pagination {
  margin-top: 30px;
  color: var(--color-secondary-light);
}

.blog .blog-pagination ul {
  display: flex;
  padding: 0;
  margin: 0;
  list-style: none;
}

.blog .blog-pagination li {
  margin: 0 5px;
  transition: 0.3s;
}

.blog .blog-pagination li a {
  color: var(--color-secondary);
  padding: 7px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.blog .blog-pagination li.active,
.blog .blog-pagination li:hover {
  background: var(--color-primary);
}

.blog .blog-pagination li.active a,
.blog .blog-pagination li:hover a {
  color: var(--color-white);
}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
.footer {
  color: var(--color-white);
  font-size: 14px;
}

.footer .footer-content {
  background: var(--color-secondary);
  padding: 60px 0 30px 0;
}

.footer .footer-content .footer-info {
  margin-bottom: 30px;
}

.footer .footer-content .footer-info h3 {
  font-size: 28px;
  margin: 0 0 20px 0;
  padding: 2px 0 2px 0;
  line-height: 1;
  font-weight: 700;
  text-transform: uppercase;
}

.footer .footer-content .footer-info h3 span {
  color: var(--color-primary);
}

.footer .footer-content .footer-info p {
  font-size: 14px;
  line-height: 24px;
  margin-bottom: 0;
  font-family: var(--font-default);
  color: var(--color-white);
}

.footer .footer-content h4 {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-white);
  position: relative;
  padding-bottom: 12px;
  margin-bottom: 15px;
}

.footer .footer-content h4::after {
  content: "";
  position: absolute;
  display: block;
  width: 20px;
  height: 2px;
  background: var(--color-primary);
  bottom: 0;
  left: 0;
}

.footer .footer-content .footer-links {
  margin-bottom: 30px;
}

.footer .footer-content .footer-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer .footer-content .footer-links ul i {
  padding-right: 2px;
  color: var(--color-white);
  font-size: 12px;
  line-height: 1;
}

.footer .footer-content .footer-links ul li {
  padding: 10px 0;
  display: flex;
  align-items: center;
}

.footer .footer-content .footer-links ul li:first-child {
  padding-top: 0;
}

.footer .footer-content .footer-links ul a {
  color: rgba(var(--color-white-rgb), 0.7);
  transition: 0.3s;
  display: inline-block;
  line-height: 1;
}

.footer .footer-content .footer-links ul a:hover {
  color: var(--color-white);
}

.footer .footer-content .footer-newsletter form {
  margin-top: 30px;
  background: var(--color-white);
  padding: 6px 10px;
  position: relative;
  border-radius: 4px;
}

.footer .footer-content .footer-newsletter form input[type=email] {
  border: 0;
  padding: 4px;
  width: calc(100% - 110px);
}

.footer .footer-content .footer-newsletter form input[type=email]:focus-visible {
  outline: none;
}

.footer .footer-content .footer-newsletter form input[type=submit] {
  position: absolute;
  top: 0;
  right: -2px;
  bottom: 0;
  border: 0;
  background: none;
  font-size: 16px;
  padding: 0 20px;
  background: var(--color-primary);
  color: var(--color-white);
  transition: 0.3s;
  border-radius: 0 4px 4px 0;
}

.footer .footer-content .footer-newsletter form input[type=submit]:hover {
  background: rgba(var(--color-primary-rgb), 0.85);
}

.footer .footer-legal {
  padding: 30px 0;
  background: var(--color-secondary-dark);
}

.footer .footer-legal .credits {
  padding-top: 4px;
  font-size: 13px;
  color: var(--color-white);
}

.footer .footer-legal .credits a {
  color: var(--color-primary-light);
}

.footer .footer-legal .social-links a {
  font-size: 18px;
  display: inline-block;
  background: rgba(var(--color-white-rgb), 0.1);
  color: var(--color-white);
  line-height: 1;
  padding: 8px 0;
  margin-right: 4px;
  border-radius: 4px;
  text-align: center;
  width: 36px;
  height: 36px;
  transition: 0.3s;
}

.footer .footer-legal .social-links a:hover {
  background: var(--color-primary);
  text-decoration: none;
}



/* Extra style */
@media (max-width: 767px) {
		
	.header .logo img {
		max-height: 40px;
		max-width: 25px;
		margin-right: 6px;
		margin-top:0;
	}
    .hidden-mobile {
        display: none;
    }
	.hero-static {
		padding: 100px 0 60px;
	}
}

/* New Added*/

.col-lg-8{
	text-align: justify;
}

.nav-link{
	color: #9A2507;
}	
.nav-pills .nav-link.active{
	background-color: #9A2507;
}

.redtext{
	color:red;
}

.hardcopy blockquote {
  overflow: hidden;
  background-color: rgba(var(--color-secondary-rgb), 0.06);
  padding: 20px;
  position: relative;  
  /*margin: 20px 0;*/
}

.hardcopy blockquote:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background-color: var(--color-secondary);
  margin-top: 20px;
  margin-bottom: 20px;
}

.editorialheader{
	color:#9A2507!important;
	margin-top: 0px!important;
	font-weight: 400!important;
	margin-bottom: 20px!important;
}
.editorialcontent{	
	font-style: normal!important;
	font-weight: 700!important;
	font-size: 1rem!important;
	color: var(--color-default)!important;
}

.list-group-item-light:hover{
	background:#efefef;
}

.sidebar_image{
	width:150px!important;
	margin:auto!important;
}

.conferencedata{
	font-style: normal!important;
	font-size: 1rem!important;
	color: var(--color-default)!important;
}

.themebutton{
	color: var(--color-secondary-light);
    font-size: 14px;
    padding: 6px 14px;
    margin: 0 6px 8px 0;
    border: 1px solid rgba(var(--color-secondary-light-rgb), 0.8);
    display: inline-block;
    transition: 0.3s;
}
.themebutton:hover{
	color: var(--color-white);
    border: 1px solid var(--color-primary);
    background: var(--color-primary);
}

.divtab{
	padding:10px;
	border:1px solid #F0703F;
}

.upiimg-fluid{
	max-width: 40%;
    height: auto;
    margin: auto;
}

.btn-general,
.btn-general:focus {
  font-size: 16px;
  color: var(--color-white);
  background: var(--color-primary);
  padding: 8px 23px;
  border-radius: 4px;
  transition: 0.3s;
  font-family: var(--font-default);
}

.btn-general:hover,
.btn-general:focus:hover {
  color: var(--color-white);
  background: rgba(var(--color-primary-rgb), 0.85);
}

.btn-outline-danger,
.btn-outline-danger:focus {
	font-size: 16px;
    color: var(--color-primary-dark);
    border: 1px solid var(--color-primary-dark);
    padding: 0.375rem 0.75rem;
    border-radius: 4px;
    transition: 0.3s;
    font-family: var(--font-default);
}

.btn-outline-danger:hover,
.btn-outline-danger:focus:hover {
	color: var(--color-white);
    background: rgba(var(--color-primary-dark-rgb), 0.85);
	border: 1px solid var(--color-primary-dark);
}

/* Activity */
.activity {
  font-size: 14px;
}

.activity .activity-item .activite-label {
  color: #888;
  position: relative;
  flex-shrink: 0;
  flex-grow: 0;
  min-width: 64px;
}

.activity .activity-item .activite-label::before {
  content: "";
  position: absolute;
  right: -11px;
  width: 4px;
  top: 0;
  bottom: 0;
  background-color: #FDEEE7;
}

.activity .activity-item .activity-badge {
  margin-top: 3px;
  z-index: 1;
  font-size: 18px;
  line-height: 0;
  border-radius: 50%;
  flex-shrink: 0;
  /*border: 3px solid #fff;*/
  flex-grow: 0;
}

.activity .activity-item .activity-content {
  padding-left: 10px;
  padding-bottom: 20px;
}

.activity .activity-item:first-child .activite-label::before {
  top: 5px;
}

.activity .activity-item:last-child .activity-content {
  padding-bottom: 0;
}

.blockquoterev {
  overflow: hidden;
  background-color: rgba(var(--color-secondary-rgb), 0.06);
  padding: 20px;
  position: relative;
  margin: 20px 0;
  color:green;
  font-weight:600;
}

/*--------------------------------------------------------------
# Header utility bar (.hb-top)
--------------------------------------------------------------*/
/* The strip above the logo: three icon buttons, a labelled Track button, and
   the two contact icons. Shared by header.php and headerviewpaperforall.php,
   which is why it lives here rather than inline in either of them.

   Detail text rides on data-hb-tip and is drawn with ::after; ::before is the
   arrow. No Bootstrap JS tooltip is initialised anywhere on this site, and
   `title` gives a slow, unstyled, uncontrollable box. Because both
   pseudo-elements are spoken for, nothing else in the bar may use them — the
   Track button's glow is a box-shadow animation for exactly that reason. */
.hb-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin: 0 0 3px;
    padding-top: 3px;

    /* The bar's own stacking context, so an open tooltip is guaranteed to
       paint over the logo (which is pulled up into this row by a -50px
       margin) and over the navbar and its dropdowns below it. 1050 sits
       above .header (997) and the dropdown panels (99), and deliberately
       BELOW the mobile off-canvas nav and its toggle (9997-9999) — those
       must still cover the bar when the mobile menu is open. */
    position: relative;
    z-index: 1050;
}

.hb-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-default);
    font-size: .8rem;
    font-weight: 600;
    color: var(--color-secondary);
}
.hb-tag i { font-size: .95rem; line-height: 1; }

.hb-divider {
    width: 1px;
    height: 15px;
    background: rgba(var(--color-basic-rgb), .22);
}

/* Icon-only buttons. 32px is the smallest square that still gives a
   comfortable click target once the 16px glyph is centred in it. */
/* All five behave identically — WhatsApp included, which is why it carries no
   special case any more and shows the bi-whatsapp glyph on the same chip as
   its neighbours. The brand logo lives on the floating button instead, where
   it is the only thing on screen and has room to be recognised.

   Auto width with a 32px floor, not a fixed 32px square: at rest the 16px
   glyph plus 8px either side lands back on 32px and reads as a circle, and
   the label then widens it. border-radius is a large px value rather than
   50%, because a percentage radius on a growing box reshapes the ends as it
   widens — a pill that stops being a circle mid-animation. */
.hb-ico {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border-radius: 50px;
    font-size: 1.02rem;
    color: var(--color-basic);
    background: rgba(var(--color-basic-rgb), .055);
    border: 1px solid rgba(var(--color-basic-rgb), .13);
    text-decoration: none;
    white-space: nowrap;
    transition: background .18s ease, color .18s ease, border-color .18s ease,
                transform .18s ease, box-shadow .18s ease;
}
.hb-ico i { line-height: 1; flex-shrink: 0; }

.hb-ico:hover, .hb-ico:focus-visible {
    background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
    border-color: transparent;
    color: var(--color-white);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(var(--color-primary-rgb), .26);
}

/* max-width, not width or display: the label has to animate from nothing, and
   neither auto widths nor display:none can be transitioned. 160px is simply a
   ceiling the longest of them ("Call for Paper") never reaches.

   It inherits colour from the chip, so it is teal at rest and white once the
   gradient comes in — but it is only ever visible in the second state. */
.hb-ico-label {
    max-width: 0;
    margin-left: 0;
    opacity: 0;
    overflow: hidden;
    font-family: var(--font-default);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .01em;
    transition: max-width .22s ease, margin-left .22s ease, opacity .18s ease;
}
.hb-ico:hover .hb-ico-label,
.hb-ico:focus-visible .hb-ico-label {
    max-width: 160px;
    margin-left: 7px;
    opacity: 1;
}

/* ── Track button ────────────────────────────────────────────────────────
   The only labelled item in the bar, so it carries the filled treatment: a
   solid gradient against the outlined icons, and a slow shadow ring that
   breathes once every 3s to pull the eye without moving anything on the
   page. */
.hb-track {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 15px 5px 13px;
    border-radius: 50px;
    background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
    border: 1px solid transparent;
    color: var(--color-white);
    font-family: var(--font-default);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1.35;
    white-space: nowrap;
    text-decoration: none;
    animation: hb-track-glow 3s ease-in-out infinite;
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.hb-track i { font-size: .95rem; line-height: 1; }

@keyframes hb-track-glow {
    0%, 100% { box-shadow: 0 3px 10px rgba(var(--color-primary-rgb), .30),
                           0 0 0 0 rgba(var(--color-primary-rgb), .22); }
    55%      { box-shadow: 0 3px 10px rgba(var(--color-primary-rgb), .30),
                           0 0 0 6px rgba(var(--color-primary-rgb), 0); }
}

/* animation: none, not animation-play-state — a paused animation still holds
   its computed box-shadow and would win over the hover declaration. */
.hb-track:hover, .hb-track:focus-visible {
    animation: none;
    color: var(--color-white);
    filter: brightness(1.07);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(var(--color-primary-rgb), .42);
}

.hb-ico:focus-visible, .hb-track:focus-visible {
    outline: 2px solid var(--color-primary-dark);
    outline-offset: 2px;
}

/* ── Tooltip ─────────────────────────────────────────────────────────────
   visibility (not display) alongside opacity so the box can transition and
   still be untouchable while hidden; pointer-events:none keeps it from
   stealing the hover from the button underneath it.

   z-index here is only a ranking WITHIN .hb-top's stacking context — the
   1050 above is what lifts the whole thing clear of the navbar. */
.hb-top [data-hb-tip]::after,
.hb-top [data-hb-tip]::before {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
    z-index: 20;
}
.hb-top [data-hb-tip]::after {
    content: attr(data-hb-tip);
    position: absolute;
    top: calc(100% + 11px);
    left: 50%;
    transform: translate(-50%, 5px);
    width: max-content;
    max-width: 290px;
    padding: 9px 12px;
    border-radius: 9px;
    background: var(--color-basic);
    color: var(--color-white);
    font-family: var(--font-default);
    font-size: .73rem;
    font-weight: 400;
    line-height: 1.55;
    letter-spacing: .01em;
    text-align: left;
    white-space: normal;
    box-shadow: 0 10px 26px rgba(var(--color-black-rgb), .22);
}
.hb-top [data-hb-tip]::before {
    content: '';
    position: absolute;
    top: calc(100% + 5px);
    left: 50%;
    transform: translate(-50%, 5px);
    border: 6px solid transparent;
    border-bottom-color: var(--color-basic);
}
/* The hovered item is raised above its neighbours so the tooltip cannot slide
   under the button sitting next to it. */
.hb-top [data-hb-tip]:hover,
.hb-top [data-hb-tip]:focus-visible { z-index: 10; }

.hb-top [data-hb-tip]:hover::after,
.hb-top [data-hb-tip]:focus-visible::after,
.hb-top [data-hb-tip]:hover::before,
.hb-top [data-hb-tip]:focus-visible::before {
    opacity: 1;
    visibility: visible;
}
.hb-top [data-hb-tip]:hover::after,
.hb-top [data-hb-tip]:focus-visible::after { transform: translate(-50%, 0); }
.hb-top [data-hb-tip]:hover::before,
.hb-top [data-hb-tip]:focus-visible::before { transform: translate(-50%, 0); }

/* The last two items sit at the right edge of a centred row, where a centred
   290px box would run past the container. Anchor those to their right edge
   and leave only the arrow centred on the icon. */
.hb-tip-end::after { left: auto; right: 0; transform: translate(0, 5px); }
.hb-tip-end:hover::after,
.hb-tip-end:focus-visible::after { transform: translate(0, 0); }

/* ── Mobile ──────────────────────────────────────────────────────────────
   1279.98px is where this header already switches over: the navbar becomes
   the off-canvas menu and .mobile-nav-toggle appears. The bar switches with
   it rather than at some breakpoint of its own, so the header has one mobile
   layout and not two overlapping ones.

   What goes: the tagline, which wrapped to two lines and pushed the whole
   header down, and the three .hb-ico-info buttons — Call for Paper, All
   Policy and Journal List all sit in the menu that the hamburger opens.
   What stays is what someone opens the site on a phone to do: check a paper,
   or reach the editors. Only the display changes — the tagline is still in
   the HTML for crawlers.

   Note this REPLACES the old behaviour, where .hidden-mobile removed the
   whole bar below 768px and phones got no Track or contact buttons at all.
   That class is gone from the three header files for this reason. */
@media (max-width: 1279.98px) {
    .hb-tag,
    .hb-divider,
    .hb-ico-info { display: none; }

    .hb-top {
        gap: 8px;
        margin: 0;
        padding-top: 0;
    }

    /* A 290px tooltip is wider than the gap to the screen edge on a small
       phone; this keeps it inside the viewport at any width. */
    .hb-top [data-hb-tip]::after { max-width: min(290px, calc(100vw - 34px)); }

    /* The logo is 80px tall pulled up 50px, which is deliberate on desktop —
       it overhangs the deep header. Below 1280px the header collapses to one
       short row, so the same overhang left the logo hanging out of the header
       and over the page content underneath (visible on tablet widths, where
       the 767px rule that zeroes this had not kicked in yet). */
    .header .logo img {
        max-height: 46px;
        margin-top: 0;
    }
}

/* min-width, never width — a fixed width here would pin the chips shut and
   leave the labels nowhere to expand into. */
@media (max-width: 991.98px) {
    .hb-ico { min-width: 30px; height: 30px; padding: 0 7px; font-size: .96rem; }
    .hb-ico-label { font-size: .76rem; }
    .hb-track { font-size: .76rem; padding: 4px 13px 4px 11px; }
    .hb-track i { font-size: .9rem; }
}

/* Restates the 40px the phone rule further up this file already sets, because
   the 1280px block above is later in the cascade and would otherwise raise it
   to 46px on phones too. */
@media (max-width: 767.98px) {
    .header .logo img { max-height: 40px; }
}

/* Under ~576px the header is logo + Submit Paper + toggle on one line with
   the reduced bar above it, and every px of height counts. */
@media (max-width: 575.98px) {
    .hb-top { gap: 7px; }
    .hb-ico { min-width: 28px; height: 28px; padding: 0 6px; font-size: .9rem; }
    .hb-ico-label { font-size: .72rem; }
    .hb-track { font-size: .72rem; padding: 4px 12px 4px 10px; letter-spacing: 0; }

    /* Submit Paper keeps a 50px right margin below 1280px to clear the fixed
       hamburger; at phone widths that plus the default padding crowds the
       logo off its line. */
    .header .btn-getstarted,
    .header .btn-getstarted:focus {
        font-size: 14px;
        padding: 7px 14px;
        margin-right: 44px;
    }
}

/*--------------------------------------------------------------
# Floating WhatsApp button (.wa-float)
--------------------------------------------------------------*/
/* The button pinned to the right edge of every page. Was `.feedback1` — a
   45px box holding a Bootstrap .btn-success with a bi-whatsapp glyph inside,
   wrapped in an <a>, which meant a <button> nested inside a link: two
   interactive elements claiming the same click, and a name ("feedback") that
   described nothing about it.

   Now the anchor IS the button, carrying the real brand logo and a wordmark
   that opens on hover. `right` is pinned, so the pill grows leftwards into
   the page instead of off the edge of the screen — the reason the label can
   expand at all in a fixed, right-anchored element. */
.wa-float {
    /* right:0 / bottom:20% are .feedback1's exact coordinates — flush to the
       edge, above the sticky publish bar. Kept to the pixel so the button does
       not appear to move. */
    position: fixed;
    right: 0;
    bottom: 20%;
    z-index: 999;
    display: flex;
    align-items: center;
    padding: 7px;
    border-radius: 50px;
    background: var(--color-white);
    border: 1px solid rgba(var(--color-whatsapp-rgb), .28);
    box-shadow: 0 6px 20px rgba(var(--color-black-rgb), .16);
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.wa-float:hover, .wa-float:focus-visible {
    transform: translateY(-2px);
    border-color: rgba(var(--color-whatsapp-rgb), .55);
    box-shadow: 0 10px 26px rgba(var(--color-whatsapp-rgb), .34);
}
.wa-float:focus-visible {
    outline: 2px solid var(--color-whatsapp-text);
    outline-offset: 3px;
}

.wa-float-logo {
    width: 38px;
    height: 38px;
    display: block;
    flex-shrink: 0;
}

/* max-width, not width or display — neither auto widths nor display:none can
   be transitioned. 150px is a ceiling the word never reaches. */
.wa-float-label {
    max-width: 0;
    margin-left: 0;
    opacity: 0;
    overflow: hidden;
    white-space: nowrap;
    font-family: var(--font-default);
    font-size: .92rem;
    font-weight: 700;
    letter-spacing: .01em;
    color: var(--color-whatsapp-text);
    transition: max-width .24s ease, margin-left .24s ease, opacity .2s ease;
}
.wa-float:hover .wa-float-label,
.wa-float:focus-visible .wa-float-label {
    max-width: 150px;
    margin-left: 10px;
    margin-right: 6px;
    opacity: 1;
}

/* Phones have no hover, so the label can never open there — the logo alone
   carries it, and the button shrinks to stay out of the thumb's way. */
@media (max-width: 767.98px) {
    .wa-float { right: 10px; bottom: 22%; padding: 6px; }
    .wa-float-logo { width: 32px; height: 32px; }
}

@media (prefers-reduced-motion: reduce) {
    .wa-float, .wa-float-label { transition: none; }
    .wa-float:hover { transform: none; }

    .hb-ico, .hb-track, .hb-ico-label,
    .hb-top [data-hb-tip]::after,
    .hb-top [data-hb-tip]::before { transition: none; }
    .hb-track { animation: none; box-shadow: 0 3px 10px rgba(var(--color-primary-rgb), .30); }
    .hb-ico:hover, .hb-track:hover { transform: none; }
    .hb-top [data-hb-tip]::after { transform: translate(-50%, 0); }
    .hb-top [data-hb-tip]::before { transform: translate(-50%, 0); }
    .hb-tip-end::after { transform: translate(0, 0); }
}
/*--------------------------------------------------------------
# Large screens — keep the two header rows on ONE measure
--------------------------------------------------------------*/
/* #header renders two rows inside DIFFERENT wrappers, and both header files
   (header.php and headerviewpaperforall.php) share the markup:

     row 1, the utility bar  ->  .container        Bootstrap-capped: 1140px,
                                                   then 1320px from 1400px up
     row 2, logo + nav + CTA ->  .container-fluid  100%, never capped

   Up to ~1400px the difference reads as a deliberately full-width nav and is
   left alone. Past it the gap stops being stylistic and becomes structural: on
   a 1920px display the utility bar's first item starts around x=300 while the
   logo directly beneath it starts around x=12, and at 2560px that offset is
   roughly 600px — the two halves of one header visibly belong to different
   layouts, with the logo and Submit Paper button drifting toward the bezels
   while everything else on the page stays in a 1320px column.

   Capping the fluid row to the SAME 1320px measure from 1400px up puts the
   logo under the bar's left edge and the CTA under its right, so the header
   agrees with the body content below it.

   Deliberately min-width:1400px and nothing else. That is exactly where
   Bootstrap's own xxl tier starts and where this stylesheet previously had no
   rule at all (its last breakpoint was 1365px), so every phone, tablet and
   laptop renders byte-for-byte as before — this can only affect displays that
   were previously unhandled. */
@media (min-width: 1400px) {
  #header > .container-fluid {
    max-width: 1320px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* == Rosette motion: honour prefers-reduced-motion =========================
   The guilloche mark now turns on hover in eight places across the site
   (.pg-hero on ~50 pages, the editorial board banner, the issue covers, the
   two credential cards and four blue bars on the homepage, the article
   badge and the article header). Every one of those is decoration.

   Listed here rather than in each page because main.css is the one file all
   of them already load, so the opt-out cannot be forgotten when the next
   rosette is added. transform:none is safe on all of them - none has a base
   transform, only a hover one. rosette motion, reduced
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
    .pg-hero::before,
    .eb-hero::before,
    .arc-cover-rings,
    .ih-ornament,
    .ih-bar-art,
    .ih-ql-rosettes,
    .vp-badge__glow,
    .vf-arthead-art::before {
        transition: none !important;
        transform: none !important;
    }
}
/*--------------------------------------------------------------
# Header & navigation refinements (site-wide)
--------------------------------------------------------------*/
/* Appended rather than edited in place so the original rules above stay
   readable as the baseline; everything here overrides by source order at
   the same specificity, and nothing here changes markup or behaviour.

   - Submit Paper in the action red, the same colour and geometry as every
     "submit" button on the homepage, so the header CTA is recognisably the
     same action wherever it appears.
   - Desktop items one step tighter (15px / 600, 14px side padding). At
     1280-1366px the 16px/20px set only just fitted, and the thin 400 weight
     at 70% slate read washed out next to the logo.
   - Dropdown panels get even 8px inner padding and 9px rows.
   - Mobile: the off-canvas menu was 90% slate — not a brand colour anywhere
     else on the site. Now the brand deep blue, capped at 340px wide, with
     separated rows, indented submenus and a proper square toggle button. */
.header .btn-getstarted,
.header .btn-getstarted:focus {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .01em;
  color: var(--color-white);
  background: var(--color-red);
  padding: 10px 22px;
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 14px rgba(var(--color-red-rgb), .24);
  transition: background-color .18s, transform .18s, box-shadow .18s;
  white-space: nowrap;
}
.header .btn-getstarted:hover,
.header .btn-getstarted:focus:hover {
  color: var(--color-white);
  background: #b71220;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(var(--color-red-rgb), .3);
}
.header .btn-getstarted:focus-visible {
  outline: 3px solid rgba(var(--color-red-rgb), .35);
  outline-offset: 2px;
}

@media (min-width: 1280px) {
  .navbar > ul { gap: 2px; }

  .navbar a,
  .navbar a:focus {
    padding: 12px 14px;
    font-size: 15px;
    font-weight: 600;
    color: rgba(var(--color-secondary-dark-rgb), .92);
  }
  .navbar > ul > li > a { border-radius: 7px 7px 0 0; }
  .navbar a i,
  .navbar a:focus i { font-size: 11px; margin-left: 4px; }
  .navbar > ul > li > a > span > i.bi-house { font-size: 14px; margin: 0 3px 0 0; line-height: 1; }

  .navbar a:hover,
  .navbar li:hover > a { color: var(--color-primary); }

  .navbar .dropdown ul { padding: 8px; min-width: 250px; }
  .navbar .dropdown ul li { min-width: 0; }
  .navbar .dropdown ul a {
    padding: 9px 14px;
    font-size: 14.5px;
    font-weight: 500;
    border-radius: 6px;
  }
  .navbar .dropdown ul a:hover,
  .navbar .dropdown ul li:hover > a { padding-left: 18px; }
  .navbar .megamenu ul { padding: 12px; gap: 12px; }
  .navbar .megamenu ul li + li { padding-left: 12px; }
}

@media (max-width: 1279px) {
  .navbar { width: min(340px, calc(100% - 64px)); }
  /* #navbar's desktop -10px nudge also slid the off-canvas panel 10px off-screen. */
  #navbar { margin-left: 0; }
  /* .color-basic is an !important utility: dark blue on the dark panel. */
  .navbar a .color-basic { color: currentColor !important; }

  .navbar ul {
    padding: 12px 0 24px;
    background: var(--color-primary-deep);
    box-shadow: 8px 0 30px rgba(0, 0, 0, .25);
  }
  .navbar > ul > li { border-bottom: 1px solid rgba(255, 255, 255, .08); }

  .navbar a,
  .navbar a:focus {
    padding: 13px 22px;
    font-size: 15px;
    font-weight: 600;
    color: rgba(var(--color-white-rgb), .9);
  }
  .navbar a:hover,
  .navbar li:hover > a { color: var(--color-white); background: rgba(255, 255, 255, .05); }
  .navbar a i,
  .navbar a:focus i { font-size: 13px; }

  .navbar .dropdown ul,
  .navbar .dropdown .dropdown ul {
    margin: 0 14px 12px 22px;
    padding: 4px 0;
    border: 0;
    border-left: 2px solid var(--color-primary-accent);
    border-radius: 0 8px 8px 0;
    background: rgba(255, 255, 255, .05);
  }
  .navbar .dropdown ul a,
  .navbar .dropdown ul a:focus {
    padding: 9px 16px;
    font-size: 14px;
    font-weight: 500;
    white-space: normal;
    color: rgba(var(--color-white-rgb), .85);
  }

  .mobile-nav-toggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    font-size: 26px;
    color: var(--color-primary-dark);
    background: var(--color-white);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-xs);
    right: 14px;
  }
  .mobile-nav-toggle.bi-x {
    color: var(--color-white);
    background: var(--color-primary-deep);
    border-color: rgba(255, 255, 255, .25);
  }
  .mobile-nav-active .navbar:before { background: rgba(var(--color-primary-deep-rgb), .55); }
}
@media (max-width: 575.98px) {
  .header .btn-getstarted,
  .header .btn-getstarted:focus {
    font-size: 14px;
    padding: 8px 14px;
    margin-right: 50px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .header .btn-getstarted:hover { transform: none; }
}
/* == Header layout: logo spanning both rows ================================
   The header is two rows in two wrappers — the utility bar (.container) and
   logo + nav + Submit Paper (.container-fluid). The logo used to sit in the
   second row only, which left a dead gap above it beside the bar, and at
   1280-1399px the two rows did not even share a right edge (the bar row is a
   1140px .container, the nav row is full width).

   Now, at every width:
   - the logo is taken out of the row and pinned to the header's left edge,
     vertically centred on the WHOLE header, so it spans both rows;
   - both rows reserve that space on the left (--logo-slot) and align to the
     same right edge, so the utility bar sits directly above Submit Paper;
   - below 1280px the fixed hamburger is centred on the Submit Paper row
     instead of straddling the two rows at top:20px.

   #header is position:fixed, so it is the containing block for the logo.
   From 1400px the rows are capped at 1320px and centred (see the block
   further up), and the logo's `left` follows that same measure.

   The file is 320x197 — at the largest size (76px) it still has 2.6x the
   pixels it needs, so it stays sharp on retina screens. */
#header {
  --logo-h: 64px;                                   /* phones */
  --logo-w: calc(var(--logo-h) * 1.624);            /* 320 / 197 */
  --logo-x: calc(var(--bs-gutter-x, 1.5rem) * .5);
  --logo-slot: calc(var(--logo-x) + var(--logo-w) + 14px);
}
.header .logo {
  position: absolute;
  left: var(--logo-x);
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  margin: 0 !important;                              /* .me-auto on the markup */
}
.header .logo img {
  height: var(--logo-h);
  max-height: none;
  width: auto;
  max-width: none;
  margin: 0;
}
#header > .container,
#header > .container-fluid {
  max-width: none;
  padding-left: var(--logo-slot);
  padding-right: var(--logo-x);
}

/* Below 1280px: bar icons on the right over Submit Paper + hamburger. */
@media (max-width: 1279.98px) {
  #header > .container { align-items: flex-end !important; }
  .hb-top { justify-content: flex-end; }
  #header > .container-fluid { justify-content: flex-end !important; min-height: 44px; }
  .header .btn-getstarted,
  .header .btn-getstarted:focus { margin-right: 52px; }
  /* Centred on the Submit Paper row: header padding (5) + bar + half the row,
     minus half the 40px button. */
  .mobile-nav-toggle { top: 35px; right: var(--logo-x); }
}
@media (min-width: 576px) and (max-width: 1279.98px) {
  #header { --logo-h: 70px; }
  #header > .container-fluid { min-height: 48px; }
  .mobile-nav-toggle { top: 39px; }
}
@media (min-width: 992px) and (max-width: 1279.98px) {
  .mobile-nav-toggle { top: 41px; }
}

/* Desktop: bar and nav both right-aligned to the Submit Paper edge. */
@media (min-width: 1280px) {
  #header { --logo-h: 72px; }
  #header > .container { align-items: flex-end !important; }
  .hb-top { justify-content: flex-end; }
  #navbar { margin-left: 0; }
  #header > .container-fluid { gap: 12px; }
}
@media (min-width: 1400px) {
  #header { --logo-h: 76px; --logo-x: calc((100% - 1320px) / 2 + var(--bs-gutter-x, 1.5rem) * .5); }
  #header > .container,
  #header > .container-fluid {
    max-width: 1320px;
    margin-left: auto;
    margin-right: auto;
    padding-left: calc(var(--logo-w) + 26px);
    padding-right: calc(var(--bs-gutter-x, 1.5rem) * .5);
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   SVG ICONS  (markup generated by _icons.php -> bi() / bi_swap())
   ══════════════════════════════════════════════════════════════════════════
   The header's icons are inline SVG instead of Bootstrap Icons webfont glyphs.
   They keep the original `class="bi bi-name"` so every existing selector
   (.navbar a i, .hb-ico i, .mobile-nav-toggle, …) still matches; `bi-svg` is
   the extra hook these four rules need.

   The ::before kill is not optional. bootstrap-icons.css still loads for the
   pages that have not been converted, and its
   `[class*=" bi-"]::before { content: "\f425" }` would paint the font glyph
   behind the SVG — two icons in one box.

   This block sits at the END of main.css on purpose: main.css is linked after
   bootstrap-icons.css, so these rules win on order without needing !important
   anywhere except where the vendor file already used it. */
.bi-svg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    flex-shrink: 0;
    /* the same optical baseline nudge bootstrap-icons.css puts on ::before, so
       icons sitting in a line of text do not move by a fraction of an em */
    vertical-align: -.125em;
}
.bi-svg::before {
    content: none !important;
    display: none !important;
}
.bi-svg > svg {
    display: block;
    width: 1em;
    height: 1em;
    fill: currentColor;
}

/* main.js toggles .bi-chevron-down <-> .bi-chevron-up on the dropdown arrows.
   chevron-up is chevron-down mirrored, and the glyph is symmetric left to
   right, so a half turn draws exactly the other icon — one path instead of
   two, and the JS keeps working untouched. */
.bi-svg.bi-chevron-up > svg {
    transform: rotate(180deg);
}

/* Same idea for the mobile menu button, where main.js toggles
   .bi-list <-> .bi-x. Those two are different shapes, so bi_swap() emits both
   and this decides which one is visible. */
.bi-swap > .bi-swap-b { display: none; }
.bi-swap.bi-x > .bi-swap-a { display: none; }
.bi-swap.bi-x > .bi-swap-b { display: block; }


/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE HARDENING
   ══════════════════════════════════════════════════════════════════════════
   A safety net for content that can be wider than a phone. Every one of these
   is scoped to page content, never the header or nav, so nothing that is
   already laid out deliberately is touched.

   Measured first: at 320/360/375/390/412/430/576/768/820/992/1024/1200/1366/
   1440/1536/1920 the sampled pages already report 0px of document overflow,
   and the table-heavy pages (bookpub, similarity-check) scroll inside their
   own .*-table-wrap. This block is for the pages that have no wrapper — a
   table with more columns than the screen should scroll in its own box rather
   than make the whole document scroll sideways. */

/* Media can never be wider than its column.

   :where() on purpose. `#main img` would score 1-0-1 and quietly beat every
   deliberate rule a page writes — `.bpa-img-frame img { max-width: 55% }`
   measured 361px wide before this block and 656px after, which is the whole
   reason this is wrapped. Inside :where() the whole selector scores 0-0-1, so
   any page rule still wins and this only catches media nobody sized. */
:where(#main) :where(img, video, iframe, embed, object) {
    max-width: 100%;
}
:where(#main) :where(img) { height: auto; }

/* A long DOI, URL or identifier is one unbreakable token; without this it
   pushes its container past the viewport on a narrow screen. anywhere (not
   break-all) so ordinary words still wrap on spaces. */
:where(#main) :where(p, li, dd, td, th, figcaption, blockquote) {
    overflow-wrap: anywhere;
}

/* Tables that are NOT already inside a scrolling wrapper. Where a wrapper
   exists it scrolls first and this changes nothing visible. */
@media (max-width: 767px) {
    :where(#main) :where(table) {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* Decorative motion off for anyone who asked for less of it. Transform and
   opacity only — nothing here changes layout, so no CLS either way. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}


/* ══════════════════════════════════════════════════════════════════════════
   KEYBOARD FOCUS ON THE SHELL  (2026-10-17, additive)
   ══════════════════════════════════════════════════════════════════════════
   Shared by header.php and headerviewpaperforall.php, which is why it lives
   here and not in either file. The utility bar (.hb-ico / .hb-track), the
   Submit button and the WhatsApp float already had rings; the logo link, the
   top-level nav items, the mobile menu button and the back-to-top button did
   not — tabbing through the header gave no visible position for four stops.
   :focus-visible only, so a mouse click never draws them. New selectors only;
   nothing above is redefined. */
.header .logo:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 4px;
    border-radius: 8px;
}
.navbar > ul > li > a:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: -3px;
    border-radius: 8px;
}
.mobile-nav-toggle:focus-visible {
    outline: 3px solid var(--color-primary-deep);
    outline-offset: 2px;
}
.scroll-top:focus-visible {
    outline: 3px solid var(--color-primary-deep);
    outline-offset: 3px;
}