@charset "utf-8";
/*
/*	Copyright (c) 2022 Marketify
/*	Author: Marketify
/*	This file is made for CURRENT TEMPLATE


01) GRAX BASE
02) GRAX TOPBAR
03) GRAX MOBILE MENU
04) GRAX HERO
05) GRAX ABOUT
06) GRAX PORTFOLIO
07) GRAX TALK
08) GRAX NEWS
09) GRAX CONTACT
10) GRAX COPYRIGHT
11) GRAX CURSOR
12) GRAX PARTICLE EFFECT
13) GRAX GLITCH EFFECT
14) GRAX MEDIA QUERIES (FOR SMALL DEVIVES)


/*---------------------------------------------------*/
/*	01) GRAX BASE
/*---------------------------------------------------*/

html {
	overflow-x: hidden;
	padding: 0px;
	margin: 0px
}
body{
	font-family: "Mulish";
	font-size: 15px;
	line-height: 30px;
	letter-spacing: 1px;
	word-wrap: break-word;
	font-weight: 400;
	background-color: #fff;
	color: #767676;
}
svg{
	fill: currentcolor;
	width: 15px;
	height: 15px;
}
img.svg{
	width: 15px;
	height: 15px;
}
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color: #6f6f6f;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color: #6f6f6f;
   opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color: #6f6f6f;
   opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color: #6f6f6f;
}
::-ms-input-placeholder { /* Microsoft Edge */
   color: #6f6f6f;
}

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

.container{
	max-width: 1200px;
	width:100%;
	margin-left: auto;
	margin-right: auto;
	height:auto;
	padding:0px 40px;
	position:relative;
	clear:both;
}

h1, h2, h3, h4, h5, h6{
	font-weight:500;
	line-height: 1.4;
	font-family: "Poppins";
	color: #000;
}

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

.grax_tm_all_wrap{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	position: relative;
}
.grax_tm_all_wrap,
.grax_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+ */
}
.grax_tm_section{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
}
#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: #fff;
    -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: #000;
    -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: #C8C8C8;
    -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%;
    }
}

/*---------------------------------------------------*/
/*	02) GRAX TOPBAR
/*---------------------------------------------------*/

