@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i');
@import url('https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700,800,900');

/* Bootstrap sets scroll-behavior:smooth on :root, but its animated scroll can be
   clamped to the page's still-settling height when navigating to an anchor
   (#news, #contact, ...), leaving it stuck short of the real target. Instant
   scroll is computed against the final layout and always lands correctly. */
:root, html {
	scroll-behavior: auto !important;
}

/* GENERAL */

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td
	{
	background: transparent;
	border: 0;
	margin: 0;
	padding: 0;
	vertical-align: baseline;
	outline: none;
}

body{
	font-family: "Open Sans";
	font-size: 14px;
	line-height: 1.8;
	letter-spacing: 0.5px;
	word-wrap: break-word;
	font-weight: 400;
}
svg{
	fill: currentcolor;
	width: 15px;
	height: 15px;
}
img.svg{
	width: 15px;
	height: 15px;
}

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color: #333;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color: #333;
   opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color: #333;
   opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color: #333;
}
::-ms-input-placeholder { /* Microsoft Edge */
   color: #333;
}

::placeholder { /* Most modern browsers support this now. */
   color: #333;
}

h1, h2, h3, h4, h5, h6 {
	font-weight: 500;
	line-height: 1;
	font-family: "Montserrat";
}
h1 { font-size: 45px; }
h2 { font-size: 36px; }
h3 { font-size: 30px; }
h4 { font-size: 24px; }
h5 { font-size: 20px; }
h6 { font-size: 16px; }

table{
	width:100%;
	max-width:100%;
	text-align:left;
	border-collapse: collapse;
	border-spacing: 0px;
	margin-bottom:15px;
	color:#999;
	border:1px solid #eee;
}
table tr{
	border:1px solid #eee;
}
table th{
	vertical-align:top;
	color:#333;
	background:none;
	font-size:16px;
	font-weight:normal;
	padding:15px 10px;
	border:1px solid #eee;
}
table td{
	vertical-align:top;
	padding:10px;
	border:1px solid #eee;
}

code, pre {
	padding: 10px;
	padding-bottom: 0;
	border-left: 3px solid #6FBF71;
	border-bottom: 1px solid transparent;
	background: #f7f7f7;
	overflow-x:scroll;
}

pre{
	display: block;	
	word-break: break-all;
	word-wrap: break-word;
}
pre code { white-space: pre-wrap; }

.sppb-btn,
.sppb-btn:hover {
	text-decoration: none !important;
	color: #fff !important;
	background-color: #E3872D !important;
	font-weight: 600 !important;
	font-family: "Montserrat" !important;
	padding: 12px 35px !important;
	border-radius: 3px !important;
	display: inline-block !important;
	position: relative !important;
	overflow: hidden !important;
	border: none !important;
	font-size: 14px !important;
	line-height: 1.8 !important;
	letter-spacing: 0.5px !important;
	cursor: pointer !important;
}

.sppb-btn:before {
	position: absolute;
	content: "";
	top: 0px;
	height: 100%;
	left: -25%;
	width: 0%;
	background-color: #041230;
	transform: skew(50deg);
	transition-duration: .6s;
	z-index: 1;
}

.sppb-btn:hover:before {
	width: 180%;
}

.sppb-btn span {position: relative; z-index: 2;}

.sppb-progress-label {
	display: block;
	font-size: 13px;
	line-height: 1;
	font-weight: 700;
	margin-bottom: 10px;
	position: relative;
}

.sp-scroll-up,
.sp-scroll-up:hover {
	display: none;
	position: fixed;
	right: 30px;
	width: 36px;
	height: 36px;
	line-height: 36px;
	text-align: center;
	font-size: 16px;
	color: #fff;
	z-index: 1000;
bottom: 40px;
overflow: hidden;
outline: 1px solid rgba(255,255,255,.2);
background: #E3872D;
border-radius: 0;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-ms-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}

.sp-scroll-up:before {
	position: absolute;
	content: "";
	top: 0px;
	height: 100%;
	left: -75%;
	width: 0%;
	background-color: #041230;
	transform: skew(50deg);
	transition-duration: .6s;
	z-index: 1;
} 

.sp-scroll-up:hover:before {width: 290%;}

.sp-scroll-up span {
	position: relative;
	z-index: 2;
}

#sp-position1, #sp-component {padding-left: 0; padding-right: 0;}

/* */

/* HEADER */

#sp-header {
	height: inherit;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	box-shadow: none;
	line-height: 38px;
	padding: 35px 0px;
	-webkit-transition: all .5s ease;
	-moz-transition: all .5s ease;
	-ms-transition: all .5s ease;
	-o-transition: all .5s ease;
	transition: all .5s ease;
	background: transparent;
}

#sp-header.header-sticky {
	/* The theme's compiled CSS makes .header-sticky use position:fixed,
	   which pulls the header out of the page's normal flow entirely — fine
	   while it only engaged after ~100px of scroll (content already laid
	   out around a static header by then), but now that it's sticky from
	   the very start of the page (sticky_offset template param set to 0),
	   nothing reserves the header's own space any more. Page content that
	   assumes the header takes up real flow height (e.g. article/detail
	   page title banners with a negative top-margin) shifts up underneath
	   it instead of sitting just below it. position:sticky keeps the header
	   pinned on scroll exactly the same way, but — unlike fixed — still
	   reserves its normal space in the layout, so nothing is covered. */
	position: -webkit-sticky !important;
	position: sticky !important;
	padding: 24px 0px;
	background-color: #E3872D;
	box-shadow: 0 1px 3px rgba(255,255,255,.1);
}

#sp-header #sp-logo, #sp-header #sp-menu {display: table; margin: auto;}

#sp-header .logo {
	height: inherit;
	display: inline-block;
	margin: 0;
}

#sp-header .logo img {
	height: inherit;
}

.sp-megamenu-parent > li > a, .sp-megamenu-parent > li > span {
	padding: 0 15px;
	line-height: 38px;
	margin: 0;
	text-decoration: none;
	color: #fff;
	font-family: "Montserrat";
	font-size: 16px;
	font-weight: 600;
	position: relative;
	transition: all .3s ease;
}

.sp-megamenu-parent > li.active > a {
	font-weight: 600;
}

#offcanvas-toggler {
	display: block;
	height: inherit;
	line-height: 1;
	font-size: 20px;
}

