@charset "utf-8";

/*
/*	Copyright (c) 2025 STRCT
/*	Author: STRCT
/*	This file is made for CURRENT TEMPLATE


01)	STRCT BASE
02) STRCT MOBILE MENU
03) STRCT SIDEBAR MENU
04) STRCT HOME
05) STRCT ABOUT
06) STRCT SERVICES
07) STRCT PORTFOLIO
08) STRCT NEWS
09) STRCT CONTACT
10) STRCT BACKGROUND EFFECTS
11) STRCT MEDIA QUERIES (FOR SMALL DEVICES)


/*---------------------------------------------------*/
/*	01) STRCT BASE
/*---------------------------------------------------*/

a{
	text-decoration: none;
}
ul{
	list-style-type: none;
	margin: 0px;
	padding: 0px;
}
ul li{
	margin: 0px;
	padding: 0px;
}
:root{
    --font-syne: 'Syne', sans-serif;
}
html {
	overflow-x: hidden;
	padding: 0px;
	margin: 0px;	
}
body{
	font-family: var(--font-syne);
	font-size: 16px;
	line-height: 27px;
	letter-spacing: 0px;
	word-wrap: break-word;
	font-weight: 400;
	background-color: #111;
	color: #eee;
	overflow-x: hidden;
}

svg{
	fill: currentcolor;
	width: 15px;
	height: 15px;
}
img.svg{
	width: 15px;
	height: 15px;
}
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
   color: #eee;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color: #eee;
   opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color: #eee;
   opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color: #eee;
}
::-ms-input-placeholder { /* Microsoft Edge */
   color: #eee;
}

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

h1, h2, h3, h4, h5, h6{
	font-weight:700;
	line-height: 1.3;
	font-family: var(--font-syne);
	color: #fff;
	font-variant-numeric: lining-nums proportional-nums;
}

h1 { font-size: 45px; }
h2 { font-size: 36px; }
h3 { font-size: 30px; }
h4 { font-size: 24px; }
h5 { font-size: 20px; }
h6 { font-size: 16px; }

.strct_tm_all_wrap{
	width: 100%;
	min-height: 100vh;
	clear: both;
	position: relative;
}
.strct_tm_all_wrap,
.strct_tm_all_wrap *{
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	   -moz-box-sizing: border-box; /* Firefox, other Gecko */
			box-sizing: border-box; /* Opera/IE 8+ */
}
.clearfix:after,
.clearfix:before{
	clear: both;
	display: table;
	content: '';
}
.strct_tm_section{
	width: 100%;
	height:auto;
	clear: both;
}

#preloader{
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
    width: 100%;
    z-index: 99999;
    display: flex;
}
#preloader:before,
#preloader:after{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 50%;
    height: 100%;
    z-index: -1;
    background-color: #000;
    -webkit-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}
#preloader:after{
    left: auto;
    right: 0;
}
#preloader .loader_line{
    margin: auto;
    width: 1px;
    height: 250px;
    position: relative;
    overflow: hidden;
    -webkit-transition: all 0.8s ease 0s;
    -o-transition: all 0.8s ease 0s;
    transition: all 0.8s ease 0s;
}
.loader_line:before{
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 1px;
    height: 0%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    background-color: #fff;
    -webkit-animation: lineheight 1000ms ease-in-out 0s forwards;
    -o-animation: lineheight 1000ms ease-in-out 0s forwards;
    animation: lineheight 1000ms ease-in-out 0s forwards;
}
.loader_line:after{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 1px;
    height: 100%;
    background-color: #999999;
    -webkit-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    -o-transform: translateY(-100%);
    transform: translateY(-100%);
    -webkit-animation: lineround 1200ms linear 0s infinite;
    -o-animation: lineround 1200ms linear 0s infinite;
    animation: lineround 1200ms linear 0s infinite;
    animation-delay: 2000ms;
}

@keyframes lineheight{
    0%{
        height: 0%;
    }
    100%{
        height: 100%;
    }
}

@keyframes lineround{
    0%{
        -webkit-transform: translateY(-100%);
        -ms-transform: translateY(-100%);
        -o-transform: translateY(-100%);
        transform: translateY(-100%);
    }
    100%{
        -webkit-transform: translateY(200%);
        -ms-transform: translateY(200%);
        -o-transform: translateY(200%);
        transform: translateY(200%);
    }
}

/*hiding all*/
.preloaded .loader_line:after{
    opacity: 0;
}
.preloaded  .loader_line{
    opacity: 0;
    height: 100%!important;
}
.preloaded:before,
.preloaded:after{
    -webkit-animation: preloadedzero 300ms ease-in-out 500ms forwards;
    -o-animation: preloadedzero 300ms ease-in-out 500ms forwards;
    animation: preloadedzero 300ms ease-in-out 500ms forwards;
}
@keyframes preloadedzero{
    0%{
        width: 50%;
    }
    100%{
        width: 0%;
    }
}

.strct_tm_all_wrap{
	width: 100%;
	position: relative;
}
.strct_tm_mainpart{
	position: fixed;
	top: 100px;
	right: 250px;
	bottom: 200px;
	left: 250px;
	background-color: #fff;
	overflow: hidden;
}
.strct_tm_mainpart .mainpart_inner{
	width: 100%;
	min-height: 100%;
	position: relative;
	padding: 50px;
	display: flex;
}
.left_border{
	position: absolute;
	top: 0px;
	left: 0px;
	bottom: 0px;
	width: 50px;
	background-color: transparent;
	opacity: 0;
	z-index: 15;
}
.right_border{
	position: absolute;
	top: 0px;
	right: 0px;
	bottom: 0px;
	width: 50px;
	background-color: transparent;
	opacity: 0;
	z-index: 15;
}
.top_border{
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	height: 50px;
	background-color: transparent;
	z-index: 15;
	-webkit-mask-image: linear-gradient(to bottom, rgba(1,1,1,1), rgba(1,1,1,0));
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: cover;
	mask-image: linear-gradient(to bottom, rgba(1,1,1,1), rgba(1,1,1,0));
	mask-repeat: no-repeat;
	mask-size: cover;
}
.bottom_border{
	position: absolute;
	bottom: 0px;
	left: 0px;
	right: 0px;
	height: 50px;
	background-color: transparent;
	z-index: 15;
	  -webkit-mask-image: linear-gradient(to top, rgba(1,1,1,1), rgba(1,1,1,0));
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: cover;
  mask-image: linear-gradient(to top, rgba(1,1,1,1), rgba(1,1,1,0));
  mask-repeat: no-repeat;
  mask-size: cover;
}
.strct_tm_section{
	position: absolute;
    top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	overflow: hidden;
	overflow-y: scroll;
	
	opacity: 0;
	visibility: hidden;
	z-index: 8;
	transition: visibility 1s linear, opacity 0s linear;
	-moz-transition: visibility 1s linear, opacity 0s linear;
	-webkit-transition: visibility1s linear, opacity 0s linear;
	-o-transition: visibility 1s linear, opacity 0s linear;
}
.strct_tm_section.animated {
	opacity: 1;
	visibility: visible;
	z-index: 9;
}
.strct_tm_section.active {
	opacity: 1;
	visibility: visible;
	z-index: 10;
}
.strct_tm_section.hidden {
	opacity: 0;
	visibility: hidden;
	z-index: 9;
}
.strct_tm_section::-webkit-scrollbar{
  width: 0px;
}
.section_inner{
	width: 100%;
	padding: 50px;
}

