/*-------------------------------------    
CSS INDEX
===================================
#. update css
---------------------------------------*/

@media only screen and (max-width: 767px) {
  .media.rtin-dark.rtin-style7{
    display: block;
    text-align: center;
    margin-bottom: 24px;
  }
}


@media only screen and (max-width: 1600px) {
  .video-layout7.rtin-layout5 .play-btn-7 {  
      margin-left: 111px;
  }
  
}

@media only screen and (max-width: 991px) {
  .video-layout7.rtin-layout5 .play-btn-7 {  
      margin-left: 64px;
  }
}

@media only screen and (max-width: 767px) {
  .video-layout7.rtin-layout5 .play-btn-7 {  
      margin-left: 0;
  }
}

@media only screen and (max-width: 1024px) {
  .rt-el-info-box.rtin-style7.rtin-dark .rtin-icon {
      margin-right: 20px; 
  }
}

@media only screen and (max-width: 767px) {
  .rt-el-info-box.rtin-style7.rtin-dark .rtin-icon {
      margin-bottom: 20px; 
  }
}

.logo-grid-new .rtin-item.sponsonrs-box {
    text-align: center;
}

.footer-layout4 .footer-top-area .widget .subscribe-layout1 .subscribe-input-area .form-control::placeholder {
  color: #b3b3b3;
  opacity: 1; /* Firefox */
}

.footer-layout4 .footer-top-area .widget .subscribe-layout1 .subscribe-input-area .form-control:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: #b3b3b3;
}

.footer-layout4 .footer-top-area .widget .subscribe-layout1 .subscribe-input-area .form-control::-ms-input-placeholder { /* Microsoft Edge */
color: #b3b3b3;
}

.footer-layout2 .footer-top-area .widget .subscribe-layout1 .subscribe-input-area .form-control::placeholder {
  color: #b3b3b3;
  opacity: 1; /* Firefox */
}

.footer-layout2 .footer-top-area .widget .subscribe-layout1 .subscribe-input-area .form-control:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: #b3b3b3;
}

.footer-layout2 .footer-top-area .widget .subscribe-layout1 .subscribe-input-area .form-control::-ms-input-placeholder { /* Microsoft Edge */
color: #b3b3b3;
}