#offcanvas-toggler > .fa {
	color: #fff;
	transition: all .3s ease;
}

/* */

/* ROW SHAPE */

.svg.shape {
	position: absolute;
	bottom: -10px;
	left: 0;
	width: 100%;
	z-index: 21111;
}

svg {
	fill: currentcolor;
	width: 15px;
	height: 15px;
}


.svg.shape svg {
	width: 100%;
	height: 100%;
	color: #fff;
}

.svg.another svg {
	color: #f7f7f7;
}

#particles-js {
	width: 100%;
	height: 100%;
	position: relative;
	z-index: 2;
}

#particles-js .sppb-row-container {
    position: relative;
    z-index: 2;
}
.particles-js-canvas-el {
width: 100%;
height: 100%;
position: absolute;
z-index: 1;
top: 0;
left: 0;
}

#waterHolder {
	width: 100%;
	height: 100%;
	position: relative;
	z-index: 2;
}

#waterHolder canvas {
width: 100%;
height: 100%;
position: absolute;
z-index: 1;
top: 0;
left: 0;	
}

.com-sppagebuilder .hidden-menu {display: none;}
.com-content .home-single, .com-spsimpleportfolio .home-single {display: none;}
.border-logo {border-bottom: 1px solid rgba(255,255,255,.1);}

#sp-position1 {
	display: block;
	margin: 0;
	position: fixed !important;
	left: 0;
	height: 100%;
	z-index: 20;
	transition: all 300ms ease;
}

/* PORTFOLIO — reserve thumbnail aspect ratio (all thumb.svg are 600x600) so the
   browser doesn't have to reflow the page once each image finishes loading.
   Without this, sections below the portfolio grid (e.g. #news) shift down after
   the initial render, so anchor-link scrolling (#news, #contact, ...) lands short. */
.sp-simpleportfolio-img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

@media (min-width: 992px) {
	#sp-component {
		margin-left: 25%;
	}
}

/* */

/* FOOTER */


#sp-footer, #sp-bottom {
	background: inherit;
	color: inherit;
}

#sp-footer .container-inner {
	padding: 0;
	border-top: 0px solid rgba(255, 255, 255, .1);
}

#sp-bottom .sp-module ul > li {
	display: block;
	margin-bottom: 0;
}

/* */

/* PAGE TITLE */

#sp-section-2 {
	position: relative;
	z-index: 2;
}

.sp-page-title {
	padding: 0;
	position: relative;
	display: table;
	width: 100%;
	text-align: center;
	padding: 220px 0;
}

.sp-page-title:before {
    content: '';
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 0;
}

.sp-page-title .container {
	display: table-cell;
	vertical-align: middle;
}

.sp-page-title .sp-page-title-heading {
	font-size: 40px;
	font-weight: 700;
	text-transform: uppercase;
	line-height: 40px;
	color: #fff;
	position: relative;
	z-index: 2;
}

/* */

/* GALLERY SINGLE */

.com-spsimpleportfolio .sp-simpleportfolio .sp-simpleportfolio-img {
	width: 100%;
}

.com-spsimpleportfolio .sp-simpleportfolio .sp-simpleportfolio-description {
	width: 100%;
	float: unset;
}

.sp-simpleportfolio .sp-simpleportfolio-description > h2 {
	display: none;
}

.gallery-single-detail h3 {
	position: relative;
	font-weight: 900;
	font-family: "Montserrat";
	color: #E3872D;
	font-size: 30px;
	line-height: 1;
	margin-bottom: 30px;
}

.gallery-single-detail h3:before {
    position: absolute;
    content: "";
    width: 50px;
    height: 4px;
    background-color: #E3872D;
    letter-spacing: 0px;
    bottom: -14px;
}

.project-info-list {
	overflow: visible;
	margin: 0 -15px;
	margin-top: 30px;
	list-style-type: none;
}

.project-info-list li {
    border-bottom: 1px solid #f7f7f7;
    float: left;
    margin: 0 15px 20px;
    overflow: visible;
    padding-bottom: 11px;
    width: 42%;
    padding-left: 30px;
    position: relative;
	list-style-type: none;
}

.project-info-list li .icon-holder {
    left: 0;
    position: absolute;
    top: -5px;
}

.project-info-list li .icon-holder:before {
    color: #041230;
	content: "";
	font-family: "Font Awesome 5 Free";
	font-weight: 600;
    font-size: 14px;
}

.project-info-list li:nth-child(1) .icon-holder:before {content: "\f007";}
.project-info-list li:nth-child(2) .icon-holder:before {content: "\f07c";}
.project-info-list li:nth-child(3) .icon-holder:before {content: "\f073";}
.project-info-list li:nth-child(4) .icon-holder:before {content: "\f073";}
.project-info-list li:nth-child(5) .icon-holder:before {content: "\f0c1";}
.project-info-list li:nth-child(6) .icon-holder:before {content: "\f041";}

.project-info-list li .text-holder h5 {
    color: #252525;
    font-size: 16px;
    font-weight: 400;
    text-transform: capitalize;
    margin: 0 0 3px;
}

.project-info-list li .text-holder p {
    margin: 0;
}

/* BLOG SINGLE */


.article-details .article-info {
	margin-bottom: 16px;
}

.article-info > span {
	color: #333;
	font-family: "Montserrat";
	font-weight: 600;
	font-size: 14px;
	line-height: 1.8;
	letter-spacing: 0.5px;
}

.article-details .article-header h1 {
	position: relative;
	font-weight: 900;
	font-family: "Montserrat";
	color: #E3872D;
	font-size: 30px;
	line-height: 1;
	margin-bottom: 30px;
}

.article-details .article-header h1:before {
    position: absolute;
    content: "";
    width: 50px;
    height: 4px;
    background-color: #E3872D;
    letter-spacing: 0px;
    bottom: -14px;
	left: 0;
}

.article-info > span a:hover {
	color: #041230;
}


/* */



/* IMPORT ICONS */