/*---------------------------------------------------*/
/*	02) STRCT MOBILE MENU
/*---------------------------------------------------*/

.strct_tm_topbar{
	position: fixed;
	top: 0px;
	left: 0px;
	right: 0px;
	height: 50px;
	background-color: #fff;
	z-index: 15;
	display: none;
}
.strct_tm_topbar .topbar_inner{
	width: 100%;
	height: 100%;
	clear: both;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0px 25px;
}
.strct_tm_topbar .logo img{
	max-width: 100px;
	max-height: 40px;
}
.strct_tm_topbar .logo[data-type="avatar"] .avatar{display: inline-block;}
.strct_tm_topbar .logo[data-type="avatar"] .image{display: none;}
.strct_tm_topbar .logo[data-type="avatar"] .text{display: none;}
.strct_tm_topbar .logo[data-type="image"] .avatar{display: none;}
.strct_tm_topbar .logo[data-type="image"] .image{display: inline-block;}
.strct_tm_topbar .logo[data-type="image"] .text{display: none;}
.strct_tm_topbar .logo[data-type="text"] .avatar{display: none;}
.strct_tm_topbar .logo[data-type="text"] .image{display: none;}
.strct_tm_topbar .logo[data-type="text"] .text{display: inline-block;}
.strct_tm_topbar .logo .text h3{
	font-size: 25px;
	font-family: "Archivo Black";
}
.strct_tm_topbar .avatar{
	width: 40px;
	height: 40px;
	border-radius: 100%;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	position: relative;
}
.strct_tm_topbar .hamburger{
	padding: 0px;
}
.strct_tm_topbar .hamburger-inner, 
.strct_tm_topbar .hamburger-inner:after, 
.strct_tm_topbar .hamburger-inner:before{
	width: 30px;
	height: 2px;
}
.strct_tm_topbar .trigger{
	position: relative;
	top: 5px;
}
.strct_tm_topbar .hamburger-box{
	width: 30px;
}
.strct_tm_mobile_menu{
	position: fixed;
	top: 50px;
	right: -200px;
	height: 100vh;
	width: 200px;
	z-index: 15;
	background-color: #fff;
	
	-webkit-transition: all .3s ease;
	   -moz-transition: all .3s ease;
	    -ms-transition: all .3s ease;
	     -o-transition: all .3s ease;
	        transition: all .3s ease;
}
.strct_tm_mobile_menu.opened{
	right: 0px;
}
.strct_tm_mobile_menu .inner{
	position: relative;
	width: 100%;
	height: 100%;
	text-align: right;
	padding: 70px 20px 20px 20px;
}
.strct_tm_mobile_menu .logo{
	margin-bottom: 50px;
}
.strct_tm_mobile_menu .logo img{
	max-width: 100px;
	max-height: 40px;
}
.strct_tm_mobile_menu .logo[data-type="avatar"] .avatar{display: inline-block;}
.strct_tm_mobile_menu .logo[data-type="avatar"] .image{display: none;}
.strct_tm_mobile_menu .logo[data-type="avatar"] .text{display: none;}
.strct_tm_mobile_menu .logo[data-type="image"] .avatar{display: none;}
.strct_tm_mobile_menu .logo[data-type="image"] .image{display: inline-block;}
.strct_tm_mobile_menu .logo[data-type="image"] .text{display: none;}
.strct_tm_mobile_menu .logo[data-type="text"] .avatar{display: none;}
.strct_tm_mobile_menu .logo[data-type="text"] .image{display: none;}
.strct_tm_mobile_menu .logo[data-type="text"] .text{display: inline-block;}
.strct_tm_mobile_menu .logo .text h3{
	font-size: 25px;
	font-family: "Archivo Black";
}
.strct_tm_mobile_menu .avatar{
	width: 60px;
	height: 60px;
	border-radius: 100%;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	position: relative;
}
.strct_tm_mobile_menu .menu_list{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	margin-bottom: 50px;
}
.strct_tm_mobile_menu .menu_list ul{
	margin: 0px;
	list-style-type: none;
}
.strct_tm_mobile_menu .menu_list ul li{
	margin: 0px 0px 7px 0px;
}
.strct_tm_mobile_menu .menu_list ul li a{
	text-decoration: none;
	color: var(--dark-color);
}
.strct_tm_mobile_menu .social{
	width: 100%;
	float: left;
	margin-bottom: 5px;
}
.strct_tm_mobile_menu .social ul{
	margin: 0px;
	list-style-type: none;
}
.strct_tm_mobile_menu .social ul li{
	display: inline-block;
}
.strct_tm_mobile_menu .social ul li:last-child{
	margin-right: 0px;
}
.strct_tm_mobile_menu .social ul li a{
	text-decoration: none;
	color: #333;
}
.strct_tm_mobile_menu .copyright{
	width: 100%;
	float: left;
}
.strct_tm_mobile_menu .copyright p{
	color: var(--dark-color);
}

/*---------------------------------------------------*/
/*	03) STRCT SIDEBAR MENU
/*---------------------------------------------------*/

.strct_tm_sidebar_menu{
	position: fixed;
	top: 100px;
	left: 250px;
	bottom: 100px;
	width: 400px;
	background-color: #fff;
}
.strct_tm_sidebar_menu .sidebar_inner{
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	padding: 50px;
	flex-direction: column;
	text-align: center;
}
.strct_tm_sidebar_menu .logo{
	margin-bottom: 50px;
}
.strct_tm_sidebar_menu .logo img{
	max-width: 200px;
	max-height: 100px;
}
.strct_tm_sidebar_menu .logo[data-type="avatar"] .avatar{display: inline-block;}
.strct_tm_sidebar_menu .logo[data-type="avatar"] .image{display: none;}
.strct_tm_sidebar_menu .logo[data-type="avatar"] .text{display: none;}
.strct_tm_sidebar_menu .logo[data-type="image"] .avatar{display: none;}
.strct_tm_sidebar_menu .logo[data-type="image"] .image{display: inline-block;}
.strct_tm_sidebar_menu .logo[data-type="image"] .text{display: none;}
.strct_tm_sidebar_menu .logo[data-type="text"] .avatar{display: none;}
.strct_tm_sidebar_menu .logo[data-type="text"] .image{display: none;}
.strct_tm_sidebar_menu .logo[data-type="text"] .text{display: inline-block;}
.strct_tm_sidebar_menu .logo .text h3{
	font-size: 40px;
	font-family: "Archivo Black";
}
.strct_tm_sidebar_menu .avatar{
	width: 120px;
	height: 120px;
	border-radius: 100%;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	position: relative;
}
.strct_tm_sidebar_menu .menu{
	margin-bottom: 50px;
}
.strct_tm_sidebar_menu .menu ul li a{
	color: #868a9b;
	padding: 2px 0px;
	display: inline-block;
	
	-webkit-transition: all .3s ease;
	   -moz-transition: all .3s ease;
	    -ms-transition: all .3s ease;
	     -o-transition: all .3s ease;
	        transition: all .3s ease;
}
.strct_tm_sidebar_menu .menu ul li a:hover,
.strct_tm_sidebar_menu .menu ul li.active a{
	color: #000;
}
.strct_tm_sidebar_menu .copyright{
	width: 100%;
	margin-bottom: 20px;
}
.strct_tm_sidebar_menu .copyright a{
	color: #000;
}
.strct_tm_sidebar_menu .social{
	width: 100%;
}
.strct_tm_sidebar_menu .social li{
	display: inline-block;
	margin-right: 3px;
}
.strct_tm_sidebar_menu .social li:last-child{
	margin-right: 0px;
}
.strct_tm_sidebar_menu .social li a{
	color: #868a9b;
	font-size: 19px;
	
	-webkit-transition: all .3s ease;
	   -moz-transition: all .3s ease;
	    -ms-transition: all .3s ease;
	     -o-transition: all .3s ease;
	        transition: all .3s ease;
}
.strct_tm_sidebar_menu .social li a:hover{
	color: #000;
}