.schedule-wrapper-9 .btn-ghost-sm.border-radius-5,
.btn-gradient{
        flex: 1 1 auto;
        border: none;
        color: #fff !important;
        border-radius: 3px;
        padding: 16px 22px;
        -webkit-box-shadow: 11px 0px 24px rgba(0, 0, 0, 0.2);
        -moz-box-shadow:11px 0px 24px rgba(0, 0, 0, 0.2);
        box-shadow:11px 0px 24px rgba(0, 0, 0, 0.2);
        transition: 0.5s;
        background: linear-gradient(90deg, var(--c1, #ec407a), var(--c2, #401a85) 51%, var(--c1, #ec407a)) var(--x, 0)/ 200%;   
       
    }
    .schedule-wrapper-9 .btn-ghost-sm.border-radius-5:hover,
    .btn-gradient:hover { --x: 100%; }
    .btn-ghost-sm.border-radius-5,
    .btn-gradient{
        --c1: #401a85;
        --c2: #ec407a;
    }

    
  .btn-gradient{
    padding: 20px 30px;
    font-size: 16px;
  }

.speaker-layout2 .item-title h3 {
   margin-bottom: 0;
}
.speaker-layout2:hover .item-title {  
  top: 62%; 
}
.sponsonrs-layout1 .sponsonrs-box.grey-scale-off a img {	
	 -webkit-filter: grayscale(0);	
}
.sponsonrs-layout1 .sponsonrs-box.grey-scale-off a:hover img{
	-webkit-filter: grayscale(100%); 
	filter: grayscale(100%); 
}

.sponsonrs-layout1-grid .sponsonrs-box.grey-scale-on a img {	
	-webkit-filter: grayscale(100%); 
	filter: grayscale(100%);  
}
.sponsonrs-layout1-grid .sponsonrs-box.grey-scale-on a:hover img {	
	 -webkit-filter: grayscale(0);	  
}

.sponsonrs-layout1 .sponsonrs-box.grey-scale-on a img {  
  -webkit-filter: grayscale(100%); 
  filter: grayscale(100%);  
}
.sponsonrs-layout1 .sponsonrs-box.grey-scale-on a:hover img { 
   -webkit-filter: grayscale(0);    
}

.schedule-layout3.schedule-layout6-new .schedule-nav li a .day-number {
	font-size: 24px;	
}
.schedule-layout3.schedule-layout5-new .schedule-nav li a .day-number {
	font-size: 24px;	
}

@media only screen and (max-width: 1100px) {
	.mobile-stick {
		padding-top:50px
	}
 	.mobile-stick .mean-container{
		position: fixed;
		top:0;
		width: 100%;
		z-index: 999;
	}
}


.nav-control-layout2.owl-theme {
  overflow: hidden;
}
.nav-control-layout2.owl-theme .owl-nav {
  margin-top: 0;
}
.nav-control-layout2.owl-theme .owl-nav > div {
  opacity: 0;
  visibility: hidden;
  font-size: 24px;
  color: #111;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  justify-content: center;
  height: 52px;
  width: 52px;
  border-radius: 50%;
  background: #ffffff;
  position: absolute;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  top: 50%;
  margin: 0;
  padding: 0;
  -webkit-transition: all 0.5s ease-out;
  -moz-transition: all 0.5s ease-out;
  -ms-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
}
@media only screen and (max-width: 991px) {
  .nav-control-layout2.owl-theme .owl-nav > div {
    height: 48px;
    width: 48px;
    font-size: 22px;
  }
}
@media only screen and (max-width: 767px) {
  .nav-control-layout2.owl-theme .owl-nav > div {
    height: 42px;
    width: 42px;
    font-size: 20px;
  }
}
@media only screen and (max-width: 575px) {
  .nav-control-layout2.owl-theme .owl-nav > div {
    height: 38px;
    width: 38px;
    font-size: 18px;
  }
}
.nav-control-layout2.owl-theme .owl-prev:hover {
  background: #111 !important;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -ms-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
.nav-control-layout2.owl-theme .owl-prev:hover i {
  color: #ffffff;
}
.nav-control-layout2.owl-theme .owl-next:hover {
  background: #111 !important;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -ms-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
.nav-control-layout2.owl-theme .owl-next:hover i {
  color: #ffffff;
}
.nav-control-layout2.owl-theme .owl-prev {
  
  left: 0;
}
.nav-control-layout2.owl-theme .owl-next { 
  right: 0;
}
.nav-control-layout2.owl-theme:hover .owl-prev {
  opacity: 1;
  visibility: visible;
  left: 0;
}
.nav-control-layout2.owl-theme:hover .owl-next {
  opacity: 1;
  visibility: visible;
  right: 0;
}
.header-action-items.mobile-button-area {
  display: none;
}
@media only screen and (max-width: 1100px) {
  .header-action-items.mobile-button-area {
    display: block;
    position: absolute;
    z-index: 9999999;
    left: 0;
    right: 0;
    margin: auto;
    text-align: center;
    top: 8px;
     max-width: 200px;
  }
  .header-action-items.mobile-button-area .btn-fill.color-yellow {
    padding: 9px 26px;
  }
  .admin-bar .header-action-items.mobile-button-area {
	  top: 38px;
  }
}
@media only screen and (max-width: 782px) {
	.admin-bar .header-action-items.mobile-button-area {
	  top: 52px;
  }
}
.mean-container a.meanmenu-reveal, .mean-container .mean-nav ul li a.mean-expand:hover{
  color: #000;
}

.mean-container a.meanmenu-reveal{
  transition: none;
}
.mean-container a.meanmenu-reveal span {
display: block;
background-color: #101010;
height: 3px;
margin-top: 3px;
position: relative;
}
.mean-container a.meanmenu-reveal span:before {
position: absolute;
   content: "";
   display: block;
   left: 0;
   top: 6px;
   width: 100%;
   background: #101010;
   height: 3px;
}
.mean-container a.meanmenu-reveal span:after {
position: absolute;
   content: "";
   display: block;
   left: 0;
   top: 12px;
   width: 100%;
   background: #101010;
   height: 3px;
}

.site-wrp .speaker-layout1.text-center h3.size-md {
    margin-bottom: 8px;
}

/*-------------------------------------
#. IRTESH brand customization
---------------------------------------*/

/* Text wordmark used in place of the logo images */
.brand-text {
  display: inline-block;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 34px;
  line-height: 1;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* Header: dark wordmark on light/sticky header, white on transparent header over hero */
.site-branding .brand-text-dark {
  color: #0929ca;
}
.site-branding .brand-text-light {
  color: #ffffff;
}

/* Mobile mean-bar wordmark */
.mean-bar .brand-text.logo-small {
  font-size: 26px;
  color: #0929ca;
}

/* About section wordmark (dark text on light background) */
.about-layout1 .brand-text-about {
  font-size: 46px;
  letter-spacing: 3px;
  color: #101010;
  margin-bottom: 10px;
}

/* Footer wordmark (light on dark footer) */
.footer-logo .brand-text-footer {
  font-size: 30px;
  color: #ffffff;
}

/* Contrast fix: countdown bar now uses the dark secondary (#101010) as its
   background, so its numbers (h2) and labels (h3) must be light to stay legible.
   The plugin renders: <div class="countdown-section"><h2>%D</h2><h3>Days</h3></div> */
.countdown-layout1 .event-countdown .countdown-section h2,
.countdown-layout1 .event-countdown .countdown-section h3 {
  color: #ffffff !important;
}
/* separators between the number blocks */
.countdown-layout1 .event-countdown .countdown-section:after {
  color: #ffffff !important;
}

/*-------------------------------------
#. Font Awesome 7 compatibility bridge
---------------------------------------*/

/* The theme's own CSS injects pseudo-element icons using the legacy
   `font-family: FontAwesome` with FA glyph codes (e.g. content:"\f105").
   Font Awesome 7 renamed its font to "Font Awesome 7 Free", so we alias the
   old family name to the FA7 solid webfont (weight 900) served from the CDN. */
@font-face {
  font-family: "FontAwesome";
  font-style: normal;
  font-weight: 900;
  font-display: block;
  src: local("Font Awesome 7 Free"),
       url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/webfonts/fa-solid-900.woff2") format("woff2");
}

/* Ensure any element still asking for the legacy FontAwesome family renders
   the solid weight FA7 needs (otherwise glyphs fall back to blank boxes). */
[style*="FontAwesome"]:before,
.fa[data-icon]:before {
  font-weight: 900;
}

/*-------------------------------------
#. Button legibility on dark secondary
---------------------------------------*/

/* The secondary color is now near-black (#101010). The theme's "yellow" buttons
   (.btn-fill.color-yellow) fill with the secondary and kept dark #282828 text,
   which made the label invisible (dark-on-dark). Force white text so these
   buttons are readable in both their default and hover states. */
.site-wrp .btn-fill.color-yellow,
.site-wrp .btn-fill.color-yellow:hover,
.site-wrp .btn-fill.color-yellow:focus {
  color: #ffffff;
}

/* Ghost/"gust" variant hover: the theme turned it transparent with near-black
   text, which disappears on dark sections. Give it a solid blue fill + white
   text on hover so it stays visible everywhere. (body prefix raises specificity
   above the inline dynamic-CSS rule that loads after this stylesheet.) */
body .site-wrp .btn-fill.color-yellow.gust:hover,
body .site-wrp .btn-fill.color-yellow.gust:focus {
  border-color: #0929ca;
  background-color: #0929ca;
  color: #ffffff;
}

/*-------------------------------------
#. Hero slider (LayerSlider) nav arrows
---------------------------------------*/

/* The prev/next arrows sit over the dark hero image. The recolor turned them
   near-black (#101010) — invisible against the dark background. Make them white
   so they're visible, filling white with a dark glyph on hover. The inline
   dynamic CSS uses !important and loads after this file, so we match it with
   !important + a `body` prefix for higher specificity. */
body .site-wrp .ls-v6 .ls-nav-prev,
body .site-wrp .ls-v6 .ls-nav-next {
  border: 2px solid #ffffff !important;
}
body .site-wrp .ls-v6 .ls-nav-prev:after,
body .site-wrp .ls-v6 .ls-nav-next:after {
  color: #ffffff !important;
  border-top-color: #ffffff !important;
}
body .site-wrp .ls-v6 .ls-nav-next:after {
  border-right-color: #ffffff !important;
}
body .site-wrp .ls-v6 .ls-nav-prev:after {
  border-left-color: #ffffff !important;
}
/* Hover: fill white, arrow turns dark so it reads on the white fill */
body .site-wrp .ls-v6 .ls-nav-prev:hover,
body .site-wrp .ls-v6 .ls-nav-next:hover {
  border: 2px solid #ffffff !important;
  background-color: #ffffff !important;
}
body .site-wrp .ls-v6 .ls-nav-prev:hover:after,
body .site-wrp .ls-v6 .ls-nav-next:hover:after {
  color: #101010 !important;
  border-top-color: #101010 !important;
}
body .site-wrp .ls-v6 .ls-nav-next:hover:after {
  border-right-color: #101010 !important;
}
body .site-wrp .ls-v6 .ls-nav-prev:hover:after {
  border-left-color: #101010 !important;
}

/*-------------------------------------
#. Navbar active / hover link styling
---------------------------------------*/

/* The recolor made the active & hovered nav links near-black (#101010), which
   is invisible on the transparent header over the dark hero and looks dull.
   Make them the brand blue (#0929ca) with a blue animated underline, so the
   active page and hovered links read as a clear, branded accent on both the
   dark (transparent) header and the white sticky header.
   `body` prefix beats the inline dynamic CSS that loads after this file. */

/* Link text on the SOLID (sticky/white) header: active/current/hover -> brand
   blue, which pops against white. */
body .site-header .main-navigation ul.menu > li > a:hover,
body .site-header .main-navigation ul.menu > li.current-menu-item > a,
body .site-header .main-navigation ul.menu > li.current > a {
  color: #0929ca;
}

/* On the TRANSPARENT header over the dark hero, dark-blue text would be hard to
   read, so keep the active/hover link white; the blue underline (below) is the
   accent that marks it instead. (trheader / non-stick are classes ON <body>,
   so they attach directly to the body selector with no descendant space.) */
body.trheader.non-stick .site-header .main-navigation ul.menu > li > a:hover,
body.trheader.non-stick .site-header .main-navigation ul.menu > li.current-menu-item > a,
body.trheader.non-stick .site-header .main-navigation ul.menu > li.current > a {
  color: #ffffff;
}

/* Animated underline -> brand blue (inline CSS had turned it black) */
body .site-header .main-navigation > nav > ul > li > a:after {
  background-color: #0929ca;
}

/* Creative touch: keep the underline visible under the ACTIVE page too,
   not just on hover, so the current section stays highlighted. */
body .site-header .main-navigation > nav > ul > li.current-menu-item > a:after,
body .site-header .main-navigation > nav > ul > li.current > a:after {
  opacity: 1;
  visibility: visible;
  transform: translateX(35px);
}

/*-------------------------------------
#. Hero overlay: soft gradient fade
---------------------------------------*/

/* The hero's blue overlay used to be a skewed diagonal slant
   (transform: skew(-205deg)) plus a raster overlayer.png image. The image is
   removed from the markup; here we drop the skew transform and replace the hard
   shape with a single SOFT GRADIENT FADE — solid brand blue on the left melting
   smoothly to transparent toward the right, so the slide text sits on a legible
   blue field that dissolves into the photo. Only the front .skew layer paints
   the gradient; the two extra layers are hidden so they don't add hard bands.
   !important overrides the theme's .skew transform and the inline dynamic bg. */
body .site-wrp .skew,
body .site-wrp .skew_2,
body .site-wrp .skew_3 {
  transform: none !important;   /* kill the old skew slant */
  color: transparent;           /* the literal "test" text stays hidden */
  -webkit-clip-path: none !important;
          clip-path: none !important;
}

/* Extra layers hidden — the gradient is a single smooth wash on the front layer */
body .site-wrp .skew_2,
body .site-wrp .skew_3 {
  background: transparent !important;
}

/* Front layer — the soft blue-to-transparent fade (left → right) */
body .site-wrp .skew {
  background: linear-gradient(
      to right,
      rgba(9, 41, 202, 0.92) 0%,
      rgba(9, 41, 202, 0.80) 30%,
      rgba(9, 41, 202, 0.45) 60%,
      rgba(9, 41, 202, 0) 90%
  ) !important;
}

/*-------------------------------------
#. Full-width main content
---------------------------------------*/

/* The theme wrapped page content in a Bootstrap .container (max-width 1140px),
   boxing every section. The markup now uses .container-fluid + .row.no-gutters
   for full width. Bootstrap's .container-fluid still keeps 15px side padding,
   which the no-gutters row no longer cancels — leaving a thin gap at the edges.
   Zero that padding so the content (and the stretched Elementor sections) span
   truly edge-to-edge. */
.content-area > .container-fluid {
  padding-left: 0;
  padding-right: 0;
}

/* Section CONTENT is centered while section BACKGROUNDS stay full-bleed.
   Backgrounds live on the full-width .section; the content lives inside
   .container-inner, so we center that container with a max-width + auto margins.
   This applies to ALL sections (including section-full ones like the schedule &
   sponsors) so every section's content sits in a centered column on wide screens
   instead of stretching to the edges. */
.content-area .section > .container-inner {
  max-width: 1240px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 15px;
  padding-right: 15px;
}
/* Only these stay genuinely edge-to-edge: the hero slider, the countdown bar,
   and the Google map. Their content is meant to span the full width. */
.content-area .el-4a05c06c > .container-inner,   /* hero slider */
.content-area .el-56941cdd > .container-inner,   /* countdown  */
.content-area .el-24432544 > .container-inner {  /* google map */
  max-width: 100% !important;
  padding-left: 0;
  padding-right: 0;
}

/*-------------------------------------
#. Section tweaks (white text / overlays)
---------------------------------------*/

/* 1) Event Speakers — make the item-social icons white so they read on the
   speaker photos / blue section. */
.speaker-layout1 .item-social ul li a,
.speaker-layout1 .item-social ul li a i {
  color: #ffffff !important;
}

/* 2) Info boxes ("Tobacco Dock, London" / "30+ Speakers" / "15+ Main Sponsor")
   — make the headings white. */
.rt-el-info-box.rtin-style1 .rtin-title,
.rt-el-info-box.rtin-style1 .rtin-title a {
  color: #ffffff !important;
}

/* 3) "Our Latest Blogs" section title + subtitle -> white. */
.el-15394e8c .rtin-title,
.el-15394e8c .rtin-subtitle,
.el-15394e8c .rtin-subtitle p {
  color: #ffffff !important;
}

/* 4) "Our Latest Blogs" section -> primary-color overlay over its bg image.
   This section has a background image but NO .bg-overlay div,
   so we paint the overlay with a ::before pseudo-element that covers the whole
   section behind its content (.container-inner is position:relative, so it
   stacks above this). Brand primary at ~85% lets the photo show through. */
.el.el-17defc22 {
  position: relative;
}
.el.el-17defc22::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(9, 41, 202, 0.85);
  pointer-events: none;
  z-index: 0;
}
.el.el-17defc22 > .container-inner {
  position: relative;
  z-index: 1;
}

/* 5) Blog post dates ("21st June 2018") -> white text (badge stays dark). */
.blog-layout3 .item-date-wrap .item-date,
.blog-layout3.thumb-img .item-date-wrap .item-date {
  color: #ffffff !important;
}

/* 6) Google Map -> full width & taller, edge to edge. The whole wrapper chain
   (section -> column -> widget -> widget-inner -> iframe) must be 100% wide, and
   the iframe fills it. */
.el-24432544,
.el-24432544 > .container-inner,
.el-24432544 .col,
.el-24432544 .col-inner,
.el-24432544 .widget,
.el-7e8ad2e,
.el-7e8ad2e > .widget-inner {
  width: 100% !important;
  max-width: 100% !important;
  flex: 1 0 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.el-7e8ad2e .widget-inner iframe,
.widget-texteditor iframe[src*="google.com/maps"] {
  width: 100% !important;
  height: 600px !important;
  display: block;
  border: 0;
}

/* Info-box section (Tobacco Dock / 30+ Speakers / 15+ Main Sponsor) — add a
   light dark overlay over its bg image so the white text stays legible. This
   section has a bg image but no .bg-overlay div, so we paint it with a ::before
   pseudo-element behind the content (.container-inner is position:relative and
   stacks above). Kept subtle (~35%) per "a little overlay". */
.el.el-bc8b1ca {
  position: relative;
}
.el.el-bc8b1ca::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.35);
  pointer-events: none;
  z-index: 0;
}
.el.el-bc8b1ca > .container-inner {
  position: relative;
  z-index: 1;
}

/*-------------------------------------
#. Dropdown menu link hover -> white text
---------------------------------------*/

/* On hover, dropdown/submenu items get a dark (#101010) background but the theme
   left the text dark (#111111) -> dark-on-dark = invisible. Turn the text white
   on hover for both regular dropdowns and the mega-menu. (body prefix raises
   specificity above the inline dynamic CSS that loads after this stylesheet.) */
body .site-header .main-navigation ul li ul li:hover > a,
body .site-header .main-navigation ul li ul li a:hover,
body .site-header .main-navigation ul li.mega-menu ul.sub-menu li a:hover,
body .site-header .main-navigation ul li.mega-menu ul.sub-menu li:hover > a {
  color: #ffffff !important;
}