@font-face {
  font-family: 'xcon';
  src: url('font/xcon.eot?4965248');
  src: url('font/xcon.eot?4965248#iefix') format('embedded-opentype'),
       url('font/xcon.woff2?4965248') format('woff2'),
       url('font/xcon.woff?4965248') format('woff'),
       url('font/xcon.ttf?4965248') format('truetype'),
       url('font/xcon.svg?4965248#xcon') format('svg');
  font-weight: normal;
  font-style: normal;
}
/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
/*
@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'xcon';
    src: url('../font/xcon.svg?4965248#xcon') format('svg');
  }
}
*/
 
 [class^="xcon-"]:before, [class*=" xcon-"]:before {
  font-family: "xcon";
  font-style: normal;
  font-weight: normal;
  speak: none;
 
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;
  /* opacity: .8; */
 
  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;
 
  /* fix buttons height, for twitter bootstrap */
  line-height: 1em;
 
  /* Animation center compensation - margins should be symmetric */
  /* remove if not needed */
  margin-left: .2em;
 
  /* you can be more comfortable with increased icons size */
  /* font-size: 120%; */
 
  /* Font smoothing. That was taken from TWBS */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
 
  /* Uncomment for 3D effect */
  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}
 
.xcon-phone:before { content: '\e800'; } /* '' */
.xcon-mail:before { content: '\e801'; } /* '' */
.xcon-globe:before { content: '\e802'; } /* '' */
.xcon-glass:before { content: '\e803'; } /* '' */
.xcon-music:before { content: '\e804'; } /* '' */
.xcon-search:before { content: '\e805'; } /* '' */
.xcon-star:before { content: '\e806'; } /* '' */
.xcon-star-empty:before { content: '\e807'; } /* '' */
.xcon-heart:before { content: '\e808'; } /* '' */
.xcon-cancel-circled:before { content: '\e809'; } /* '' */
.xcon-ok:before { content: '\e80a'; } /* '' */
.xcon-bookmark:before { content: '\e80b'; } /* '' */
.xcon-thumbs-up:before { content: '\e80c'; } /* '' */
.xcon-thumbs-down:before { content: '\e80d'; } /* '' */
.xcon-download:before { content: '\e80e'; } /* '' */
.xcon-upload:before { content: '\e80f'; } /* '' */
.xcon-lock-open:before { content: '\e810'; } /* '' */
.xcon-lock:before { content: '\e811'; } /* '' */
.xcon-bell:before { content: '\e812'; } /* '' */
.xcon-location:before { content: '\e813'; } /* '' */
.xcon-attention:before { content: '\e814'; } /* '' */
.xcon-cog:before { content: '\e815'; } /* '' */
.xcon-resize-full:before { content: '\e816'; } /* '' */
.xcon-resize-small:before { content: '\e817'; } /* '' */
.xcon-resize-horizontal:before { content: '\e818'; } /* '' */
.xcon-resize-vertical:before { content: '\e819'; } /* '' */
.xcon-basket:before { content: '\e81a'; } /* '' */
.xcon-calendar:before { content: '\e81b'; } /* '' */
.xcon-wrench:before { content: '\e81c'; } /* '' */
.xcon-folder:before { content: '\e81d'; } /* '' */
.xcon-folder-open:before { content: '\e81e'; } /* '' */
.xcon-volume-off:before { content: '\e81f'; } /* '' */
.xcon-volume-up:before { content: '\e820'; } /* '' */
.xcon-volume-down:before { content: '\e821'; } /* '' */
.xcon-clock:before { content: '\e822'; } /* '' */
.xcon-zoom-out:before { content: '\e823'; } /* '' */
.xcon-zoom-in:before { content: '\e824'; } /* '' */
.xcon-down-dir:before { content: '\e825'; } /* '' */
.xcon-up-dir:before { content: '\e826'; } /* '' */
.xcon-left-dir:before { content: '\e827'; } /* '' */
.xcon-right-dir:before { content: '\e828'; } /* '' */
.xcon-down-open:before { content: '\e829'; } /* '' */
.xcon-left-open:before { content: '\e82a'; } /* '' */