/*---------------------------------------------------*/
/*	04) STRCT HOME
/*---------------------------------------------------*/

.strct_tm_home{
	width: 100%;
	min-height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;   
}
.strct_tm_home .content{
	width: 100%;
	text-align: center;
}
.strct_tm_home .content h3{
	font-size: 50px;
	text-transform: uppercase;
	margin-bottom: 15px;
}
.animateText {
font-family: 'Roboto Mono', monospace; /* typewriter style */
  font-size: 18px;
  font-weight: 500;
  color: #aaa;
  line-height: 1;   /* keeps cursor aligned */
  display: inline-block; /* ensures text + cursor stay on same line */
  vertical-align: middle;
}

/* Style the cursor */
.typed-cursor {
  font-size: inherit;       /* match text size */
  line-height: inherit;     /* match line height */
  vertical-align: middle;   /* align cursor with text */
}
.strct_tm_home .animateText span{
	display: block;
	font-size: 18px;
}
.strct_tm_home .avatar{
	position: relative;
	width: 150px;
	height: 150px;
	border-radius: 100%;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	margin: 0px auto;
	margin-bottom: 30px;
}

/*---------------------------------------------------*/
/*	05) STRCT ABOUT
/*---------------------------------------------------*/

.strct_tm_about{
	width: 100%;
}
.strct_tm_about .biography{
	width: 100%;
	border: 1px solid rgba(255,255,255,.1);
	padding: 58px 50px 50px 50px;
	position: relative;
	margin-top: 20px;
	margin-bottom: 69px;
}
.strct_tm_title{
	position: absolute;
	top: -20px;
}
.strct_tm_title h3{
	font-size: 15px;
	text-transform: uppercase;
	display: inline-block;
	background-color: #EFEFEF;
	padding: 10px 30px 9px 30px;
	background: rgba(40, 40, 40, .6) !important
}
.strct_tm_about .biography .text{
	width: 100%;
	border-bottom: 1px solid rgba(255,255,255,.1);
	padding-bottom: 42px;
	margin-bottom: 39px;
}
.strct_tm_about .biography .details{
	width: 100%;
	margin-bottom: 37px;
}
.strct_tm_about .biography .details ul{
	display: flex;
	flex-wrap: wrap;
	margin-left: -20px;
}
.strct_tm_about .biography .details ul li{
	width: 50%;
	padding-left: 20px;
	margin-bottom: 5px;
}
.strct_tm_about .biography .details ul li span:first-child{
	min-width: 120px;
	display: inline-block;
}
.strct_tm_about .biography .details ul li a{
	color: #000;
}
.strct_tm_button{
	width: 100%;
}
.strct_tm_button a{
	display: inline-block;
	color: #000;
	padding: 4px 30px;
	position: relative;
	
	-webkit-transition: all .3s ease;
	   -moz-transition: all .3s ease;
	    -ms-transition: all .3s ease;
	     -o-transition: all .3s ease;
	        transition: all .3s ease;
}
.strct_tm_button a .back{
	position: relative;
	z-index: 1;
	display: block;
}
.strct_tm_button a .front{
	position: absolute;
	top: 0px;
	left: 0px;
	bottom: 0px;
	color: #fff;
	white-space: nowrap;
	width: 60px;
	padding: 4px 30px;
	z-index: 1;
	overflow: hidden;
	
	-webkit-transition: all .3s ease;
	   -moz-transition: all .3s ease;
	    -ms-transition: all .3s ease;
	     -o-transition: all .3s ease;
	        transition: all .3s ease;
}
.strct_tm_button a:hover .front{
	width: 100%;
}
.strct_tm_button a:before{
	position: absolute;
	content: "";
	top: 0px;
	bottom: 0px;
	left: 0px;
	width: 60px;
	background-color: #999;
	
	-webkit-transition: all .3s ease;
	   -moz-transition: all .3s ease;
	    -ms-transition: all .3s ease;
	     -o-transition: all .3s ease;
	        transition: all .3s ease;
}
.strct_tm_button a:hover:before{
	width: 100%;
}
.strct_tm_about .skillbox{
	width: 100%;
	border: 1px solid rgba(255,255,255,.1);
	padding: 65px 50px 50px 50px;
	position: relative;
	margin-top: 20px;
	margin-bottom: 69px;
}
.strct_tm_about .skillbox:before{
	position: absolute;
	content: "";
	width: 1px;
	height: 100%;
	left: 50%;
	transform: translateX(-50%);
	top: 0px;
	background-color: rgba(255,255,255,.1);
}
.strct_tm_about .skillbox .wrapper{
	width: 100%;
	display: flex;
}
.strct_tm_about .skillbox .left{
	width: 50%;
	padding-right: 50px;
}
.strct_tm_about .skillbox .right{
	width: 50%;
	padding-left: 50px;
	position: relative;
}
.strct_tm_about .skillbox .skills_title{
	width: 100%;
	margin-bottom: 33px;
}
.strct_tm_about .skillbox .skills_title h3{
	font-size: 15px;
	text-transform: uppercase;
}
.strct_progress{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	overflow: hidden;
}
.progress_inner{
	width:100%;
	margin-bottom:15px;
}
.progress_inner:last-child{
	margin-bottom: 0px;
}
.progress_inner > span{
	margin:0px 0px 5px 0px;
	display:block;
	text-align:left;
	position: relative;
}
.progress_inner span.label{
	opacity: 0;
	transform: translateY(10px);
	display: block;
	
	-webkit-transition: all .5s ease;
	   -moz-transition: all .5s ease;
	    -ms-transition: all .5s ease;
	     -o-transition: all .5s ease;
	        transition: all .5s ease;
}
.progress_inner span.label.opened{
	opacity: 1;
	transform: translateY(0px);
}
.progress_inner span.number{
	float: right;
	position: absolute;
	right: 100%;
	bottom: 0px;
	transition: all 2s cubic-bezier(0.165, 0.840, 0.440, 1.000);  /* IE 10+ */
}
.progress_inner .background{
	background:rgba(255,255,255,.1);
	width:100%;
	min-width:100%;
	position:relative;
	height:3px;
	border-radius: 50px;
}
.progress_inner .background .bar_in{
	height:3px;
	width:0px;
	overflow:hidden;
	border-top-left-radius: 50px;
	border-bottom-left-radius: 50px;
	position: relative;
	top: 0px;
}
.progress_inner .background .bar{
	width:0px;
	height:100%;
}
.progress_inner .background .bar.open{
	-webkit-animation: wow 2s cubic-bezier(0.165, 0.840, 0.440, 1.000);  /* Safari 4+ */
	-moz-animation:    wow 2s cubic-bezier(0.165, 0.840, 0.440, 1.000);  /* Fx 5+ */
	animation:         wow 2s cubic-bezier(0.165, 0.840, 0.440, 1.000);  /* IE 10+ */
	width:100%;	
}