.grax_tm_topbar{
	left: 0px;
	right: 0px;
	position: fixed;
	z-index: 10;
	padding: 30px 0px;
	transform: translateY(-101%);
	
	-webkit-transition: all .3s ease;
	   -moz-transition: all .3s ease;
	    -ms-transition: all .3s ease;
	     -o-transition: all .3s ease;
	        transition: all .3s ease;
}
.grax_tm_topbar.opened{
	transform: translateY(0);
}
.grax_tm_topbar.animate{
	background-color: #fff;
	padding: 25px 0px;
	box-shadow: 0px 0px 10px rgba(0,0,0,.1);
}
.grax_tm_topbar .topbar_inner{
	width: 100%;
	height: auto;
	clear: both;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.grax_tm_topbar .logo .dark{display: none;}
.grax_tm_topbar.animate .logo .dark{display: block;}
.grax_tm_topbar.animate .logo .light{display: none;}
.grax_tm_topbar .logo img{max-width: 175px;}
.grax_tm_topbar .logo a{display: inline-block;}
.grax_tm_topbar .menu ul{
	margin: 0px;
	list-style-type: none;
}
.grax_tm_topbar .menu ul li{
	margin: 0px 30px 0px 0px;
	display: inline-block;
}
.grax_tm_topbar .menu ul li:last-child{margin-right: 0px;}
.grax_tm_topbar .menu ul li a{
	text-decoration: none;
	color: #fff;
	font-family: "Poppins";
	font-weight: 500;
	transition: all .3s ease;
}
.grax_tm_topbar .menu ul li.current a{color: #e54b4b;}
.grax_tm_topbar .menu ul li a:hover{color: #e54b4b;}
.grax_tm_topbar.animate .menu ul li a{color: #000;}

/*---------------------------------------------------*/
/*	03) GRAX MOBILE MENU
/*---------------------------------------------------*/

.grax_tm_mobile_menu{
	width: 100%;
	height: auto;
	position: relative;
	top: 0px;
	left: 0px;
	display: none;
	z-index: 10;
}
.grax_tm_mobile_menu .topbar_inner{
	width: 100%;
	height: auto;
	float: left;
	clear: both;
	background-color: #fff;
	padding: 20px 0px;
	border-bottom: 1px solid rgba(0,0,0,.2);
}
.grax_tm_mobile_menu .topbar_in{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.my_trigger .hamburger{
    padding: 15px 15px;
    display: inline-block;
    cursor: pointer;
    transition-property: opacity, filter;
    transition-duration: 0.15s;
    transition-timing-function: linear;
    font: inherit;
    color: inherit;
    text-transform: none;
    background-color: transparent;
    border: 0;
    margin: 0;
    overflow: visible;
}
.my_trigger .hamburger-box{
    width: 30px;
    height: 18px;
    display: inline-block;
    position: relative;
}
.my_trigger .hamburger-inner{
    display: block;
    top: 50%;
    margin-top: -2px;
}
.my_trigger .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after{
    width: 30px;
    height: 2px;
    background-color: #333333;
    position: absolute;
    transition-property: transform;
    transition-duration: 0.15s;
    transition-timing-function: ease;
	
	-webkit-border-radius: 4px;
	   -moz-border-radius: 4px;
	        border-radius: 4px;
}
.my_trigger .hamburger-inner::before,
.my_trigger .hamburger-inner::after{
    content: "";
    display: block;
}
.my_trigger .hamburger-inner::before{top: -8px;}
.my_trigger .hamburger-inner::after{ bottom: -10px;}
.my_trigger .hamburger--collapse-r .hamburger-inner{
    top: auto;
    bottom: 0;
    transition-duration: 0.13s;
    transition-delay: 0.13s;
    transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.my_trigger .hamburger--collapse-r .hamburger-inner::after{
    top: -16px;
    transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0.1s linear;
}
.my_trigger .hamburger--collapse-r .hamburger-inner::before{
    transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.my_trigger .hamburger--collapse-r.is-active .hamburger-inner{
    transform: translate3d(0, -10px, 0) rotate(45deg);
    transition-delay: 0.22s;
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
.my_trigger .hamburger--collapse-r.is-active .hamburger-inner::after{
    top: 0;
    opacity: 0;
    transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s 0.22s linear;
}
.my_trigger .hamburger--collapse-r.is-active .hamburger-inner::before{
    top: 0;
    transform: rotate(90deg);
    transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.my_trigger .hamburger{
	padding: 0px;
	height: 100%;
	display: table-cell;
	vertical-align: middle;
}
.my_trigger .hamburger-box{display: block;}
.my_trigger .hamburger .hamburger-inner::before,
.my_trigger .hamburger .hamburger-inner::after,
.my_trigger .hamburger .hamburger-inner{
	background-color: #000;
	width: 30px;
	
	-webkit-transition: all .3s ease;
	   -moz-transition: all .3s ease;
	    -ms-transition: all .3s ease;
	     -o-transition: all .3s ease;
	        transition: all .3s ease;
}
.grax_tm_mobile_menu .dropdown{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	background-color: #fff;
	border-bottom: 1px solid rgba(0,0,0,.2);
	display: none;
}
.grax_tm_mobile_menu .dropdown .dropdown_inner{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	padding: 25px 0px;
}
.grax_tm_mobile_menu .dropdown .dropdown_inner ul{
	margin: 0px;
	list-style-type: none;
}
.grax_tm_mobile_menu .dropdown .dropdown_inner ul li{
	margin: 0px;
	float: left;
	width: 100%;
}
.grax_tm_mobile_menu .dropdown .dropdown_inner ul li a{
	text-decoration: none;
	color: #000;
	display: inline-block;
	padding: 4px 0px;
	font-family: "Montserrat";
	font-weight: 500;
}
.grax_tm_mobile_menu .logo img{max-width: 70px;}

/*---------------------------------------------------*/
/*	04) GRAX HERO
/*---------------------------------------------------*/

.grax_tm_hero{
	width: 100%;
	height: 100vh;
	clear: both;
	float: left;
	position: relative;
	clip-path: polygon(0 0, 100% 0, 100% 100%, 25% 100%, 0 100%);
	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;
}
.grax_tm_hero.creative{clip-path: none;}
.grax_tm_hero.creative.shape{clip-path:none;}
.grax_tm_hero.shape{clip-path: polygon(0 0, 100% 0, 100% 83%, 25% 100%, 0 83%);}
.grax_tm_hero .bg{
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
}
.grax_tm_hero .bg .image{
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}
.grax_tm_hero .bg .overlay{
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	z-index: 1;
	background-color: rgba(0,0,0,.2);
}
.grax_tm_hero .content{
	width: 100%;
	height: 100%;
	float: left;
	position: relative;
	z-index: 2;
}
.grax_tm_hero .container{height: 100%;}
.grax_tm_hero .details{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
}
.grax_tm_hero .name{
	font-size: 72px;
	font-weight: 700;
	color: #fff;
	margin-bottom: 11px;
}

.grax_tm_hero .details[data-animation="toTop"] .fn_animation .character{top: 15px;}
.grax_tm_hero .details[data-animation="toTop"] .fn_animation .character.opened{top: 0px;}

.grax_tm_hero .details[data-animation="toRight"] .fn_animation .character{right: 15px;}
.grax_tm_hero .details[data-animation="toRight"] .fn_animation .character.opened{right: 0px;}

.grax_tm_hero .details[data-animation="scale"] .fn_animation .character{
	opacity: 1;
	visibility: visible;
	transform: scale(0);
}
.grax_tm_hero .details[data-animation="scale"] .fn_animation .character.opened{transform: scale(1);}

.grax_tm_hero .details[data-animation="rotate"] .fn_animation .character{transform: rotate(30deg);}
.grax_tm_hero .details[data-animation="rotate"] .fn_animation .character.opened{transform: rotate(0);}

.fn_animation{opacity: 0;}
.fn_animation.ready{opacity: 1;}
.fn_animation .character{
	display: inline-block;
	position: relative;
	opacity: 0;
	visibility: hidden;
	transform: translateZ(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;
}
.fn_animation .character.opened{
	opacity: 1;
	visibility: visible;
}
.fn_animation.job .character{
	-webkit-transition: all .4s ease;
	   -moz-transition: all .4s ease;
	    -ms-transition: all .4s ease;
	     -o-transition: all .4s ease;
	        transition: all .4s ease;
}
.grax_tm_hero .job{
	color: #ddd;
	letter-spacing: 1.5px;
	font-family: "Poppins";
	font-size: 17px;
	font-weight: 500;
	margin-bottom: 40px;
	max-width: 400px;
	font-style: italic;
}
.grax_tm_down{
	position: absolute;
	z-index: 7;
	bottom: 5%;
	display: none;
}
.grax_tm_down.opened{display: block;}
.grax_tm_down[data-position="left"]{left: 0px;}
.grax_tm_down[data-position="right"]{right: 0px;}
.grax_tm_down[data-position="center"]{
	left:50%;
	transform: translateX(-50%);
}
.grax_tm_down .line_wrapper{
	position: absolute;
    width: 1px;
    height: 100%;
    left: 0;
    right: 0;
   	margin: 0px auto;
    opacity: 1;
    filter: alpha(opacity=100);
    visibility: visible;
	
    -webkit-transition: all .7s;
    -moz-transition: all .7s;
    -ms-transition: all .7s;
    -o-transition: all .7s;
    transition: all .7s;
}
.grax_tm_down .line_wrapper{
    width: 1px;
    height: 50px;
    background: none;
	display: block;
}
.grax_tm_down .line_wrapper:before{
	content: "";
	background-color: #000;
	width: 1px;
    height: 50%;
    display: block;
    top: 0;
	
    -webkit-animation: scroll-down 2s ease-in-out infinite;
    -ms-animation: scroll-down 2s ease-in-out infinite;
    animation: scroll-down 2s ease-in-out infinite;;
}

@-webkit-keyframes scroll-down {
  0% {
    height: 0;
  }
  50% {
    height: 100%;
  }
  70% {
    height: 100%;
    transform: scaleY(0.5);
    transform-origin: bottom;
  }
  100% {
    height: 100%;
    transform: scaleY(0);
    transform-origin: bottom;
  }
}
.grax_tm_down[data-skin="light"] .line_wrapper:before{background-color: #fff;}

/*---------------------------------------------------*/
/*	05) GRAX ABOUT
/*---------------------------------------------------*/

.grax_tm_about{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	background-color: #fff;
	margin-bottom: 25px;
	padding-top: 150px;
}
.grax_tm_about .about_inner{
	width: 100%;
	height: auto;
	clear: both;
	display: flex;
	align-items: center;
}
.grax_tm_about .left{
	width: 40%;
	padding-right: 50px;
}
.grax_tm_about .left .image{position: relative;}
.grax_tm_about .left .image img{
	opacity: 0;
	min-width: 100%;
}
.grax_tm_about .left .main{
	position: absolute !important;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	border-radius: 5px;
	box-shadow: 0px 0px 40px rgb(0 0 0 / 20%);
}
.grax_tm_about .right{
	width: 60%;
	padding-left: 50px;
}
.grax_tm_about .right .text{
	width: 100%;
	float: left;
	padding-top: 27px;
	padding-bottom: 28px;
}
.grax_tm_about .right .list{
	width: 100%;
	float: left;
	margin-bottom: 27px;
}
.grax_tm_about .right .list ul{
	margin: 0px 0px 0px -20px;
	list-style-type: none;
}
.grax_tm_about .right .list ul li{
	margin: 0px 0px 13px 0px;
	float: left;
	width: 50%;
	position: relative;
	padding-left: 20px;
}
.grax_tm_about .right .list ul li .list_inner{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	position: relative;
	padding-left: 30px;
}
.grax_tm_about .right .list ul li span{
	font-family: "Poppins";
	font-weight: 600;
	color: #000;
	font-style: italic;
}
.grax_tm_about .right .list ul li .svg{
	width: 15px;
	height: 15px;
	position: absolute;
	left: 0px;
	top: 50%;
	transform: translateY(-50%);
	color: #000;
	margin-top: -1px;
}
.grax_tm_button{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
}
.grax_tm_button a{
	text-decoration: none;
    color: #fff;
    display: inline-block;
    background-color: #e54b4b;
	border: 2px solid #e54b4b;
    padding: 10px 40px;
    border-radius: 5px;
	
	-webkit-transition: all .3s ease;
	   -moz-transition: all .3s ease;
	    -ms-transition: all .3s ease;
	     -o-transition: all .3s ease;
	        transition: all .3s ease;
}
.grax_tm_button a:hover{
	background-color: transparent !important;
	color: #000;
}
.grax_tm_progress_part{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	padding: 135px 0px 140px 0px;
}
.grax_tm_progress_part .part_inner{
	width: 100%;
	height: auto;
	clear: both;
	display: flex;
}
.grax_tm_progress_part .left{
	width: 50%;
	padding-right: 50px;
}
.grax_tm_progress_part .left h3{
	font-weight: 600;
	margin-bottom: 27px;
}
.grax_tm_progress_part .right{
	width: 50%;
	padding-left: 50px;
}
.kioto_progress{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
}
.progress_inner{
	width:100%;
	margin-bottom:27px;
}
.progress_inner:last-child{margin-bottom: 0px;}
.progress_inner > span{
	margin:0px 0px 7px 0px;
	width:100%;
	display:block;
	text-align:left;
	font-family: "Poppins";
	font-weight: 500;
	color: #000;
}
.progress_inner span.number{float: right;}
.progress_inner .background{
	background:rgba(0,0,0,.09);
	width:100%;
	min-width:100%;
	position:relative;
	height:8px;
	border-radius: 5px;
}
.progress_inner .background .bar_in{
	height:100%;
	background:#e54b4b;
	width:0px;
	overflow:hidden;
	border-radius: 5px;
}
.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%; }}

/*---------------------------------------------------*/
/*	06) GRAX PORTFOLIO
/*---------------------------------------------------*/

.grax_tm_title_holder{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
}
.grax_tm_title_holder span{color: #e54b4b;	}
.grax_tm_title_holder h3{
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: 10px;
	
}
.grax_tm_portfolio{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	padding: 140px 0px 100px 0px;
	background-color: #f9f9f9;
}
.grax_tm_portfolio .portfolio_list{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	padding-top: 90px;
}
.grax_tm_portfolio ul{
	margin: 0px 0px 0px -50px;
	list-style-type: none;
}
.grax_tm_portfolio ul li{
	margin: 0px 0px 50px 0px;
	float: left;
	width: 33.3333%;
	padding-left: 50px;
}
.grax_tm_portfolio ul li .list_inner{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	position: relative;
	border-radius: 5px;
	overflow: hidden;
}
.grax_tm_portfolio .image{position: relative;}
.grax_tm_portfolio .image img{
	min-width: 100%;
	opacity: 0;
}
.grax_tm_portfolio .image .main{
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	border-radius: 5px;
}
.grax_tm_portfolio .overlay{
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	z-index: 1;
	background-color: #f9f9f9;
	border-radius: 5px;
	
	opacity: 0;
	visibility: 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;
}
.grax_tm_portfolio ul li .list_inner:hover .overlay{
	opacity: 1;
	visibility: visible;
}
.grax_tm_portfolio .details{
	position: absolute;
	bottom: 20px;
	left: 30px;
	z-index: 2;
	
	opacity: 0;
	visibility: 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;
}
.grax_tm_portfolio ul li .list_inner:hover .details{
	opacity: 1;
	visibility: visible;
	bottom: 30px;
}
.grax_tm_portfolio .details span{font-family: "Poppins";}
.grax_tm_portfolio .details h3{
	font-size: 18px;
	font-weight: 600;
}
.grax_tm_full_link{
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	z-index: 4;
}
.overlay_effect{
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	z-index: 3;
	border-radius: 5px;
}
.overlay_effect:after{
	position: absolute;
	content: "";
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	background-color: #f9f9f9;
	z-index: 1;
}
.overlay_effect:before{
	position: absolute;
	content: "";
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
}
.my_waypoint.load .overlay_effect:before{
	z-index: 2;
  	background-color: #000;
  	animation: anim 2s cubic-bezier(0.77, 0, 0.175, 1) both;
}
.my_waypoint.load .overlay_effect:after{
 	animation: anim2 2s cubic-bezier(0.77, 0, 0.175, 1) both;
}

@keyframes anim{
  0% {
    transform: translateX(-100%);
  }
  50% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100%);
  }
}

@keyframes anim2{
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100%);
  }
}

/*---------------------------------------------------*/
/*	07) GRAX TALK
/*---------------------------------------------------*/

.grax_tm_talk{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	padding: 102px 20px 105px 20px;
	position: relative;
}
.grax_tm_talk:before{
	position: absolute;
    content: "";
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;  
    background-image: url(..//img/patterns/inspiration-geometry.png);
    background-repeat: repeat;
    opacity: 1; /**  If you choose lighter pattern image as background please Decrease opacity  **/
    z-index: 2;
}
.grax_tm_talk:after{
	position: absolute;
    content: "";
    top: 0px;
   	bottom: 0px;
   	left: 0px;
   	right: 0px;
   	background-color: #000;
   	z-index: 1;
}
.grax_tm_talk .talk_inner{
	width: 100%;
	height: auto;
	clear: both;
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: relative;
	z-index: 3;
}
.grax_tm_talk .text{padding-right: 20px;}
.grax_tm_talk .text h3{
	font-weight: 600;
	color: #fff;
}
.grax_tm_talk .text h3 span{position: relative;}
.grax_tm_talk .text h3 span:before{
	position: absolute;
	content: "";
	width: 20px;
	height: 4px;
	background-color: #fff;
	bottom: 11px;
	left: 100%;
	opacity: 1;
	animation: myAnim 0.9s infinite;
    -moz-animation: myAnim 0.9s infinite;
	-webkit-animation: myAnim 0.9s infinite;
}
@keyframes myAnim{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
@-webkit-keyframes myAnim{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
@-moz-keyframes myAnim{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
.grax_tm_talk .text p{
	font-family: "Poppins";
}

.grax_tm_talk .button a{
	color: #fff;
	text-decoration: none;
	font-family: "Poppins";
	font-weight: 600;
	position: relative;
	display: inline-block;
}

.grax_tm_talk .button a:before{
	content: '';
    width: 100%;
    height: 2px;
    position: absolute;
    left: auto;
    right: 0;
    bottom: 0;
    background: rgba(255,255,255,.2);
}
.grax_tm_talk .button a:after{
	content: '';
    width: 0;
    height: 1px;
    position: absolute;
    left: auto;
    right: 0;
    bottom: 0;
    transition: width .6s cubic-bezier(.25,.8,.25,1) 0s;
    background: currentColor;
}
.grax_tm_talk .button a:hover:after{
	width:100%;
	left:0;
	right:auto;
}

/*---------------------------------------------------*/
/*	08) GRAX NEWS
/*---------------------------------------------------*/

.grax_tm_news{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	background-color: #f9f9f9;
	padding: 140px 0px 90px 0px;
}
.grax_tm_news .news_list{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	padding-top: 90px;
}
.grax_tm_news .news_list ul{
	margin: 0px 0px 0px -50px;
	list-style-type: none;
	display: flex;
	flex-wrap: wrap;
}
.grax_tm_news .news_list ul li{
	margin: 0px 0px 50px 0px;
	float: left;
	width: 33.3333%;
	padding-left: 50px;
}
.grax_tm_news .news_list ul li .list_inner{
	width: 100%;
	height: 100%;
	clear: both;
	float: left;
	position: relative;
}
.grax_tm_news .news_list ul li .image{
	position: relative;
	overflow: hidden;
}
.grax_tm_news .news_list ul li .image img{
	min-width: 100%;
	opacity: 0;
}
.grax_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; 
	transform: scale(1) translateZ(0);
	border-radius: 5px;
	
	-webkit-transition: all .3s ease;
	   -moz-transition: all .3s ease;
	    -ms-transition: all .3s ease;
	     -o-transition: all .3s ease;
	        transition: all .3s ease;
}
.grax_tm_news .news_list ul li .list_inner .image:hover .main{transform: scale(1.1) rotate(3deg);}
.grax_tm_news .news_list ul li .details{
	width: 100%;
	float: left;
	padding-right: 15px;
	padding-top: 32px;
}
.grax_tm_news .news_list ul li .details .title{margin-bottom: 10px;}
.grax_tm_news .news_list ul li .details .title a{
	text-decoration: none;
	color: #000;
	font-size: 18px;
	font-weight: 600;
	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;
}
.grax_tm_news .news_list ul li .details .title a:hover{color: #e54b4b;}
.grax_tm_news .news_list ul li .details .date{
	text-transform: uppercase;
	font-family: "Poppins";
	font-size: 12px;
	color: #767676;
	font-style: italic;
}
.grax_tm_news .news_list ul li .details .date a{
	text-decoration: none;
	color: #767676;
	
	-webkit-transition: all .3s ease;
	   -moz-transition: all .3s ease;
	    -ms-transition: all .3s ease;
	     -o-transition: all .3s ease;
	        transition: all .3s ease;
}
.grax_tm_news .news_list ul li .details .date a:hover{color: #e54b4b;}
.grax_tm_news .news_list ul li .details .date span{
	position: relative;
	margin-left: 11px;
}
.grax_tm_news .news_list ul li .details .date span:before{
	position: absolute;
	content: "";
	margin-top: 1px;
	top: 50%;
	transform: translateY(-50%) rotate(15deg);
	right: 100%;
	background-color: #939393;
	width: 1px;
	height: 9px;
	margin-right: 7px;
}
.grax_tm_news .description{
	opacity: 0;
	visibility: hidden;
	position: absolute;
	z-index: -11;
	display: none;
}
body.modal{
	overflow-y: hidden;
}
.grax_tm_modalbox_news{
	position: fixed;
	top: 0px;
	left: 0px;
	right: 0px;
	height: 100vh;
	z-index: 15;
	background-color: rgba(0,0,0,.8);
	opacity: 0;
	visibility: hidden;
	transition: all .3s ease;
}
.grax_tm_modalbox_news.opened{
	opacity: 1;
	visibility: visible;
}
.grax_tm_modalbox_news .container{
	height: 100vh;
}
.grax_tm_modalbox_news .box_inner{
	position: absolute;
	top: 70px;
	bottom: 70px;
	width: 1200px;
	left: 50%;
	transform: translateX(-50%);
	background-color: #fff;
	z-index: 1;
	opacity: 0;
	visibility: hidden;
	margin-top: -20px;
	transition: all .3s ease;
	transition-delay: .3s;
}
.grax_tm_modalbox_news.opened .box_inner{
	opacity: 1;
	visibility: visible;
	margin-top: 0px;
}
.grax_tm_modalbox_news .close{
	position: fixed;
	left: 100%;
	top: 0px;
	margin-left: 40px;
	z-index: 111111;
}
.grax_tm_modalbox_news .close a{
	text-decoration: none;
	color: #fff;
}
.grax_tm_modalbox_news .close .svg{
	width: 50px;
	height: 50px;
}
.grax_tm_modalbox_news .description_wrap{
	position: relative;
	width: 100%;
	height: 100%;
	float: left;
	overflow: hidden;
	padding: 50px;
}
.grax_tm_modalbox_news .details{
	width: 100%;
	float: left;
	margin-bottom: 30px;
}
.grax_tm_modalbox_news .description{
	width: 100%;
	float: left;
}
.grax_tm_modalbox_news .description p{
	margin-bottom: 15px;
}
.grax_tm_modalbox_news .description blockquote{
	font-style: italic;
	color: #000;
	border-left: 2px solid #e54b4b;
	padding-left: 20px;
	margin-bottom: 15px;
}
.grax_tm_modalbox_news .description_wrap .image{
	position: relative;
	max-height: 450px;
	z-index: -1;
	margin-bottom: 40px;
}
.grax_tm_modalbox_news .description_wrap .image img{
	min-width: 100%;
}
.grax_tm_modalbox_news .description_wrap .image .main{
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	border-radius: 5px;
}
.grax_tm_modalbox_news .details .title{
	font-weight: 600;
	margin-bottom: 5px;
}
.grax_tm_modalbox_news .date{
	text-transform: uppercase;
    font-family: "Poppins";
    font-size: 12px;
    color: #767676;
    font-style: italic;
}
.grax_tm_modalbox_news .date a{
	text-decoration: none;
    color: #767676;
	
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}
.grax_tm_modalbox_news .date a:hover{color: #e54b4b;}
.grax_tm_modalbox_news .date span{
	position: relative;
    margin-left: 11px;
}
.grax_tm_modalbox_news .date span:before{
	position: absolute;
    content: "";
    margin-top: 0px;
    top: 50%;
    transform: translateY(-50%) rotate(15deg);
    right: 100%;
    background-color: #939393;
    width: 1px;
    height: 9px;
    margin-right: 7px;
}
.grax_tm_modalbox_news .share{
	width: 100%;
	height: auto;
	clear: both;
	display: flex;
	align-items: center;
}
.grax_tm_modalbox_news .share span{
	font-family: "Poppins";
	color: #000;
	font-weight: 600;
	display: inline-block;
	padding-right: 20px;
}
.grax_tm_modalbox_news .share ul{
	margin: 0px;
	list-style-type: none;
}

.grax_tm_modalbox_news .share ul li{
	margin: 0px 10px 0px 0px;
	display: inline-block;
}
.grax_tm_modalbox_news .share ul li a{
	text-decoration: none;
	color: #000;
}













/*---------------------------------------------------*/
/*	09) GRAX CONTACT
/*---------------------------------------------------*/

.grax_tm_contact{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	position: relative;
	margin-bottom: 110px;
	padding-top: 140px;
}
.grax_tm_contact .contact_inner{
	width: 100%;
	height: auto;
	clear: both;
	display: flex;
	padding-top: 77px;
}
.grax_tm_contact .left{
	width: 50%;
}
.grax_tm_contact .left .text{
	width: 100%;
	float: left;
	margin-bottom: 40px;
}
.grax_tm_contact .info_list{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
}
.grax_tm_contact .info_list ul{
	margin: 0px;
	list-style-type: none;
}
.grax_tm_contact .info_list li{
	margin: 0px 0px 18px 0px;
	float: left;
	width: 100%;
	position: relative;
}
.grax_tm_contact .info_list ul li .list_inner{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	position: relative;
	padding-left: 27px;
}
.grax_tm_contact .info_list ul li span.first{
	min-width: 100px;
	display: inline-block;
}
.grax_tm_contact .info_list ul li span.second{
	font-weight: 400 !important;
	color: inherit !important;
}
.grax_tm_contact .info_list ul li span{
	font-family: "Poppins";
	font-weight: 600;
	color: #000;
}
.grax_tm_contact .info_list ul li a{
	text-decoration: none;
	color: inherit !important;
	transition: all .3s ease;
	display: inline-block;
	position: relative;
}
.grax_tm_contact .info_list ul li a:hover{color: #000;}
.grax_tm_contact .info_list ul li a:after{
	content: '';
    width: 0;
    height: 1px;
    position: absolute;
    left: auto;
    right: 0;
    bottom: 0;
    transition: width .6s cubic-bezier(.25,.8,.25,1) 0s;
    background: currentColor;
}
.grax_tm_contact .info_list ul li a:hover:after{
	width:100%;
	left:0;
	right:auto;
}
.grax_tm_contact .info_list ul li a:hover{color: #000 !important;}
.grax_tm_contact .info_list ul li .svg{
	width: 15px;
	height: 15px;
	position: absolute;
	left: 0px;
	top: 50%;
	transform: translateY(-50%);
	color: #000;
	margin-top: -1px;
}
.grax_tm_contact .right{
	width: 50%;
	padding-left: 50px;
}
.grax_tm_contact .fields{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
}
.grax_tm_contact .fields .first{
	width: 100%;
	float: left;
}
.grax_tm_contact .fields ul{
	margin: 0px;
	list-style-type: none;
}
.grax_tm_contact .fields ul li{
	width: 100%;
	margin: 0px 0px 30px 0px;
	float: left;
}
.grax_tm_contact .fields ul li input{
	width: 100%;
	border: 1px solid rgba(0,0,0,.2);
	background-color: #fff;
	border-radius: 5px;
}
.grax_tm_contact .fields ul li input:focus{
	outline: none;
	border: 1px solid rgba(0,0,0,.5);
}
.grax_tm_contact .fields .last textarea{
	width: 100%;
	border: 1px solid rgba(0,0,0,.2);
	height: 120px;
	resize: none;
	margin-bottom: 20px;
	background-color: #fff;
	border-radius: 5px;
}
.grax_tm_contact .fields .last textarea:focus{
	outline: none;
	border: 1px solid rgba(0,0,0,.5);
} 
.grax_tm_contact .empty_notice{
	color: #F52225;
	margin-bottom: 7px;
	display: none;
	text-align: left;
	font-weight: 500;
}
.grax_tm_contact .contact_error{
	color: #F52225;
	text-align: left;
	font-weight: 500;
}
.grax_tm_contact .returnmessage{
	color:#3A00FF;
	margin-bottom: 7px;
	text-align: left;
	font-weight: 500;
}
.grax_tm_contact .grax_tm_button a{
	display: block;
	text-align: center;
}

/*---------------------------------------------------*/
/*	10) GRAX COPYRIGHT
/*---------------------------------------------------*/

.grax_tm_copyright{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	background-color: #000;
	padding: 130px 0px 100px 0px;
	position: relative;
}
.grax_tm_copyright .copyright_inner{
	width: 100%;
	height: auto;
	clear: both;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.grax_tm_copyright .logo img{max-width: 175px;}
.grax_tm_copyright .social ul{
	margin: 0px;
	list-style-type: none;
}
.grax_tm_copyright .social ul li{
	margin: 0px 25px 0px 0px;
	display: inline-block;
}
.grax_tm_copyright .social ul li:last{margin-right: 0px;}
.grax_tm_copyright .social ul li a{
	text-decoration: none;
	color: #fff;
}
.grax_tm_copyright .social .svg{
	width: 17px;
	height: 17px;
}
.grax_tm_copyright .copy p{
	text-transform: uppercase;
	color: #fff;
	font-family: "Poppins";
	font-weight: 500;
	font-size: 14px;
}
.grax_tm_copyright .copy a{
	text-decoration: none;
	color: #fff;
}
.my_wave{
	position: absolute;
	top: 0;
	left: 0px;
	width: 100%;
}
.my_wave svg{
	overflow: hidden;
	vertical-align: middle;
  	height: 180px;
	width: 100%;
	fill: #fff;
}

/*---------------------------------------------------*/
/*	11) GRAX CURSOR
/*---------------------------------------------------*/

.mouse-cursor{
  position: fixed;
  left: 0;
  top: 0;
  pointer-events: none;
  border-radius: 50%;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  visibility: hidden;
}
.cursor-inner {
  margin-left: -3px;
  margin-top: -3px;
  width: 6px;
  height: 6px;
  z-index: 50;
  background-color: #000;
  -webkit-transition: width .3s ease-in-out, height .3s ease-in-out, margin .3s ease-in-out, opacity .3s ease-in-out;
  transition: width .3s ease-in-out, height .3s ease-in-out, margin .3s ease-in-out, opacity .3s ease-in-out;
}
.cursor-inner.cursor-hover {
  margin-left: -40px;
  margin-top: -40px;
  width: 80px;
  height: 80px;
  background-color: #000;
  opacity: .3;
}
.cursor-outer {
  margin-left: -15px;
  margin-top: -15px;
  width: 30px;
  height: 30px;
  border: 2px solid #000;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  z-index: 50;
  opacity: .5;
  -webkit-transition: all .08s ease-out;
  transition: all .08s ease-out;
}
.cursor-outer.cursor-hover{opacity: 0;}
.grax_tm_all_wrap[data-magic-cursor="hide"] .mouse-cursor{
	display: none;
	opacity: 0;
	visibility: hidden;
	position: absolute;
	z-index: -1111;
}

/*---------------------------------------------------*/
/*	12) GRAX PARTICLE EFFECT
/*---------------------------------------------------*/

.grax_tm_hero .particle_wrapper{
	position: relative;
	float: left;
	width: 100%;
	height: 100%;
}
#particles-js {
	width: 100%;
	height: 100%;
  	position: absolute;
  	z-index: 2;
}

/*---------------------------------------------------*/
/*	13) GRAX GLITCH EFFECT
/*---------------------------------------------------*/

.grax_tm_hero .glitch_wrap{
	position: relative;
	width: 100%;
	height:100%;
	float: left;
	overflow: hidden;
}
.glitch{
	position: absolute;
 	width: 100%;
 	height: 100%;
	top: 0;
 	left: 0;
	background-image: url("..//img/slider/2.jpg");
	background-size: cover;
	-webkit-background-size: cover;
	background-position: center;
	z-index: -1 !important;
	opacity: 1;
	transform: scale(1);
}
.glitch:before{
	content: "";
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
}

.grax_tm_hero .ripple{
	width: 100%;
	height: 100%;
	position: absolute;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	background-image: url(..//img/slider/2.jpg);
}
.grax_tm_hero .ripple:before{
	position: absolute;
	content: "";
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	background-color: rgba(0,0,0,.3);
	z-index: 1;
}
.container.water{visibility: hidden;}

.my_shape{
	position: absolute;
	width: 100%;
	left: 0px;
	bottom: -11px;
	z-index: 5;
}
.my_shape .svg{
	width: 100%;
	height: 100%;
}
.grax_tm_down.shape{
	bottom: 20%;
}
.my_shape svg{
	width: 100%;
	height: 100%;
	color: #fff;
}

.progressbar{
    position: fixed;
	height: 100px;
    width: 1px;
	bottom: 25px;
    right: -25px;
    background-color: rgba(0,0,0,.08);
    z-index: 10;
    transition: all .3s ease;
}
.progressbar.animate{
	right: 25px;
}

.progressbar .line {
	position: absolute;
    width: 1px;
	height: auto;
    background-color: rgba(0,0,0,.4);
}

.progressbar .text{
	position: absolute;
	top: -77%;
    left: 0px;
	font-family: "Poppins";
	font-size: 13px;
    transform: rotateZ(90deg);
	text-transform: uppercase;
    transform-origin: left;
	white-space: nowrap;
}
.progressbar a{
	text-decoration: none;
	color: #000;
}

/*---------------------------------------------------*/
/*  WAXON SETTINGS
/*---------------------------------------------------*/

.grax_tm_settings{
	position: fixed;
	z-index: 20;
	top: 20%;
	right: -200px;
	width: 200px;
	background-color: rgba(0,0,0,1.00);
	padding: 40px 20px 33px 30px;
	
	-webkit-transition: all .3s ease;
	   -moz-transition: all .3s ease;
	    -ms-transition: all .3s ease;
	     -o-transition: all .3s ease;
	        transition: all .3s ease;
}

/* DEBUG: Settings panelini her zaman görünür yapmak için bu satırı ekleyin */
/* .grax_tm_settings{right: 0px !important;} */

.grax_tm_settings.opened{
	right: 0px;
}
.grax_tm_settings .wrapper{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
}
.grax_tm_settings .icon{
	position: absolute;
	top: 0px;
	right: 100%;
	background-color: #000;
	padding: 12px 12px 4px 12px;
}
.grax_tm_settings .icon .svg{
	color: #fff;
	width: 25px;
	height: 25px;
	animation: fa-spin 2s infinite linear;
	filter: brightness(1);
	opacity: 1;
	display: block;
}

/* Inline SVG için özel stil */
.grax_tm_settings .icon svg.svg {
	fill: currentColor;
	color: #fff;
	width: 25px;
	height: 25px;
	animation: fa-spin 2s infinite linear;
}

/* Tüm SVG ikonları için genel stil - sadece img elementleri için (artık kullanılmıyor) */
/* img.svg {
	filter: brightness(0) invert(0);
}

body.dark img.svg {
	filter: brightness(0) invert(1);
}

body:not(.dark) img.svg {
	filter: brightness(0) invert(0);
}

.grax_tm_settings img.svg {
	filter: brightness(0) invert(1);
} */

/* Copyright kısmındaki SVG'ler için özel stil - artık kullanılmıyor */

/* Fallback icon if SVG doesn't load */
.grax_tm_settings .icon .svg:empty::before {
	content: "⚙";
	font-size: 20px;
	color: #fff;
	display: block;
	text-align: center;
	line-height: 25px;
}
.grax_tm_settings .link{
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	z-index: 1;
}

@-webkit-keyframes fa-spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}
@keyframes fa-spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}
.grax_tm_settings .title{
	color: #fff;
	font-family: "Montserrat";
	font-weight: 600;
	position: relative;
	display: inline-block;
}
.grax_tm_settings .title:before{
	position: absolute;
	content: "";
	width: 100%;
	height: 1px;
	background-color: rgba(255,255,255,.2);
	left: 0px;
	bottom: 0px;
}
.grax_tm_settings .colors{
	margin: 0px 0px 22px 0px;
	list-style-type: none;
	padding-top: 32px;
}
.grax_tm_settings .colors li{
	margin: 0px;
	display: inline-block;
}
.grax_tm_settings .colors li a{
	text-decoration: none;
	display: inline-block;
	width: 30px;
	height: 30px;
	border-radius: 100%;
}
.grax_tm_settings .direction{
	list-style-type: none;
	margin: 0px 0px 20px 0px;
}
.grax_tm_settings .direction li{
	margin: 0px 20px 0px 0px;
	display: inline-block;
}
.grax_tm_settings .direction li a{
	opacity: .4;
	text-decoration: none;
	color: #fff; 
}
.grax_tm_settings .direction li a.active{
	opacity: 1;
}
.grax_tm_settings .direction li .svg{
	width: 25px;
	height: 25px;
}
.grax_tm_settings .colors li.bl{
	display: inline-block;
}
.grax_tm_settings .colors li.wh{
	display: none;
}
body.dark .grax_tm_settings .colors li.bl,
.grax_tm_settings.changed .colors li.bl{
	display: none;
}
body.dark .grax_tm_settings .colors li.wh,
.grax_tm_settings.changed .colors li.wh{
	display: inline-block;
}
body.dark .grax_tm_settings,
.grax_tm_settings.changed{
	background-color: #fff;
}
body.dark .grax_tm_settings .icon,
.grax_tm_settings.changed .icon{
	background-color: #fff;
}
body.dark .grax_tm_settings .icon .svg,
.grax_tm_settings.changed .icon .svg{
	color: #000;
}
body.dark .grax_tm_settings .title,
.grax_tm_settings.changed .title{
	color: #000;
}
body.dark .grax_tm_settings .title:before,
.grax_tm_settings.changed .title:before{
	background-color: rgba(0,0,0,.5);
}
body.dark .grax_tm_settings .direction li a,
.grax_tm_settings.changed .direction li a{
	color: #000;
}
body.dark .grax_tm_settings .cursor li:nth-child(1) a,
.grax_tm_settings.changed .cursor li:nth-child(1) a{
	border-color: #000;
}
body.dark .grax_tm_settings .cursor li:nth-child(1) a:before,
.grax_tm_settings.changed .cursor li:nth-child(1) a:before{
	background-color: #000;
}
body.dark .grax_tm_settings .cursor li .svg,
.grax_tm_settings.changed .cursor li .svg{
	color: #000;
}
.grax_tm_settings .cursor{
	margin: 0px;
	list-style-type: none;
	padding-top: 15px;
}
.grax_tm_settings .cursor li{
	margin: 0px 20px 0px 0px;
	display: inline-block;
}
.grax_tm_settings .cursor li a{
	text-decoration: none;
	color: #fff;
	opacity: .4;
	font-weight: 600;
}
.grax_tm_settings .cursor li a.showme{
	opacity: 1;
}
.grax_tm_settings .cursor li:nth-child(1) a{
	width: 30px;
	height: 30px;
	border-radius: 100%;
	border: 2px solid #fff;
	position: relative;
	display: inline-block;
}
.grax_tm_settings .cursor li:nth-child(1) a:before{
	position: absolute;
	content: "";
	width: 4px;
	height: 4px;
	border-radius: 100%;
	background-color: #fff;
	transform: translate(-50%,-50%);
	left: 50%;
	top: 50%;
}
.grax_tm_settings .cursor li .svg{
	width: 25px;
	height: 25px;
	color: #fff;
}
.grax_tm_settings .cursor li:nth-child(2){
	position: relative;
	top: -2px;
}
.grax_tm_settings .effect{
	margin: 0px;
	list-style-type: none;
	padding-top: 15px;
	padding-bottom: 25px;
}
.grax_tm_settings .effect li{
	margin: 0px 0px 5px 0px;
	display: inline-block;
	width: 30px;
	height: 30px;
	line-height: 30px;
	text-align: center;
	border-radius: 100%;
	background-color: #fff;
	opacity: .4;
}
.grax_tm_settings .effect li a{
	text-decoration: none;
	color: #000;
	font-size: 13px;
	font-weight: 600;
	font-family: "Montserrat";
	display: block;
	position: relative;
	top: 2px;
}
.grax_tm_settings .effect li.selected{
	background-color: #fff;
	opacity: 1;
}

/*---------------------------------------------------*/
/*	GRAX INTRO
/*---------------------------------------------------*/

.grax_tm_intro_hero{
	width: 100%;
	height: 100vh;
	float: left;
	clear: both;
	position: relative;
	margin-bottom: 150px;
}
.grax_tm_intro_hero:before{
	position: absolute;
    content: "";
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;  
    background-image: url(..//img/patterns/light-honeycomb.png);
    background-repeat: repeat;
    opacity: .4; 
    z-index: 2;
}
.grax_tm_intro_hero:after{
	position: absolute;
    content: "";
    top: 0px;
   	bottom: 0px;
   	left: 0px;
   	right: 0px;
   	background-color: #000;
   	z-index: 1;
}
.grax_tm_intro_hero .content{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
	width: 100%;
	padding: 0px 20px;
	text-align: center;
}
.grax_tm_intro_hero .content .name{
	font-size: 50px;
	font-weight: 800;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 10px;
	margin-bottom: 20px;
}
.grax_tm_intro_hero .content p{
	color: #fff;
	font-size: 20px;
	letter-spacing: 2px;
	font-family: "Poppins";
	font-weight: 500;
}
.grax_tm_intro_hero .grax_tm_down{
	left: 50%;
	transform: translateX(-50%);
	bottom: 5.5%;
}
.grax_tm_intro_hero .fn_animation .character{top: 15px;}
.grax_tm_intro_hero .fn_animation .character.opened{top: 0px;}
.grax_tm_intro_content{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
}
.grax_tm_intro_content .title_holder{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	text-align: center;
}
.grax_tm_intro_content .title_holder h3{
	font-size: 30px;
	font-weight: 800;
	color: #000;
	text-transform: uppercase;
	letter-spacing: 10px;
}
.grax_tm_intro_content .demo_list{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	padding-top: 100px;
	margin-bottom: 70px;
}
.grax_tm_intro_content .demo_list ul{
	margin: 0px 0px 0px -50px;
	list-style-type: none;
}
.grax_tm_intro_content .demo_list ul li{
	margin: 0px 0px 50px 0px;
	float: left;
	width: 50%;
	padding-left: 50px;
	position: relative; 
}
.grax_tm_intro_content .demo_list ul li .list_inner{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	position: relative;
	text-align: center;
	transition: all .3s ease;
	top: 0px;
	transform: translateZ(0);
}
.grax_tm_intro_content .demo_list ul li .list_inner:hover{
	top: -10px;
}
.grax_tm_intro_content .demo_list ul li .list_inner h3{
	font-size: 20px; 
	font-weight: 600;
	padding-top: 20px;
}
.grax_tm_intro_content .demo_list ul li:last-child img{filter: blur(5px);}
.grax_tm_intro_fixed_price .pricing-info,
.grax_tm_intro_fixed_price .anim {text-decoration: none;
	color: #fff;
    font-family: "Montserrat";
    background-color: #e54b4b;
    position: fixed;
    font-size: 22px;
    text-align: center;
    z-index: 5;
    border-radius: 100%;
    height: 70px;
    width: 70px;
    line-height: 70px;
	display: inline-block;
	bottom: 80px;
    right: 50px;
		
	-webkit-transition: all 0.2s;
	   -moz-transition: all 0.2s;
	    -ms-transition: all 0.2s;
	     -o-transition: all 0.2s;
	        transition: all 0.2s;	
		
}

@-webkit-keyframes myAnimPrice {
    0% {
        -webkit-transform: scale(.1);
        transform: scale(.1);
        opacity: 0
    }
    50% {
        opacity: .3
    }
    100% {
        -webkit-transform: scale(2);
        transform: scale(2);
        opacity: 0
    }
}

@keyframes myAnimPrice {
    0% {
        -webkit-transform: scale(.1);
        transform: scale(.1);
        opacity: 0
    }
    50% {
        opacity: .3
    }
    100% {
        -webkit-transform: scale(2);
        transform: scale(2);
        opacity: 0
    }
}

.grax_tm_intro_fixed_price .anim:nth-child(1) {
    -webkit-animation: myAnimPrice 2s infinite;
    animation: myAnimPrice 2s infinite
}

.grax_tm_intro_fixed_price .anim:nth-child(2) {
    -webkit-animation: myAnimPrice 2s infinite .3s;
    animation: myAnimPrice 2s infinite .3s
}

.grax_tm_intro_fixed_price .anim:nth-child(3) {
    -webkit-animation: myAnimPrice 2s infinite .6s;
    animation: myAnimPrice 2s infinite .6s
}

/*---------------------------------------------------*/
/*	14) GRAX MEDIA QUERIES (FOR SMALL DEVIVES)
/*---------------------------------------------------*/

@media (max-width: 1400px) {
	.grax_tm_modalbox_news .box_inner{width: 900px;}
}
@media (max-width: 1200px) {
	.grax_tm_modalbox_news .box_inner{width: 100%;top: 0px;bottom: 0px;}
	.grax_tm_modalbox_news .close{position: absolute;top: 20px;left: auto;right: 20px;margin-left: 0px;}
	.grax_tm_modalbox_news .close .svg{color: #777;width: 25px;height: 25px;}
}
@media (max-width: 1040px) {
	#preloader{display: none;}
	.mouse-cursor{display: none;}
	.cursor-inner{display: none;}
	.cursor-inner.cursor-hover{display: none;}
	.cursor-outer{display: none;}
	.container{padding: 0px 20px;}
	.grax_tm_topbar{display: none;}
	.grax_tm_mobile_menu{display: block;}
	.grax_tm_hero .name{font-size: 55px;}
	.grax_tm_about .about_inner{display: block;}
	.grax_tm_about .left{padding-right: 0px;width: 100%;margin-bottom: 40px;}
	.grax_tm_about .right{padding-left: 0px;width: 100%;}
	.grax_tm_portfolio ul{margin-left: -20px;}
	.grax_tm_portfolio ul li{padding-left: 20px;margin-bottom: 20px;}
	.grax_tm_news .news_list ul{margin-left: -30px;}
	.grax_tm_news .news_list ul li{padding-left: 30px;margin-bottom: 30px;}
}
@media (max-width: 768px) {
	.grax_tm_title_holder h3{letter-spacing: 5px;}
	.grax_tm_hero .name{font-size: 45px;margin-bottom: 5px;}
	.grax_tm_hero .job{font-size: 17px;}
	.grax_tm_about .right .list ul{margin: 0px;}
	.grax_tm_about .right .list ul li{width: 100%;padding-left: 0px;}
	.grax_tm_portfolio ul li{width: 50%;}
	.grax_tm_progress_part .part_inner{display: block;}
	.grax_tm_progress_part .left{width: 100%;padding-right: 0px;float: left;margin-bottom: 20px;}
	.grax_tm_progress_part .right{width: 100%;padding-left: 0px;}
	.grax_tm_talk .talk_inner{display: block;}
	.grax_tm_talk .text{padding-right: 0px;margin-bottom: 30px;}
	.grax_tm_news .news_list ul li{width: 50%;}
	.grax_tm_news .news_list ul li .details .date span{margin-left: 0px;}
	.grax_tm_news .news_list ul li .details .date span:before{display: none;}
	.grax_tm_contact .contact_inner{display: block;}
	.grax_tm_contact .left{width: 100%;margin-bottom: 20px;float: left;}
	.grax_tm_contact .right{width: 100%;padding-left: 0px;}
	.grax_tm_contact .info_list ul li .list_inner p{white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
	.grax_tm_contact .info_list ul li span.first{min-width: 60px;}
	.grax_tm_contact .info_list ul li span.second{white-space: nowrap;}
	.grax_tm_copyright .copyright_inner{display: block;}
	.grax_tm_copyright .logo{margin-bottom: 17px;}
	.grax_tm_copyright .social{margin-bottom: 10px;}
	.grax_tm_modalbox_news .details .title{font-size: 25px;}
	.grax_tm_modalbox_news .description_wrap{padding: 20px;}
	
	.grax_tm_intro_fixed_price{display: none;}
	.grax_tm_intro_content .title_holder h3{letter-spacing: 4px;}
	.grax_tm_intro_content .demo_list ul{margin: 0px;}
	.grax_tm_intro_content .demo_list ul li{width: 100%;padding-left: 0px;}
}
@media (max-width: 480px) {
	.grax_tm_hero .name{font-size: 30px;}
	.grax_tm_hero .job{font-size: 15px;}
	.grax_tm_portfolio ul{margin: 0px;}
	.grax_tm_portfolio ul li{width: 100%;padding-left: 0px;}
	.grax_tm_news .news_list ul{margin: 0px;}
	.grax_tm_news .news_list ul li{width: 100%;padding-left: 0px;}
}

/* Copyright kısmındaki img SVG'ler için özel stil */

/* Copyright kısmındaki inline SVG'ler için özel stil */
.grax_tm_copyright svg.svg {
	fill: currentColor !important;
	color: #fff !important;
	width: 20px;
	height: 20px;
}

body.dark .grax_tm_copyright svg.svg {
	color: #fff !important;
	fill: currentColor !important;
}

/* Light mode'da copyright ikonlarının görünürlüğünü artır */
body:not(.dark) .grax_tm_copyright .social svg.svg {
	color: #fff !important;
	fill: currentColor !important;
	opacity: 1 !important;
}

/* Dark mode'da copyright ikonlarının görünürlüğünü artır */
body.dark .grax_tm_copyright .social svg.svg {
	color: #fff !important;
	fill: currentColor !important;
	opacity: 1 !important;
}

/* Settings panelindeki inline SVG'ler için özel stil */
.grax_tm_settings svg.svg {
	fill: currentColor !important;
	color: #fff !important;
	width: 25px;
	height: 25px;
}

/* Settings panelindeki direction SVG'leri için özel stil */
.grax_tm_settings .direction svg.svg {
	width: 25px;
	height: 25px;
	color: #fff !important;
	fill: currentColor !important;
}

/* Dark mode'da direction SVG'leri */
body.dark .grax_tm_settings .direction svg.svg {
	color: #000 !important;
	fill: currentColor !important;
}

/* Settings panelindeki cursor SVG'leri için özel stil */
.grax_tm_settings .cursor svg.svg {
	width: 25px;
	height: 25px;
	color: #fff !important;
	fill: currentColor !important;
}

/* Dark mode'da cursor SVG'leri */
body.dark .grax_tm_settings .cursor svg.svg {
	color: #000 !important;
	fill: currentColor !important;
}

/* Dark mode'da settings panel SVG'leri */
body.dark .grax_tm_settings svg.svg {
	color: #000 !important;
	fill: currentColor !important;
}

/* Light mode'da settings panel SVG'leri */
body:not(.dark) .grax_tm_settings svg.svg {
	color: #fff !important;
	fill: currentColor !important;
}

/* Modalbox close SVG için özel stil */
.grax_tm_modalbox_news .close svg.svg {
	width: 25px;
	height: 25px;
	color: #777 !important;
	fill: currentColor !important;
}

/* Dark mode'da modalbox close SVG */
body.dark .grax_tm_modalbox_news .close svg.svg {
	color: #777 !important;
	fill: currentColor !important;
}

/* Light mode'da modalbox close SVG */
body:not(.dark) .grax_tm_modalbox_news .close svg.svg {
	color: #777 !important;
	fill: currentColor !important;
}

/* Contact kısmındaki inline SVG'ler için özel stil */
.grax_tm_contact svg.svg {
	fill: currentColor !important;
	color: #000 !important;
	width: 20px;
	height: 20px;
}

/* Light mode'da contact SVG'leri */
body:not(.dark) .grax_tm_contact svg.svg {
	color: #000 !important;
	fill: currentColor !important;
}

/* Dark mode'da contact SVG'leri */
body.dark .grax_tm_contact svg.svg {
	color: #fff !important;
	fill: currentColor !important;
}

.grax_tm_hero .details,
.grax_tm_hero .details .name,
.grax_tm_hero .details .job {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  color: #111 !important;
  background: #fff0 !important;
  z-index: 9999 !important;
  font-size: 32px !important;
}

.details.sade-baslik { 
  display: none !important; 
  visibility: hidden !important; 
  opacity: 0 !important; 
  height: 0 !important; 
  overflow: hidden !important;
}
.details.animasyonlu-baslik { 
  display: flex !important; 
  visibility: visible !important; 
  opacity: 1 !important; 
  height: auto !important; 
}

@media (max-width: 768px) {
  .details.animasyonlu-baslik { 
    display: none !important; 
    visibility: hidden !important; 
    opacity: 0 !important; 
    height: 0 !important; 
    overflow: hidden !important;
  }
  .details.sade-baslik { 
    display: flex !important; 
    visibility: visible !important; 
    opacity: 1 !important; 
    height: auto !important; 
  }
}

/* Her iki başlık da blok olarak gelsin ve sadece biri görünsün */
.grax_tm_hero .container .details.animasyonlu-baslik,
.grax_tm_hero .container .details.sade-baslik {
  width: 100%;
  display: block !important;
  margin: 0 auto;
}

.grax_tm_hero .container .details.sade-baslik {
  display: none !important;
}

@media (max-width: 768px) {
  .grax_tm_hero .container .details.animasyonlu-baslik {
    display: none !important;
  }
  .grax_tm_hero .container .details.sade-baslik {
    display: block !important;
  }
}

/* Sade başlık için düzeltme */
.grax_tm_hero .container .details.sade-baslik {
  display: block !important;
  width: 100%;
  margin: 0 auto;
  text-align: center;
  color: #fff !important;
}

.grax_tm_hero .container .details.sade-baslik h3,
.grax_tm_hero .container .details.sade-baslik span {
  color: #fff !important;
  font-size: 2rem !important;
  font-weight: 700 !important;
  opacity: 1 !important;
  letter-spacing: 0.5px;
  line-height: 1.2;
  display: block;
  margin: 0 auto 8px auto;
  text-align: center;
  word-break: normal;
  white-space: normal;
}

/* Mobilde alt satırın bölünmesini engelle */
@media (max-width: 768px) {
  .grax_tm_hero .container .details.sade-baslik span {
    font-size: 1.2rem !important;
    font-weight: 400 !important;
    white-space: normal !important;
    word-break: keep-all !important;
    display: block !important;
    margin: 0 auto;
  }
}

/* Sadece masaüstünde animasyonlu başlık alt yazısı bölünmesin */
@media (min-width: 769px) {
  .details.animasyonlu-baslik .job {
    white-space: nowrap !important;
    word-break: keep-all !important;
  }
}
.grax_tm_hero .details.sade-baslik h3,
.grax_tm_hero .details.animasyonlu-baslik h3,
.grax_tm_hero .details.sade-baslik h3.fn_animation,
.grax_tm_hero .details.animasyonlu-baslik h3.fn_animation {
  color: #fff !important;
  opacity: 1 !important;
  filter: none !important;
  text-shadow: none !important;
}