.xcon-right-open:before { content: '\e82b'; } /* '' */
.xcon-up-open:before { content: '\e82c'; } /* '' */
.xcon-down-big:before { content: '\e82d'; } /* '' */
.xcon-left-big:before { content: '\e82e'; } /* '' */
.xcon-right-big:before { content: '\e82f'; } /* '' */
.xcon-up-big:before { content: '\e830'; } /* '' */
.xcon-play:before { content: '\e831'; } /* '' */
.xcon-spin3:before { content: '\e832'; } /* '' */
.xcon-play-circled2:before { content: '\e833'; } /* '' */
.xcon-pause:before { content: '\e834'; } /* '' */
.xcon-to-end:before { content: '\e835'; } /* '' */
.xcon-to-end-alt:before { content: '\e836'; } /* '' */
.xcon-to-start:before { content: '\e837'; } /* '' */
.xcon-flash:before { content: '\e838'; } /* '' */
.xcon-to-start-alt:before { content: '\e839'; } /* '' */
.xcon-fast-fw:before { content: '\e83a'; } /* '' */
.xcon-fast-bw:before { content: '\e83b'; } /* '' */
.xcon-off:before { content: '\e83c'; } /* '' */
.xcon-check:before { content: '\e83d'; } /* '' */
.xcon-comment:before { content: '\e83e'; } /* '' */
.xcon-chat:before { content: '\e83f'; } /* '' */
.xcon-forward:before { content: '\e840'; } /* '' */
.xcon-eye:before { content: '\e841'; } /* '' */
.xcon-eye-off:before { content: '\e842'; } /* '' */
.xcon-star-half:before { content: '\e843'; } /* '' */
.xcon-heart-empty:before { content: '\e844'; } /* '' */
.xcon-camera:before { content: '\e845'; } /* '' */
.xcon-videocam:before { content: '\e846'; } /* '' */
.xcon-picture:before { content: '\e847'; } /* '' */
.xcon-camera-alt:before { content: '\e848'; } /* '' */
.xcon-video:before { content: '\e849'; } /* '' */
.xcon-home:before { content: '\e84a'; } /* '' */
.xcon-pencil:before { content: '\e84b'; } /* '' */
.xcon-trash-empty:before { content: '\e84c'; } /* '' */
.xcon-camera-1:before { content: '\e84d'; } /* '' */
.xcon-move:before { content: '\f047'; } /* '' */
.xcon-bookmark-empty:before { content: '\f097'; } /* '' */
.xcon-twitter:before { content: '\f099'; } /* '' */
.xcon-facebook:before { content: '\f09a'; } /* '' */
.xcon-rss:before { content: '\f09e'; } /* '' */
.xcon-resize-full-alt:before { content: '\f0b2'; } /* '' */
.xcon-gplus:before { content: '\f0d5'; } /* '' */
.xcon-sort-down:before { content: '\f0dd'; } /* '' */
.xcon-sort-up:before { content: '\f0de'; } /* '' */
.xcon-mail-alt:before { content: '\f0e0'; } /* '' */
.xcon-linkedin:before { content: '\f0e1'; } /* '' */
.xcon-comment-empty:before { content: '\f0e5'; } /* '' */
.xcon-chat-empty:before { content: '\f0e6'; } /* '' */
.xcon-bell-alt:before { content: '\f0f3'; } /* '' */
.xcon-angle-double-left:before { content: '\f100'; } /* '' */
.xcon-angle-double-right:before { content: '\f101'; } /* '' */
.xcon-angle-double-up:before { content: '\f102'; } /* '' */
.xcon-angle-double-down:before { content: '\f103'; } /* '' */
.xcon-angle-left:before { content: '\f104'; } /* '' */
.xcon-angle-right:before { content: '\f105'; } /* '' */
.xcon-angle-up:before { content: '\f106'; } /* '' */
.xcon-angle-down:before { content: '\f107'; } /* '' */
.xcon-desktop:before { content: '\f108'; } /* '' */
.xcon-laptop:before { content: '\f109'; } /* '' */
.xcon-tablet:before { content: '\f10a'; } /* '' */
.xcon-mobile:before { content: '\f10b'; } /* '' */
.xcon-quote-left:before { content: '\f10d'; } /* '' */
.xcon-reply:before { content: '\f112'; } /* '' */
.xcon-folder-empty:before { content: '\f114'; } /* '' */
.xcon-folder-open-empty:before { content: '\f115'; } /* '' */
.xcon-reply-all:before { content: '\f122'; } /* '' */
.xcon-star-half-alt:before { content: '\f123'; } /* '' */
.xcon-direction:before { content: '\f124'; } /* '' */
.xcon-attention-alt:before { content: '\f12a'; } /* '' */
.xcon-mic:before { content: '\f130'; } /* '' */
.xcon-mute:before { content: '\f131'; } /* '' */
.xcon-play-circled:before { content: '\f144'; } /* '' */
.xcon-ok-squared:before { content: '\f14a'; } /* '' */
.xcon-euro:before { content: '\f153'; } /* '' */
.xcon-pound:before { content: '\f154'; } /* '' */
.xcon-dollar:before { content: '\f155'; } /* '' */
.xcon-thumbs-up-alt:before { content: '\f164'; } /* '' */
.xcon-thumbs-down-alt:before { content: '\f165'; } /* '' */
.xcon-youtube-play:before { content: '\f16a'; } /* '' */
.xcon-instagram:before { content: '\f16d'; } /* '' */
.xcon-tumblr:before { content: '\f173'; } /* '' */
.xcon-down:before { content: '\f175'; } /* '' */
.xcon-up:before { content: '\f176'; } /* '' */
.xcon-left:before { content: '\f177'; } /* '' */
.xcon-right:before { content: '\f178'; } /* '' */
.xcon-apple:before { content: '\f179'; } /* '' */
.xcon-dribbble:before { content: '\f17d'; } /* '' */
.xcon-vkontakte:before { content: '\f189'; } /* '' */
.xcon-mail-squared:before { content: '\f199'; } /* '' */
.xcon-google:before { content: '\f1a0'; } /* '' */
.xcon-behance:before { content: '\f1b4'; } /* '' */
.xcon-paper-plane:before { content: '\f1d8'; } /* '' */
.xcon-paper-plane-empty:before { content: '\f1d9'; } /* '' */
.xcon-share:before { content: '\f1e0'; } /* '' */
.xcon-share-squared:before { content: '\f1e1'; } /* '' */
.xcon-cc-visa:before { content: '\f1f0'; } /* '' */
.xcon-cc-mastercard:before { content: '\f1f1'; } /* '' */
.xcon-cc-discover:before { content: '\f1f2'; } /* '' */
.xcon-cc-amex:before { content: '\f1f3'; } /* '' */
.xcon-cc-paypal:before { content: '\f1f4'; } /* '' */
.xcon-cc-stripe:before { content: '\f1f5'; } /* '' */
.xcon-bell-off:before { content: '\f1f6'; } /* '' */
.xcon-bell-off-empty:before { content: '\f1f7'; } /* '' */
.xcon-toggle-off:before { content: '\f204'; } /* '' */
.xcon-toggle-on:before { content: '\f205'; } /* '' */
.xcon-pinterest:before { content: '\f231'; } /* '' */
.xcon-hourglass-o:before { content: '\f250'; } /* '' */
.xcon-trademark:before { content: '\f25c'; } /* '' */
.xcon-registered:before { content: '\f25d'; } /* '' */
.xcon-odnoklassniki:before { content: '\f263'; } /* '' */
.xcon-safari:before { content: '\f267'; } /* '' */
.xcon-chrome:before { content: '\f268'; } /* '' */
.xcon-firefox:before { content: '\f269'; } /* '' */
.xcon-opera:before { content: '\f26a'; } /* '' */
.xcon-internet-explorer:before { content: '\f26b'; } /* '' */
.xcon-vimeo:before { content: '\f27d'; } /* '' */


@media (min-width: 576px){
body.helix-ultimate .sppb-row-container {
	max-width: 540px;
}
}
@media (min-width: 768px){
body.helix-ultimate .sppb-row-container {
	max-width: 720px;
}
}

@media (min-width: 992px){
body.helix-ultimate .sppb-row-container {
	max-width: 720px;
}
}

@media (min-width: 1200px){
body.helix-ultimate .sppb-row-container {
	max-width: 960px;
}
}

@-webkit-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    transform: translateY(0); }
  40% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px); }
  60% {
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px); } }

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    transform: translateY(0); }
  40% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px); }
  60% {
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px); } }

/* SERVICES LISTING (/service-detail) — same feature-card style as #services on the homepage */

.darevo-service-list-grid {
    display: flex;
    flex-wrap: wrap;
    margin: -15px;
}

.darevo-service-list-item {
    width: 33.3333%;
    padding: 15px;
    box-sizing: border-box;
}