@-webkit-keyframes wow {0%{ width:0%; } 100%{ width:100%; }}
@-moz-keyframes wow {0%{ width:0%; } 100%{ width:100%; }}
@keyframes wow {0%{ width:0%; } 100%{ width:100%; }}

.strct_tm_about .experience{
	width: 100%;
	border: 1px solid rgba(255,255,255,.1);
	padding: 64px 50px 41px 50px;
	position: relative;
	margin-top: 20px;
	margin-bottom: 69px;
}
.strct_tm_about .experience:before{
	position: absolute;
	content: "";
	width: 1px;
	height: 100%;
	left: 50%;
	transform: translateX(-50%);
	top: 0px;
	background-color: rgba(255,255,255,.1);
}
.strct_tm_about .experience .wrapper{
	width: 100%;
	display: flex;
}
.strct_tm_about .experience .left{
	width: 50%;
	padding-right: 50px;
}
.strct_tm_about .experience .right{
	width: 50%;
	padding-left: 50px;
	position: relative;
}
.strct_tm_about .experience .experience_title{
	width: 100%;
	margin-bottom: 40px;
}
.strct_tm_about .experience .experience_title h3{
	font-size: 15px;
	text-transform: uppercase;
}
.strct_tm_experience_list{
	width: 100%;
}
.strct_tm_experience_list li{
	width: 100%;
	margin-bottom: 25px;
}
.strct_tm_experience_list li .list_inner{
	width: 100%;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid rgba(255,255,255,.1);
	padding-bottom: 21px;
}
.strct_tm_experience_list li:last-child{
	margin-bottom: 0px;
}
.strct_tm_experience_list li:last-child .list_inner{
	border-bottom: none;
	padding-bottom: 0px;
}
.strct_tm_experience_list .subject h3{
	font-size: 15px;
}
.strct_tm_experience_list .subject h3 a {
	color:#fff;
	text-decoration: none;
}
.strct_tm_experience_list .subject h3 a:hover {
	text-decoration: underline;
}
.strct_tm_experience_list .subject span{
	font-size: 14px;
}
.strct_tm_experience_list .date span{
	font-size: 14px;
	display: inline-block;
	border: 1px solid rgba(255,255,255,.1);
	padding: 4px 15px;
}
.strct_tm_testimonials{
	width: 100%;
	border: 1px solid rgba(255,255,255,.1);
	padding: 57px 50px 50px 50px;
	position: relative;
	margin-top: 20px;
}
.strct_tm_testimonials .testimonials_inner{
	width: 100%;
}
.strct_tm_testimonials .wrapper{
	width: 100%;
}
.strct_tm_testimonials .quote{
	width: 100%;
	margin-bottom: 15px;
}
.strct_tm_testimonials .quote .svg{
	width: 50px;
	height: 50px;
	color: #999;
}
.strct_tm_testimonials .item{
	width: 100%;
}
.strct_tm_testimonials .text{
	width: 100%;
	margin-bottom: 27px;
}
.strct_tm_testimonials .details{
	display: flex;
	align-items: center;
}
.strct_tm_testimonials .avatar{
	position: relative;
	width: 60px;
	height: 60px;
	border-radius: 100%;
	top: 50%;
	overflow: hidden;
}
.strct_tm_testimonials .avatar .image{
	position: absolute;
	top: -4px;
	bottom: -4px;
	left: -4px;
	right: -4px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	border-radius: 100%;
	opacity: 0;
	
	-webkit-transition: all 1s ease;
	   -moz-transition: all 1s ease;
	    -ms-transition: all 1s ease;
	     -o-transition: all 1s ease;
	        transition: all 1s ease;
	
	transform: scale(1.2) translateZ(0);
}
.strct_tm_testimonials .owl-carousel .owl-item.active .avatar .image{
	opacity: 1;
	transition: all 1s .3s ease;
	transform: scale(1) translateZ(0);
}
.strct_tm_testimonials .info{
	padding-left: 15px;
}
.strct_tm_testimonials .info .author{
	font-size: 15px;
	margin-bottom: 7px;
}
.strct_tm_testimonials .info .job{
	font-weight: 400;
	font-size: 14px;
	color: #868a9b;
}
.strct_tm_testimonials .info h3{
	overflow: hidden;
	margin: 0px;
	padding: 0px;
	line-height: 1;
	position: relative;
}
.strct_tm_testimonials .info .author span,
.strct_tm_testimonials .info .job span{
	position: relative;
	display: block;
	padding: 2px 0px;
	transform: translateY(102%);
	
	-webkit-transition: all 1s ease;
	   -moz-transition: all 1s ease;
	    -ms-transition: all 1s ease;
	     -o-transition: all 1s ease;
	        transition: all 1s ease;
}

.strct_tm_testimonials .owl-carousel .owl-item.active .info .author span{
	transform: translateY(0px);
	transition-delay: 0.3s;
}
.strct_tm_testimonials .owl-carousel .owl-item.active .info .job span{
	transform: translateY(0px);
	transition-delay: 0.6s;
}

/*---------------------------------------------------*/
/*	06) STRCT SERVICES
/*---------------------------------------------------*/

.strct_tm_services{
	width: 100%;
}
.strct_tm_services .services_list{
	width: 100%;
	border: 1px solid rgba(255,255,255,.1);
	padding: 70px 50px 0px 50px;
	position: relative;
	margin-top: 20px;
}
.strct_tm_services .services_list > ul{
	display: flex;
	flex-wrap: wrap;
	margin-left: -50px;
}
.strct_tm_services .services_list > ul > li{
	width: 50%;
	padding-left: 50px;
	margin-bottom: 50px;
}
.strct_tm_services .services_list .list_inner{
	width: 100%;
	height: 100%;
	position: relative;
	padding: 45px 50px 42px 50px;
	border: 1px solid rgba(255,255,255,.1);
}
.strct_tm_services .services_list .list_inner .svg{
	width: 40px;
	height: 40px;
	color: #999;
	margin-bottom: 17px;
	
	-webkit-transition: all .3s ease;
	   -moz-transition: all .3s ease;
	    -ms-transition: all .3s ease;
	     -o-transition: all .3s ease;
	        transition: all .3s ease;
}
.strct_tm_services .services_list .list_inner:hover .svg{
	color: #000;
}
.strct_tm_services .services_list .title{
	font-size: 15px;
}
.strct_tm_services .services_list .list{
	width: 100%;
	border-top: 1px solid rgba(255,255,255,.1);
	margin-top: 29px;
	padding-top: 25px;
}
.strct_tm_services .services_list .list li{
	width: 100%;
	margin-bottom: 5px;
	position: relative;
	padding-left: 18px;
}
.strct_tm_services .services_list .list li:last-child{
	margin-bottom: 0px;
}
.strct_tm_services .services_list .list li:before{
	position: absolute;
	content: "";
	width: 6px;
	height: 6px;
	background-color: rgba(0,0,0,.15);
	border-radius: 100%;
	left: 0px;
	top: 50%;
	transform: translateY(-50%);
}

/*---------------------------------------------------*/
/*	07) STRCT PORTFOLIO
/*---------------------------------------------------*/