.darevo-service-list-card {
    position: relative;
    top: 0;
    height: 100%;
    background: #fff;
    box-shadow: 0 0 20px rgba(0, 0, 0, .1);
    padding: 20px 25px 32px 25px;
    cursor: pointer;
    transition: all .3s ease;
}

.darevo-service-list-card:hover {
    top: -5px;
}

/* Icon + title share a row so the icon aligns exactly against the title
   text, however many lines it wraps to — rather than against the title
   and description together. */
.darevo-service-list-title-row {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 17px;
}

.darevo-service-list-icon {
    color: #E3872D;
    font-size: 26px;
    line-height: 1;
    flex-shrink: 0;
}

.darevo-service-list-title {
    margin: 0;
    font-family: "Montserrat", sans-serif;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.15;
    color: #000;
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
}

.darevo-service-list-title a {
    color: inherit;
    text-decoration: none;
}

.darevo-service-list-title a::after {
    content: "";
    position: absolute;
    inset: 0;
}

.darevo-service-list-text {
    text-align: left;
    font-size: 15px;
    line-height: 1.7;
    color: #555;
    margin-top: 12px;
}

.darevo-service-list-text p {
    margin: 0;
}

@media (max-width: 991px) {
    .darevo-service-list-item { width: 50%; }
}

@media (max-width: 575px) {
    .darevo-service-list-item { width: 100%; }
}

/* SERVICES SECTION — equal-height cards */
#services .sppb-addon-feature {
    height: 100%;
    box-sizing: border-box;
    position: relative;
    cursor: pointer;
    padding: 20px 25px 32px 25px !important;
}

/* Icon + title on the same line, with the description below spanning the
   full card width — flush with the icon's left edge, not indented under
   the title. The description actually lives nested inside
   .sppb-media-content (icon's flex sibling), so a plain flex row on
   .sppb-addon-content alone would leave it indented alongside the title.
   display:contents on .sppb-media-content "unwraps" it so its own children
   (the title and the description) become direct grid items here instead,
   letting the description span both columns on its own row. */
#services .sppb-addon-content {
    display: grid !important;
    grid-template-columns: auto 1fr;
    column-gap: 15px;
    row-gap: 12px;
}

#services .sppb-media-content {
    display: contents;
}

#services .sppb-icon {
    grid-column: 1;
    grid-row: 1;
    margin-bottom: 0 !important;
    font-size: 26px !important;
}

#services .sppb-feature-box-title {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
}

#services .sppb-addon-text {
    grid-column: 1 / -1;
    grid-row: 2;
    display: block;
}

/* SERVICES — make the whole card clickable (stretched-link over the title link) */
#services .sppb-feature-box-title a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* SERVICES — long unbroken words (e.g. German "Forschungskooperation") can
   overflow the narrow card instead of wrapping; allow them to break/hyphenate. */
#services .sppb-feature-box-title {
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
}

/* SIDEBAR FIXES */

/* 1. Logo — fully opaque (opacity fixed in SVG source) */
#sp-position1 .sppb-addon-single-image img {
    filter: none;
}

/* 3. Active menu item — orange color + left accent bar */
#sp-position1 .sp-megamenu-parent > li.active > a,
#sp-position1 .sp-megamenu-parent > li.current > a {
    color: #E3872D !important;
    position: relative;
}
#sp-position1 .sp-megamenu-parent > li.active > a::before,
#sp-position1 .sp-megamenu-parent > li.current > a::before {
    content: '';
    position: absolute;
    left: -18px;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 14px;
    background: #E3872D;
    border-radius: 2px;
}

/* 4. Reduce dead zones between sidebar sections */
#sp-position1 .sppb-section {
    padding-top: 25px !important;
    padding-bottom: 25px !important;
}

/* 5. Social icons — larger, spaced, with hover color, single row */
#sp-position1 .sppb-addon-raw-html ul {
    display: flex;
    gap: 16px;
    flex-wrap: nowrap;
    list-style: none;
    padding: 0;
    margin: 0;
    align-items: center;
}
#sp-position1 .sppb-addon-raw-html ul li a {
    color: rgba(255, 255, 255, 0.55);
    font-size: 16px;
    display: block;
    transition: color 0.3s ease, transform 0.2s ease;
}
#sp-position1 .sppb-addon-raw-html ul li a:hover {
    color: #E3872D;
    transform: translateY(-2px);
}

/* Push social icons to the bottom of the sidebar */
#sp-position1 .sp-column,
#sp-position1 .sp-module,
#sp-position1 .sp-module-content,
#sp-position1 .mod-sppagebuilder,
#sp-position1 .page-content {
    height: 100%;
}
#sp-position1 .page-content {
    display: flex;
    flex-direction: column;
}
#sp-position1 .page-content .sppb-section:last-of-type {
    margin-top: auto;
    padding-bottom: 40px !important;
}

/* 6. Separator — more visible */
#sp-position1 .border-logo {
    border-bottom: 1px solid rgba(255, 255, 255, 0.25) !important;
}

/* LECTURING & TEACHING — CV-style experience list */

.darevo-teaching-list {
    margin-top: 10px;
}

.darevo-teaching-item {
    position: relative;
    padding: 4px 0 4px 20px;
    margin-bottom: 26px;
    border-left: 3px solid #E3872D;
}

.darevo-teaching-item:last-child {
    margin-bottom: 0;
}

.darevo-teaching-role {
    margin: 0 0 10px;
    font-family: "Montserrat", sans-serif;
    font-size: 17px;
    font-weight: 600;
    color: #041230;
}

.darevo-teaching-date {
    display: inline-block;
    margin-left: 8px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #E3872D;
}

.darevo-teaching-bullets {
    margin: 0;
    padding: 0;
    list-style: none;
}

.darevo-teaching-bullets li {
    position: relative;
    padding-left: 18px;
    margin-bottom: 6px;
    font-size: 15px;
    line-height: 1.6;
    color: #333;
}

.darevo-teaching-bullets li:last-child {
    margin-bottom: 0;
}

.darevo-teaching-bullets li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #E3872D;
}

/* PUBLICATION DETAIL PAGE */

.darevo-publication-detail {
    padding: 40px 20px 60px;
}

.darevo-back-bar {
    margin-bottom: 30px;
}

.darevo-back-link {
    color: #555;
    font-family: "Montserrat", sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    text-decoration: none;
    transition: color 0.3s;
}