.strct_tm_portfolio{
	width: 100%;
}
.strct_tm_portfolio .portfolio_list{
	width: 100%;
	border: 1px solid rgba(255,255,255,.1);
	padding: 70px 50px 00px 50px;
	position: relative;
	margin-top: 20px;
}

.strct_tm_portfolio .portfolio_filter{
	border-bottom: 1px solid rgba(255,255,255,.1);
	padding-bottom: 7px;
	display: inline-block;
	margin-bottom: 40px;
}
.strct_tm_portfolio .portfolio_filter ul li{
	display: inline-block;
	position: relative;
	margin-right: 11px;
	padding-right: 20px;
}
.strct_tm_portfolio .portfolio_filter ul li:last-child{
	margin-right: 0px;
	padding-right: 0px;
}
.strct_tm_portfolio .portfolio_filter ul li:after{
	position: absolute;
    content: "";
    width: 6px;
    height: 6px;
    background-color: rgba(0,0,0,.15);
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 100%;
}
.strct_tm_portfolio .portfolio_filter ul li:last-child:after{
	display: none;
}
.strct_tm_portfolio .portfolio_filter ul li a{
	color: #000;
}
.strct_tm_portfolio .portfolio_item{
	margin: auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.strct_tm_portfolio .portfolio_item li{
	margin-bottom: 20px;
	float: left;
	width: 30%;
	padding-left: 20px;
}
.strct_tm_portfolio .portfolio_item li .inner{
	width: 100%;
	height: 100%;
	height: auto;
	clear: both;
	float: left;
	overflow: hidden;
	position: relative;
}

/* Play button styles */
.strct_tm_portfolio .portfolio_item li .inner .entry .play-button {
    position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 10;
	width: 100%;
	height: 100%;
	transition: all 0.3s ease;
	border-radius: 0px;
}
.strct_tm_portfolio .portfolio_item li .inner .entry .play-button:hover {
	background-color: rgba(0, 0, 0, 0.3);
}
.strct_tm_portfolio .portfolio_item li .inner .entry .play-button i {
    font-size: 24px;
    color: rgba(255,255,255,0.8);
    margin-left: 3px; /* Slight offset for play icon */
	transition: all 0.3s ease;
}

.strct_tm_portfolio .portfolio_item li .inner .entry .play-button:hover i {
    color: white;
}

/* Title container styles */
.strct_tm_portfolio .portfolio_item li .inner .title-container {
    position: absolute;
	margin-top: 10px;
	padding: 20px;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);
	z-index: 20;
	bottom: 0;
	left: 0;
	width: 100%;
}

.strct_tm_portfolio .portfolio_item li .inner .title-container .main-title {
    margin: 0 0 5px 0;
	font-size: 18px;
	font-weight: 700;
	color: #fff;
}

.strct_tm_portfolio .portfolio_item li .inner .title-container .secondary-title {
    margin: 0;
    font-size: 14px;
    color: #999;
    line-height: 1.4;
}

.strct_tm_portfolio .portfolio_item li .inner img{
	opacity: 0;
	min-width: 100%;
}
.strct_tm_portfolio .portfolio_item li .inner .abs_image{
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	
	-webkit-transition: all .3s ease;
	   -moz-transition: all .3s ease;
	    -ms-transition: all .3s ease;
	     -o-transition: all .3s ease;
	        transition: all .3s ease;
}
.strct_tm_portfolio .portfolio_item li .inner:hover .abs_image{
	transform: scale(1.1) translateZ(0);
}
.strct_tm_portfolio_titles {
    white-space: nowrap;
    background: #ffffff;
    font-size: 15px;
    padding: 5px 15px;
    font-weight: 600;
    color: #000;
    position: fixed; /* stick to viewport */
    top: 0; 
    left: 0; /* reset offsets */
    margin: 0;
    transform: none !important;
    z-index: 9999; /* make sure it's on top */
    pointer-events: none; /* don’t block hover */
    opacity: 0;
    visibility: hidden;
}
.strct_tm_portfolio_titles.visible {
	opacity: 1;
	visibility: visible;
}
.strct_tm_portfolio_titles .work__cat {
	position: absolute;
	background: #ffffff;
	top: 100%;
	left: 0;
	margin-top: -12px;
	font-weight: 500;
	padding: 5px 15px;
	color: #868a9b;
	font-size: 14px;
}
.entry{position: relative;}

/*---------------------------------------------------*/
/*	08) STRCT NEWS
/*---------------------------------------------------*/

.strct_tm_news{
	width: 100%;
}
.strct_tm_news .news_list{
	width: 100%;
	border: 1px solid rgba(255,255,255,.1);
	padding: 70px 50px 50px 50px;
	position: relative;
	margin-top: 20px;
}
.strct_tm_news .news_list ul li{
	width: 100%;
	margin-bottom: 50px;
	padding-bottom: 50px;
	border-bottom: 1px solid rgba(255,255,255,.1);
}
.strct_tm_news .news_list ul li:last-child{
	border-bottom: none;
	padding-bottom: 0px;
	margin-bottom: 0px;
}
.strct_tm_news .news_list ul li .list_inner{
	width: 100%;
	position: relative;
	display: flex;
	align-items: center;
}
.strct_tm_news .news_list ul li .date{
	position: absolute;
	z-index: 2;
	top: 20px;
	left: 20px;
	color: #000;
	background-color: #fff;
	display: inline-block;
	padding: 5px 30px;
}
.strct_tm_news .news_list ul li .image{
	width: 50%;
	position: relative;
	overflow: hidden;
}
.strct_tm_news .news_list ul li .image img{
	min-width: 100%;
	opacity: 0;
	position: relative;
}
.strct_tm_news .news_list ul li .image .main{
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	
	-webkit-transition: all .3s ease;
	   -moz-transition: all .3s ease;
	    -ms-transition: all .3s ease;
	     -o-transition: all .3s ease;
	        transition: all .3s ease;
}
.strct_tm_news .news_list ul li .image:hover .main{
	transform: scale(1.1) translateZ(0);
}
.strct_tm_news .news_list ul li .desc{
	width: 50%;
	padding-left: 50px;
}
.strct_tm_full_link{
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	z-index: 5;
}
.strct_tm_news .news_list .meta {
    display: inline-block;
	border-bottom: 1px solid rgba(255,255,255,.1);
	padding-bottom: 7px;
	margin-bottom: 25px;
}
.strct_tm_news .news_list .meta span {
    position: relative;
    display: inline-block;
    padding-right: 15px;
    margin-right: 10px
}

.strct_tm_news .news_list .meta span:after {
    position: absolute;
    content: "";
    width: 6px;
    height: 6px;
    background-color: rgba(0,0,0,.15);
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 100%
}
.strct_tm_news .news_list .meta span:last-child {
    margin: 0;
    padding: 0
}
.strct_tm_news .news_list .meta span:last-child:after {
    display: none
}
.strct_tm_news .news_list .meta a{
	color: #000;
}
.line_effect {
    text-decoration: none;
    color: #fff;
    display: inline-block;
    position: relative
}
.line_effect:after {
    content: '';
    width: 0;
    height: 1px;
    position: absolute;
    left: auto;
    right: 0;
    bottom: 3px;
    transition: width .6s cubic-bezier(.25,.8,.25,1) 0s;
    background: currentColor
}
.line_effect:hover:after {
    width: 100%;
    left: 0;
    right: auto
}
.text_hover_effect{
    position: relative;
    display: inline;
    background-image: linear-gradient(currentColor,currentColor);
    background-position: 0% 100%;
    background-repeat: no-repeat;
    background-size: 0% 1px;
    transition: background-size .5s
}
.text_hover_effect:after {
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px
}
.text_hover_effect:hover {
    background-size: 100% 1px
}
.strct_tm_news .news_list .title{
	width: 100%;
	margin-bottom: 25px;
}
.strct_tm_news .news_list .title h3{
	font-size: 15px;
}
.strct_tm_news .news_list .title a{
	color: #000;
}