.darevo-back-link:hover { color: #E3872D; }
.darevo-back-link i { margin-right: 6px; }

.darevo-detail-row { align-items: flex-start; }

.darevo-thumb-wrapper {
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(0,0,0,0.12);
    position: sticky;
    top: 30px;
}

.darevo-thumb { width: 100%; display: block; border-radius: 6px; }

.darevo-detail-meta { padding: 0 0 0 30px; }

.darevo-tags { margin-bottom: 16px; }

.darevo-tag {
    display: inline-block;
    background: #E3872D;
    color: #fff;
    font-family: "Montserrat", sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 3px;
    margin-right: 6px;
}

.darevo-pub-title {
    font-family: "Montserrat", sans-serif;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.3;
    color: #1a1a2e;
    margin-bottom: 12px;
}

.darevo-title-bar {
    width: 50px;
    height: 4px;
    background: #E3872D;
    border-radius: 2px;
    margin-bottom: 24px;
}

/* Style the description metadata block */
.darevo-detail-meta .gallery-single-detail { border: none; padding: 0; }
.darevo-detail-meta .gallery-single-detail h3 { display: none; }
.darevo-detail-meta .gallery-single-detail p {
    font-size: 15px;
    color: #444;
    line-height: 1.7;
    margin-bottom: 10px;
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
}
.darevo-detail-meta .gallery-single-detail p:last-child { border-bottom: none; }
.darevo-detail-meta .gallery-single-detail p strong {
    color: #1a1a2e;
    font-family: "Montserrat", sans-serif;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: block;
    margin-bottom: 3px;
}

.darevo-actions { margin-top: 30px; display: flex; gap: 14px; flex-wrap: wrap; }

.darevo-btn-primary, .darevo-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 4px;
    font-family: "Montserrat", sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.darevo-btn-primary {
    background: #E3872D;
    color: #fff !important;
}
.darevo-btn-primary:hover { background: #041230; color: #fff !important; }

.darevo-btn-secondary {
    background: transparent;
    color: #041230 !important;
    border: 2px solid #041230;
}
.darevo-btn-secondary:hover { background: #041230; color: #fff !important; }

@media (max-width: 991px) {
    .darevo-detail-meta { padding: 30px 0 0; }
    .darevo-thumb-wrapper { position: static; }
}

/* CONTACT LEFT PANEL */

#contact .sppb-addon-title {
    padding-left: 25px !important;
    margin-bottom: 20px;
}

#contact h4.sppb-addon-title {
    font-size: 18px !important;
    text-align: left !important;
    padding-left: 0 !important;
}

#contact .sppb-addon-content ul li p i.fas {
    color: #E3872D;
    width: 20px;
    text-align: center;
    font-size: 15px;
}

#contact .sppb-addon-content ul li p a {
    color: #333;
    text-decoration: none;
}

#contact .sppb-addon-content ul li p a:hover {
    color: #E3872D;
}

/* CONTACT FORM FIXES */

/* 1. Reduce top padding so form is fully visible without scrolling */
#contact.sppb-section { padding-top: 50px !important; }
.sppb-ajaxt-contact-form { margin-bottom: 40px !important; }

/* 3. Move success/error message above the Send button */
.sppb-ajaxt-contact-form {
    display: flex;
    flex-direction: column;
}
.sppb-ajaxt-contact-form .sppb-row       { order: 1; }
.sppb-ajaxt-contact-form .sppb-ajax-contact-status {
    order: 2;
    display: block !important;
    min-height: 24px;
    margin-bottom: 10px;
    font-weight: 600;
}
.sppb-ajaxt-contact-form .sppb-text-right { order: 3; }

/* ABOUT — INFO LIST ALIGNMENT */

#sppb-addon-1560467508022 .sppb-addon-content ul {
    padding-left: 0;
    margin-left: 0;
    list-style: none;
}

#sppb-addon-1560467508022 .sppb-addon-content ul li {
    float: left;
    width: 50%;
    box-sizing: border-box;
    padding-right: 15px;
    margin-bottom: 8px;
}

#sppb-addon-1560467508022 .sppb-addon-content ul li:nth-child(even) {
    float: right;
    padding-right: 0;
    padding-left: 15px;
}

/* The markup leads with two empty spacer <li>&nbsp;&nbsp;</li> items (a full
   blank row: SPPB gives every li 20px margin-bottom, and our own rule above
   still adds 8px) purely to push the real info rows down — removing them
   closes most of the gap between the about paragraph and the info block.
   Zeroing the paragraph/div margins on top of that made it too tight, so a
   single deliberate margin-top on the list restores a modest, intentional
   gap instead. */
#sppb-addon-1560467508022 .sppb-addon-content ul li:nth-child(-n+2) {
    display: none;
}

#sppb-addon-1560467508022 .sppb-addon-content > div,
#sppb-addon-1560467508022 .sppb-addon-content .definition {
    margin-bottom: 0 !important;
}

#sppb-addon-1560467508022 .sppb-addon-content p {
    margin-bottom: 0;
}

#sppb-addon-1560467508022 .sppb-addon-content ul {
    margin-top: 15px !important;
}

/* ABOUT — mobile fixes: text was hugging the screen edges, reading small, and
   the 2-column info list (City/Interests/Institution/... ) was breaking
   because it stayed at a fixed 50% width with no responsive stacking, while
   the HTML's own inline padding-left on alternating items made it worse on
   narrow screens. */
@media (max-width: 767px) {
    #about .sppb-addon-raw-html .sppb-addon-content {
        padding-left: 20px;
        padding-right: 20px;
    }

    #about .sppb-addon-raw-html .sppb-addon-content p {
        font-size: 16px;
        line-height: 1.7;
        text-align: left !important;
    }

    #sppb-addon-1560467508022 .sppb-addon-content ul li,
    #sppb-addon-1560467508022 .sppb-addon-content ul li:nth-child(even) {
        float: none;
        width: 100%;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Download CV / Send Message buttons: right-aligned on desktop (correct
       next to the wide text column), but centered reads better once the
       column is full mobile width. The two <a> buttons sit back-to-back in
       the markup with no whitespace between them, so they can't wrap onto
       separate lines on their own — fine for the short English labels, but
       the longer German labels ("Lebenslauf herunterladen" / "Nachricht
       senden") overflow the mobile column. Flex + wrap lets them stack
       cleanly regardless of label length/language. */
    #about .sppb-addon-button-group.sppb-text-right {
        text-align: center !important;
    }

    #about .sppb-addon-button-group.sppb-text-right .sppb-addon-content {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
    }

    /* "Some About my Abilities" section: the 60px top/bottom section padding
       (fixed, no mobile variant) left way too much gap above it; and padding
       the progress-bar *label* alone (previous fix) left the bar track itself
       still touching the edges, an inconsistent look. Padding the whole
       column content area covers heading, subtitle, skill tags, labels, and
       the bar track together. */
    #section-id-1560467508068 {
        padding-top: 30px !important;
        padding-bottom: 30px !important;
    }

    #section-id-1560467508068 .sppb-column-addons {
        padding-left: 20px;
        padding-right: 20px;
    }

    /* Gap between the skill-tags column and the progress-bars column once
       they stack vertically on mobile (side by side on desktop, so no gap
       needed there). */
    #column-wrap-id-1560467508069 {
        margin-top: 30px;
    }

    /* CONTACT — the nested contact section has zero horizontal padding
       (0px on all sides), so the "I'd love to hear from you" info list and
       the AJAX contact form both stretch edge-to-edge on mobile. */
    #section-id-1560552286232 .sppb-column-addons {
        padding-left: 20px;
        padding-right: 20px;
    }

    /* Gap between the info column and the form once they stack (side by
       side on desktop). */
    #column-wrap-id-1560552286237 {
        margin-top: 20px;
    }
}

/* ABOUT — SKILL TAGS */

.darevo-skill-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 28px;
}

.darevo-skill-tags span {
    background: #041230;
    color: #fff;
    font-family: "Montserrat", sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    padding: 6px 16px;
    border-radius: 3px;
    transition: background 0.2s ease;
}

.darevo-skill-tags span:hover {
    background: #E3872D;
}

/* QUOTE SECTION — constrain content width */

#section-id-1560526075010 .sppb-row-overlay {
    left: 15%;
    right: 15%;
    border-radius: 6px;
}

#section-id-1560526075010 .sppb-container-inner {
    max-width: 760px;
}

@media (max-width: 991px) {
    #section-id-1560526075010 .sppb-row-overlay {
        left: 5%;
        right: 5%;
    }
}

@media (max-width: 767px) {
    #section-id-1560526075010 .sppb-row-overlay {
        left: 0;
        right: 0;
        border-radius: 0;
    }
}

/* FOOTER */

/* On short pages (e.g. a brief article with little body text), the footer
   otherwise sits right after the content instead of at the bottom of the
   screen, leaving a block of plain white space below it down to the actual
   viewport bottom. Standard flex sticky-footer fix: the wrapper stretches
   to at least full viewport height, and the footer's auto top-margin
   absorbs whatever space is left, pushing it down to the bottom on short
   pages while behaving normally (pushed further down by content) on long
   ones. */
.body-innerwrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.darevo-sitewide-footer {
    background-color: #041230;
    padding: 30px 0;
    margin-top: auto;
}

.darevo-footer-social {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 16px;
}

.darevo-footer-social a {
    color: rgba(255, 255, 255, 0.6);
    font-size: 20px;
    transition: color 0.2s ease;
    text-decoration: none;
}

.darevo-footer-social a:hover {
    color: #E3872D;
}

.darevo-footer-copy {
    color: rgba(255, 255, 255, 0.5);
    font-size: 13px;
    margin: 0;
    font-family: "Montserrat", sans-serif;
}

/* NEWS — flat cards matching #services .sppb-addon-feature treatment */

.darevo-news-grid {
    display: flex;
    flex-wrap: wrap;
    margin: -15px;
}

.darevo-news-card {
    width: 33.3333%;
    padding: 15px;
    box-sizing: border-box;
}

.darevo-news-card-inner {
    position: relative;
    top: 0;
    height: 100%;
    background: #fff;
    box-shadow: 0 0 20px rgba(0, 0, 0, .1);
    transition: all .3s ease;
    padding: 25px 30px 20px 30px;
    text-align: left;
}

.darevo-news-card-inner:hover {
    top: -5px;
}

.darevo-news-card-inner h3 {
    margin: 0 0 10px;
    padding: 0;
    font-size: 17px;
    line-height: 1.3;
    font-weight: 600;
    font-family: "Montserrat", sans-serif;
    color: #000;
}

.darevo-news-card-inner h3 a {
    color: inherit;
    text-decoration: none;
}

.darevo-news-date {
    display: block;
    font-size: 12px;
    color: #E3872D;
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
}

@media (max-width: 991px) {
    .darevo-news-card { width: 50%; }
}

@media (max-width: 575px) {
    .darevo-news-card { width: 100%; }
}

.darevo-news-seeall {
    width: 100%;
    text-align: center;
    margin-top: 15px;
}

/* SERVICES — hide second row by default */

.darevo-service-extra {
    display: none;
}

/* STATS — 6-column adjustments */

#section-id-1560526518337 .sppb-animated-number {
    font-size: 32px !important;
}

#section-id-1560526518337 .sppb-animated-number-title {
    font-size: 11px !important;
    word-break: break-word;
    hyphens: auto;
}

/* NEWS & PROJECTS DETAIL — justified body text */

.darevo-article-justify p {
    text-align: justify;
    text-justify: inter-word;
    margin-bottom: 18px;
}

.darevo-article-justify p:last-child {
    margin-bottom: 0;
}

/* ARTICLE DETAIL — prev/next navigation */

.pagenavigation {
    margin: 30px 0;
}

.pagenavigation .pagination {
    display: flex;
    gap: 10px;
    align-items: center;
}

.pagenavigation .btn.btn-sm.btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px !important;
    background: #041230 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 3px !important;
    font-family: "Montserrat", sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    text-decoration: none;
    transition: background 0.2s ease;
    margin: 0 !important;
    vertical-align: middle;
}

.pagenavigation .btn.btn-sm.btn-secondary:hover {
    background: #E3872D !important;
    color: #fff !important;
}

/* ARTICLE DETAIL — collaboration contact link */

.darevo-article-contact {
    margin: 40px 0 20px;
    padding: 24px 30px;
    background: #f6f7fd;
    border-left: 4px solid #E3872D;
    border-radius: 3px;
}