/*---------------------------------------------------*/
/*	09) STRCT CONTACT
/*---------------------------------------------------*/

.strct_tm_contact{
	width: 100%;
}
.strct_tm_contact .contact_inner{
	width: 100%;
	border: 1px solid rgba(255,255,255,.1);
	padding: 70px 50px 50px 50px;
	position: relative;
	margin-top: 20px;
}
.strct_tm_contact .form_wrapper{
	width: 100%;
}
.strct_tm_contact .form_wrapper ul{
	display: flex;
	flex-wrap: wrap;
	margin-left: -20px;
}
.strct_tm_contact .form_wrapper ul li{
	width: 50%;
	padding-left: 20px;
	margin-bottom: 20px;
}
.strct_tm_contact .form_wrapper ul li input,
.strct_tm_contact .form_wrapper ul li select{
	width: 100%;
	height: 50px;
	padding: 5px 20px;
	background-color: transparent;
	border: 1px solid rgba(255,255,255,.1);
	font-family: var(--font-syne);
	font-size: 15px;
}
.colored{
	color: #868a9b;
}
.strct_tm_contact .form_wrapper ul li input:focus,
.strct_tm_contact .form_wrapper ul li select:focus,
.strct_tm_contact .form_wrapper textarea:focus,
.strct_tm_contact .enter_code input:focus{
	outline: none;
}
.strct_tm_contact .form_wrapper textarea{
	padding: 20px;
	height: 120px;
	background-color: transparent;
	border: 1px solid rgba(255,255,255,.1);
	resize: none;
	font-family: var(--font-syne);
	font-size: 15px;
}
.strct_tm_contact #enter_code{
	width: 100%;
	display: flex;
	align-items: center;
	margin-bottom: 20px;
	margin-top: 2px;
}
.strct_tm_contact #enter_code span{
	display: inline-block;
	height: 50px;
	line-height: 50px;
	color: #000;
	border: 1px solid rgba(255,255,255,.1);
	border-right: none;
	padding: 0px 30px;
	user-select:none;
}
.strct_tm_contact #enter_code input{
	display: inline-block;
	height: 50px;
	line-height: 50px;
	background-color: transparent;
	border: 1px solid rgba(255,255,255,.1);
	padding: 0px 20px;
	font-family: var(--font-syne);
	font-size: 15px;
}
.strct_tm_contact input::-webkit-outer-spin-button,
.strct_tm_contact input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Firefox */
.strct_tm_contact input[type=number] {
  -moz-appearance: textfield;
}
.error_box{
	width: 100%;
	background-color: #fce3e3;
	padding: 20px 10px;
	text-align: center;
	margin-bottom: 10px;
	display: none;
}
.error_box p{
	color: #f1f1f1;
}
.success_box{
	width: 100%;
	display: none;
	background-color: #0ac083;
	padding: 20px 10px;
	text-align: center;
	margin-bottom: 10px;
}
.success_box p{
	color: #fff;
}
.error .cf-form-control {
	border-bottom: 1px solid red !important;
}
.error select {
	border-bottom: 1px solid red !important;
}
.success .cf-form-control {
	border-bottom: 1px solid green !important;
}
.success select {
	border-bottom: 1px solid green !important;
}
#text-area-w {
	width: 100%;
	margin-bottom: 10px;
}
.my_map{
	width: 100%;
	filter: grayscale(100%);
	-webkit-filter: grayscale(100%);
	-moz-filter: grayscale(100%);
	margin-bottom: 50px;
}

/*---------------------------------------------------*/
/*	10) STRCT BACKGROUND EFFECTS
/*---------------------------------------------------*/

/*Line Effect*/

.lines{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 100%;
	margin: auto;
	width: 100%;
	display: none;
}
.lines .line{
	position: absolute;
	width: 1px;
	height: 100%;
	top: 0;
	background: rgba(0, 0, 0, 0.1);
	overflow: hidden;
}
.lines .line:after{
	content: '';
	display: block;
	position: absolute;
	height: 15vh;
	width: 100%;
	top: -50%;
	left: 0;
	background: linear-gradient(to bottom, rgba(0,0,0, 0) 0%, #000 75%, #000 100%);
	animation: drop 7s 0s infinite;
	animation-fill-mode: forwards;
	animation-timing-function: cubic-bezier(0.4, 0.26, 0, 0.97);
}
.lines .line:nth-child(1){
	left: 20%;
}
.lines .line:nth-child(1):after{
	animation-delay: 2s;
}
.lines .line:nth-child(2){
	left: 40%;
}
.lines .line:nth-child(2):after{
	animation-delay: 2.5s;
}
.lines .line:nth-child(3){
	left: 60%;
}
.lines .line:nth-child(3):after{
	animation-delay: 3s;
}
.lines .line:nth-child(4){
	left: 80%;
}
.lines .line:nth-child(4):after{
	animation-delay: 3.5s;
}

@keyframes drop{
    0%{
        top: -50%;
    }
    100%{
        top: 110%;
    }
}

/*Noise Effect*/

.noise {
  position: fixed;
  top: -50%;
  left: -50%;
  right: -50%;
  bottom: -50%;
  width: 200%;
  height: 200vh;
  background: transparent url('..//img/noise.png') repeat 0 0;
  background-repeat: repeat;
  animation: bg-animation .2s infinite;
  opacity: .8;
  visibility: visible;
	display: none;
}

@keyframes bg-animation {
    0% { transform: translate(0,0) }
    10% { transform: translate(-5%,-5%) }
    20% { transform: translate(-10%,5%) }
    30% { transform: translate(5%,-10%) }
    40% { transform: translate(-5%,15%) }
    50% { transform: translate(-10%,5%) }
    60% { transform: translate(15%,0) }
    70% { transform: translate(0,10%) }
    80% { transform: translate(-15%,0) }
    90% { transform: translate(10%,5%) }
    100% { transform: translate(5%,0) }
}

/*Circles Effect*/

.circles_wrapper{display: none;}
.circles_wrapper .circles{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.circles_wrapper .circles li{
    position: absolute;
    display: block;
    list-style: none;
    width: 20px;
    height: 20px;
    background: rgba(0, 0, 0,.07);
    animation: animateBackground 25s linear infinite;
    bottom: -150px;
    
}
.circles_wrapper .circles li:nth-child(1){
    left: 25%;
    width: 80px;
    height: 80px;
    animation-delay: 0s;
}
.circles_wrapper .circles li:nth-child(2){
    left: 5%;
    width: 110px;
    height: 110px;
    animation-delay: 2s;
    animation-duration: 12s;
}
.circles_wrapper .circles li:nth-child(3){
    left: 70%;
    width: 20px;
    height: 20px;
    animation-delay: 4s;
}
.circles_wrapper .circles li:nth-child(4){
    left: 40%;
    width: 60px;
    height: 60px;
    animation-delay: 0s;
    animation-duration: 18s;
}
.circles_wrapper .circles li:nth-child(5){
    left: 65%;
    width: 20px;
    height: 20px;
    animation-delay: 0s;
}
.circles_wrapper .circles li:nth-child(6){
    left: 75%;
    width: 110px;
    height: 110px;
    animation-delay: 3s;
}
.circles_wrapper .circles li:nth-child(7){
    left: 35%;
    width: 150px;
    height: 150px;
    animation-delay: 7s;
}
.circles_wrapper .circles li:nth-child(8){
    left: 50%;
    width: 25px;
    height: 25px;
    animation-delay: 15s;
    animation-duration: 45s;
}
.circles_wrapper .circles li:nth-child(9){
    left: 20%;
    width: 15px;
    height: 15px;
    animation-delay: 2s;
    animation-duration: 35s;
}
.circles_wrapper .circles li:nth-child(10){
    left: 85%;
    width: 150px;
    height: 150px;
    animation-delay: 0s;
    animation-duration: 11s;
}

@keyframes animateBackground {

    0%{
        transform: translateY(0) rotate(0deg);
        opacity: 1;
        border-radius: 0;
    }

    100%{
        transform: translateY(-1000px) rotate(720deg);
        opacity: 0;
        border-radius: 50%;
    }

}

/*Canvsa Effect*/

canvas{
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	z-index: -1;
	padding: 0px;
	margin: 0px;
}

.strct_tm_background_effects[data-style="canvas"] .lines{display: none;}
.strct_tm_background_effects[data-style="canvas"] .noise{display: none;}
.strct_tm_background_effects[data-style="canvas"] .circles_wrapper{display: none;}
.strct_tm_background_effects[data-style="lines"] .noise{display: none;}
.strct_tm_background_effects[data-style="lines"] .circles_wrapper{display: none;}
.strct_tm_background_effects[data-style="lines"] .lines{display: block;}
.strct_tm_background_effects[data-style="noise"] .circles_wrapper{display: none;}
.strct_tm_background_effects[data-style="noise"] .lines{display: none;}
.strct_tm_background_effects[data-style="noise"] .noise{display: block;}
.strct_tm_background_effects[data-style="circles"] .lines{display: none;}
.strct_tm_background_effects[data-style="circles"] .noise{display: none;}
.strct_tm_background_effects[data-style="circles"] .circles_wrapper{display: block;}

/*---------------------------------------------------*/
/*	11) STRCT MEDIA QUERIES (FOR SMALL DEVICES)
/*---------------------------------------------------*/

@media (max-width: 1600px) {
	.strct_tm_home .avatar{width: 110px;height: 110px;margin-bottom: 20px;}
	.strct_tm_home .content h3{margin-bottom: 10px;}
	.strct_tm_sidebar_menu{width: 300px;left: 80px;top: 50px;bottom: 50px;}
	.strct_tm_mainpart{right: 80px;left: 80px;top: 50px;bottom: 150px;}
	.strct-tm-floating-menu{bottom: 30px!important;}
	.strct_tm_sidebar_menu .sidebar_inner{padding: 30px 25px;}
	.strct_tm_sidebar_menu .avatar{width: 90px;height: 90px;}
	.strct_tm_sidebar_menu .logo{margin-bottom: 32px;}
	.strct_tm_sidebar_menu .menu{margin-bottom: 25px;}
	.strct_tm_sidebar_menu .copyright{margin-bottom: 10px;}
	.strct_tm_sidebar_menu .menu ul li a{padding: 0px;}
	
}
@media (max-width: 1040px) {
	
	.strct_tm_sidebar_menu{display: none;}
	.noise {display: none!important;}
	.strct_tm_topbar{display: block;}
	.strct-tm-floating-menu{bottom: 20px!important;}
	.strct_tm_background_effects{display: none!important;}
	.strct_tm_background_effects[data-style="noise"] .noise {display: none!important;}
	.strct_tm_mainpart{top: 0px;bottom: 0px;left: 0px;right: 0px;border-radius: 0px!important;}
	.top_border{height: 25px;}
	.bottom_border{height: 25px;}
	.left_border{width: 25px;}
	.right_border{width: 25px;}
	.strct_tm_mainpart .mainpart_inner{padding: 25px;}
	.section_inner{padding: 90px 25px 150px 25px;}
	.strct_tm_home .content h3{font-size: 35px;margin-bottom: 10px;}
	.strct_tm_home .animateText span{font-size: 16px;}
	.strct_tm_about .biography .details ul{margin: 0px;}
	.strct_tm_about .biography .details ul li{width: 100%;padding-left: 0px;}
	.strct_tm_about .biography{padding-left: 25px;padding-right: 25px;}
	.strct_tm_about .biography .details ul li span:first-child{min-width: auto;padding-right: 5px;}
	.strct_tm_about .skillbox{padding-left: 25px;padding-right: 25px;}
	.strct_tm_about .skillbox .wrapper{flex-direction: column;}
	.strct_tm_about .skillbox .left{width: 100%;padding-right: 0px;margin-bottom: 50px;}
	.strct_tm_about .skillbox .right{width: 100%;padding-left: 0px;}
	.strct_tm_about .skillbox:before{display: none;}
	.strct_tm_about .experience{padding-left: 25px;padding-right: 25px;}
	.strct_tm_about .experience .left{padding-right: 0px;width: 100%;margin-bottom: 50px;}
	.strct_tm_about .experience .right{padding-left: 0px;width: 100%;}
	.strct_tm_about .experience:before{display: none;}
	.strct_tm_about .experience .wrapper{flex-direction: column;}
	.strct_tm_testimonials{padding-left: 25px;padding-right: 25px;}
	.strct_tm_services .services_list{padding-left: 25px;padding-right: 25px;}
	.strct_tm_portfolio .portfolio_list{padding-left: 25px;padding-right: 25px;}
	.strct_tm_contact .contact_inner{padding-left: 25px;padding-right: 25px;}
	.strct_tm_news .news_list{padding-left: 25px;padding-right: 25px;}
	.social {bottom: 130px!important;}
}
@media (max-width: 768px) {
	.section_inner{padding-bottom: 100px;}
	.noise {display: none!important;}
	.strct_tm_background_effects[data-style="noise"] .noise {display: none!important;}
	.strct_tm_background_effects{display: none!important;}
	.strct_tm_services .services_list > ul{margin: 0px;}
	.strct_tm_services .services_list > ul > li{width: 100%;padding-left: 0px;margin-bottom: 25px;}
	.strct_tm_portfolio .portfolio_item li{width: 50%;padding-left: 10px;margin-bottom: 10px;}
	.strct_tm_portfolio .portfolio_filter{border-bottom: none;}
	.strct_tm_portfolio .portfolio_filter ul li:after{display: none;}
	.strct_tm_portfolio .portfolio_filter ul li{padding-right: 0px;}
	.strct_tm_news .news_list ul li .list_inner{flex-direction: column;align-items: baseline;}
	.strct_tm_news .news_list ul li .image{width: 100%;margin-bottom: 30px;}
	.strct_tm_news .news_list ul li .desc{width: 100%;padding-left: 0px;}
	.strct_tm_news .news_list ul li .date{padding: 2px 10px;top: 10px;left: 10px;}
	.strct_tm_contact .form_wrapper ul{margin: 0px;}
	.strct_tm_contact .form_wrapper ul li{width: 100%;padding-left: 0px;}
	.social {bottom: 130px!important;}
	
}

/* DARK MODE OVERRIDES */

/* Base background and text */
html, body {
	overflow: hidden!important;
	height: 100%!important;
}
body {
	background-image:url(../img/bg.webp);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
    background-color: #000;
    color: #eee;
	overflow: hidden;
	height: 100%;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
    color: #fff;
}

/* Borders and containers */
.strct_tm_mainpart,
.left_border,
.right_border,
.top_border,
.bottom_border,
.strct_tm_sidebar_menu,
.strct_tm_mobile_menu,
.strct_tm_topbar,
.strct_tm_portfolio_titles,
.strct_tm_news .news_list ul li .date,
.strct_tm_title h3 {
    background: rgba(1, 1, 1, 0.4); /* fallback visible */
    color: #eee !important;
    border-color: rgba(0,0,0,0) !important;
	border-radius: 30px;
	border: 1px solid rgba(255, 255, 255, 0.1);
  	box-shadow: 0 4px 20px rgba(0,0,0,0.4);

	/* Blur effect (only works in supported browsers) */
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}

/* Sidebar menu links */
.strct_tm_sidebar_menu .menu ul li a,
.strct_tm_sidebar_menu .social li a {
    color: #bbb;
}
.strct_tm_sidebar_menu .menu ul li a:hover,
.strct_tm_sidebar_menu .menu ul li.active a,
.strct_tm_sidebar_menu .copyright a,
.strct_tm_sidebar_menu .social li a:hover {
    color: #fff;
}

/* Mobile menu links */
.strct_tm_mobile_menu .menu_list ul li a,
.strct_tm_mobile_menu .copyright p,
.strct_tm_mobile_menu .social ul li a {
    color: #bbb !important;
}
.strct_tm_mobile_menu .menu_list ul li a:hover,
.strct_tm_mobile_menu .social ul li a:hover {
    color: #fff !important;
}

/* Portfolio filter and titles */
.strct_tm_portfolio .portfolio_filter ul li a,
.strct_tm_portfolio_titles,
.strct_tm_portfolio_titles .work__cat {
    color: #eee !important;
    background: transparent !important;
}

/* News list titles and meta */
.strct_tm_news .news_list .title a,
.strct_tm_news .news_list .meta a {
    color: #eee !important;
}
.strct_tm_news .news_list .meta span:after,
.strct_tm_portfolio .portfolio_filter ul li:after,
.strct_tm_services .services_list .list li:before {
    background-color: rgba(255,255,255,0.15) !important;
}

/* Buttons */
.strct_tm_button a {
    color: #fff !important;
}
.strct_tm_button a:before {
    background-color: #222 !important;
}
.strct_tm_button a .front {
    color: #fff !important;
}

/* Inputs and textarea */
.strct_tm_contact .form_wrapper ul li input,
.strct_tm_contact .form_wrapper ul li select,
.strct_tm_contact .form_wrapper textarea,
.strct_tm_contact #enter_code span,
.strct_tm_contact #enter_code input {
    background-color: #181818 !important;
    color: #eee !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
}

/* Progress bar backgrounds */
.progress_inner .background {
    background: rgba(255,255,255,0.08) !important;
}

/* Skill/experience/testimonial boxes */
.strct_tm_about .biography,
.strct_tm_about .skillbox,
.strct_tm_about .experience,
.strct_tm_testimonials,
.strct_tm_services .services_list,
.strct_tm_portfolio .portfolio_list,
.strct_tm_contact .contact_inner {
    background-color: rgba(30,30,30, 0.4) !important;
    border: 1px solid rgba(255,255,255,0.03) !important;
	border-radius: 30px;
    color: #eee !important;
}

/* Error/success boxes */
.error_box {
    background-color: #3a1c1c !important;
    color: #ffb3b3 !important;
}
.success_box {
    background-color: #1c3a2b !important;
    color: #b3ffd9 !important;
}

/* Misc */
.line_effect {
    color: #fff !important;
}
.text_hover_effect {
    background-image: linear-gradient(#fff,#fff) !important;
}

/* SVG icons */
svg, img.svg {
    fill: #fff !important;
}

/* Placeholder text */
::placeholder,
::-webkit-input-placeholder,
:-moz-placeholder,
::-moz-placeholder,
:-ms-input-placeholder,
::-ms-input-placeholder {
    color: #bbb !important;
}

/* Remove white backgrounds from circles, lines, etc. */
.lines .line,
.circles_wrapper .circles li {
    background: rgba(255,255,255,0.07) !important;
}
.lines .line:after {
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, #fff 75%, #fff 100%) !important;
}


/* Floating Menu */
/* Floating Bottom Menu */
.strct-tm-floating-menu {
  	position: fixed;
	bottom: 100px;
	left: 50%;
	transform: translateX(-50%);
	width: 95%;
	max-width: 700px;
	padding: 35px 45px;
	border-radius: 50px;
	z-index: 999;
	background: rgba(2, 2, 2, 0.4); /* fallback visible */
    color: #eee !important;
	
  	box-shadow: 0 4px 20px rgba(0,0,0,0.4);

	/* Blur effect (only works in supported browsers) */
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}

.strct-tm-floating-menu::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50px;
  padding: 1px; /* thickness of shine */
  background: linear-gradient(
    to right,
    rgba(255,255,255,0.1) 0%,
    rgba(255,255,255,0) 30%,
    transparent 50%,
    rgba(255,255,255,0) 70%,
    rgba(255,255,255,0.1) 100%
  );
  -webkit-mask: 
    linear-gradient(#000 0 0) content-box, 
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

/* Menu Inner */
.strct-tm-floating-menu .menu-inner {
  display: flex;
  align-items: center;
  justify-content: flext-start;
  position: relative;
}

/* Logo */
.strct-tm-floating-menu .logo img {
  height: 28px;
  width: auto;
  display: block;
  flex-shrink: 0;
}

/* Menu Links */
.strct-tm-floating-menu .transition_link {
   position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.strct-tm-floating-menu .transition_link li {
  margin: 0;
}

.strct-tm-floating-menu .transition_link li a {
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  color: #fff;
  transition: color 0.3s ease;
}

.strct-tm-floating-menu .transition_link li a:hover,
.strct-tm-floating-menu .transition_link li.active a {
  color: #999;
}

.logo-top {
  position: fixed;       /* stays at top even when scrolling */
  top: 50px;             /* distance from top */
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  text-align: center;
}

.logo-top img {
  height: 60px;          /* adjust size */
  width: auto;
  display: block;
}

.social {
     text-align: center;
    margin: 20px 0;
    bottom: 30px;
    position: absolute;
    transform: translateX(-50%);
    left: 50%;
}

.social ul {
  display: flex;
  justify-content: center;
  gap: 15px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.social ul li {
  display: inline-block;
}

.social ul li a {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 18px;
  transition: all 0.3s ease;
}

/* Hover effect */
.social ul li a:hover {
  color: #fff;
  transform: translateY(-3px);

}

.mfp-portrait .mfp-iframe-scaler {
  width: 315px!important;
  height: 560px!important; /* 9:16 */
  max-width: 90%!important;
  max-height: 90%!important;
}