.darevo-contact-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #041230;
    font-family: "Montserrat", sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s ease;
}

.darevo-contact-btn:hover {
    color: #E3872D;
}

.darevo-contact-btn i {
    color: #E3872D;
    font-size: 16px;
}

/* ADDITIONAL STYLES */

#sp-main-body {
	padding: 0;
}

.com-spsimpleportfolio #sp-component {
	padding: 100px 15px;
}

.com-content #sp-component {
	padding: 15px;
}

.pager.pagenav, .article-print-email {display: none;}

.com-content hr {display: none;}

#sp-position1 {
	background-color: #041230;
}




/* Slider Zoom Effect */
@-webkit-keyframes zoom {
  from {
    -webkit-transform: scale(1.2, 1.2);
  }

  to {
    -webkit-transform: scale(1, 1);
  }
}

@-moz-keyframes zoom {
  from {
    -moz-transform: scale(1.2, 1.2);
  }

  to {
    -moz-transform: scale(1, 1);
  }
}

@-o-keyframes zoom {
  from {
    -o-transform: scale(1.2, 1.2);
  }

  to {
    -o-transform: scale(1, 1);
  }
}

@keyframes zoom {
  from {
    transform: scale(1.2, 1.2);
  }

  to {
    transform: scale(1, 1);
  }
}


.home2-subsection {
position: absolute !important;
z-index: 2 !important;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}

/* J4 Optimization */

.sp-page-title .breadcrumb .float-start {display: none !important;}
.sp-megamenu-wrapper, #sp-header > .container > .container-inner > .row > div > .sp-column,
#sp-header > .row > div > .sp-column  {display: block !important;}

#sp-header .sp-module {
	margin-left: 0px !important; 
}

#sp-left {
	background-color: #041230;
}

/* Section text-block headings across all pages */
.sppb-addon-text-block .sppb-addon-title {
    font-size: 38px !important;
}

/* These titles ("About Me", "My Services"...) each carry their own inline
   text-transform:uppercase from the addon's own settings ("ABOUT ME"),
   which read awkwardly — switch to true sentence case (only the very
   first letter capitalized, e.g. "About me") regardless of how the title
   itself is capitalized in the page-builder content. */
.sppb-addon-text-block .sppb-addon-title {
    text-transform: lowercase !important;
}

.sppb-addon-text-block .sppb-addon-title::first-letter {
    text-transform: uppercase !important;
}

/* Same section headings ("About Me", "My Services", "My Publications",
   "Ongoing Research Projects", "Some About my Abilities", "Contact Me"...)
   read too large at the fixed 38px on a phone screen — scale them down. */
@media (max-width: 767px) {
    .sppb-addon-text-block .sppb-addon-title {
        font-size: 26px !important;
    }
}

/* Stats row (10 Years of Experience, etc.) — SP Page Builder's own "sm"
   column classes only kick in at 768px and up; below that all six counter
   columns have no explicit width class and fall back to 100%, stacking one
   per row and making the whole section very tall on a phone. Force 2 per
   row instead, all the way down to mobile widths. */
@media (max-width: 767px) {
    #section-id-1560526518337 .sppb-row > div {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
}

/* Language switcher hidden from mobile header (#sp-header is mobile-only, sidebar handles desktop) */
#sp-menu .mod-languages {
    display: none;
}

#sp-menu .mod-languages .lang-inline {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 4px;
}

#sp-menu .mod-languages .lang-inline li a,
#sp-menu .mod-languages .lang-inline li.lang-active a {
    color: #fff;
    font-family: "Montserrat", Arial, sans-serif;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    text-decoration: none;
    padding: 2px 6px;
    border-radius: 3px;
    transition: background 0.2s;
}

#sp-menu .mod-languages .lang-inline li a:hover {
    background: rgba(255,255,255,0.2);
}

#sp-menu .mod-languages .lang-inline li.lang-active a {
    background: rgba(255,255,255,0.25);
}

#sp-menu .mod-languages .lang-inline li + li::before {
    content: "|";
    color: rgba(255,255,255,0.5);
    font-size: 11px;
}

/* Sidebar language switcher (injected by JS above the nav section) */
.darevo-lang-switcher {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 0 14px;
    gap: 4px;
}

.darevo-lang-link {
    color: #fff;
    font-family: "Montserrat", Arial, sans-serif;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    padding: 3px 10px;
    border: 1px solid rgba(255,255,255,0.35);
    border-radius: 3px;
    transition: background 0.2s, opacity 0.2s;
    letter-spacing: 0.05em;
}

.darevo-lang-link:hover {
    color: #fff;
    background: rgba(255,255,255,0.15);
}

.darevo-lang-link.lang-active {
    background: rgba(255,255,255,0.2);
    border-color: rgba(255,255,255,0.6);
    pointer-events: none;
}

.darevo-lang-sep {
    color: rgba(255,255,255,0.3);
    font-size: 11px;
    padding: 0 2px;
}

/* Offcanvas mobile language switcher — the offcanvas menu has a white
   background (menu_dropdown_bg_color), unlike the dark desktop sidebar, so
   the white text/border used above is invisible here and needs a dark
   variant instead. */
.darevo-lang-offcanvas {
    justify-content: flex-start;
    padding: 0 0 18px;
}

.darevo-lang-offcanvas .darevo-lang-link {
    color: #252525;
    border-color: rgba(37,37,37,0.35);
}

.darevo-lang-offcanvas .darevo-lang-link:hover {
    color: #252525;
    background: rgba(37,37,37,0.08);
}

.darevo-lang-offcanvas .darevo-lang-link.lang-active {
    background: rgba(37,37,37,0.1);
    border-color: rgba(37,37,37,0.5);
}

.darevo-lang-offcanvas .darevo-lang-sep {
    color: rgba(37,37,37,0.4);
}

/* Hero "Dr. Nono Saha" heading — the addon's own inline style block sets a
   fixed 50px, all-caps h3 with no mobile variant, so on a phone it reads far
   larger than intended and in full capitals. Drop the caps everywhere and
   scale the size down under the mobile breakpoint. */
#sppb-addon-1560467507972 h3 {
    text-transform: none !important;
}

@media (max-width: 767px) {
    #sppb-addon-1560467507972 h3 {
        font-size: 32px !important;
    }
}