@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: 100px; /* Keep the original max-width */
    transform: scale(1.5); /* Scale the logo up by 1.5x */
    transform-origin: left center; /* Ensure the logo scales from the left side */}
.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: #192f56;}
.grax_tm_topbar .menu ul li a:hover{color: #192f56;}
.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; /* Keep the original max-width */
    transform: scale(1.5); /* Scale the logo up by 1.5x */
    transform-origin: left center; /* Ensure the logo scales from the left side */}

/*---------------------------------------------------*/
/*	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);}

@font-face {
    font-family: 'Glamora';
    src: url('/css/font/Glamora.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

/* Apply only to the "Diamonds Made For You" text */
.grax_tm_hero .fn_animation.name {
    font-family: 'Glamora', sans-serif;
    font-weight: normal; /* Adjust if needed */
	letter-spacing: 9px; /* Adjust the value as needed */
}

.fn_animation{
	margin-right: 8px;
	white-space: pre-wrap;
	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);
    -ms-filter: "progid:DXImageTransform.Microsoft.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: 150px;
	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: #192f56;
	border: 2px solid #192f56;
    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_video_section {
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	padding: 135px 0px 140px 0px;
  }
  
  .grax_tm_video_section span{color: #192f56;	}
  .grax_tm_video_section .part_inner {
	width: 100%;
	height: auto;
	clear: both;
	display: flex;
	font-family: "Mulish";
  }
  
  .grax_tm_video_section .left {
	width: 50%;
	padding-right: 50px;
  }
  
  .grax_tm_video_section .left h3 {
	font-weight: 600;
	margin-bottom: 27px;
  }
  
  .grax_tm_video_section .right {
	width: 50%;
	padding-left: 50px;
  }
  
  .grax_tm_video_section .video_box {
	width: 100%;
	max-width: 500px;
	height: 280px;
	background: #000;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.2);
  }
  
  .grax_tm_video_section .video_content {
	width: 100%;
	height: 100%;
	object-fit: cover;
  }
  /* Mobile Responsive Styling */
@media screen and (max-width: 768px) {
	.grax_tm_video_section .part_inner {
	  flex-direction: column;
	}
  
	.grax_tm_video_section .left {
	  width: 100%;
	  padding-right: 0;
	  order: 1;
	}
  
	.grax_tm_video_section .right {
	  width: 100%;
	  padding-left: 0;
	  order: 2;
	  margin-top: 15px;
	}
  
	.grax_tm_video_section .left p {
	  order: 3;
	  margin-top: 20px;
	}
  }

.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:#192f56;
	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: #192f56;	}
.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: rgba(0, 0, 0, 0.5);
	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;
}
.white-text {
    color: white;
}
.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_news .news_list ul li .list_inner {
    width: 100%;
    height: 100%;
    clear: both;
    float: left;
    position: relative;
    overflow: hidden;
}

.grax_tm_news .news_list ul li .list_inner .video_wrapper {
    width: 100%;
    height: 100%;
    position: relative;
}

.grax_tm_news .news_list ul li .list_inner .video_wrapper video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the video fills the space */
    cursor: pointer;
}

/* .grax_tm_news .news_list ul li .list_inner .grax_tm_full_link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    background: transparent;
} */

.list_inner {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.video_wrapper {
    width: 100%;
    height: 100%;
    position: relative;
}

.video_wrapper video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the video fills the space */
    cursor: pointer;
}

.grax_tm_full_link {
    display: none; /* Hide the full link to prevent unwanted page popups */
}

.video-link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    background: transparent;
}

.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: #192f56;}
.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: #192f56;}
.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 #192f56;
	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: #192f56;}
.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;
}
@media (max-width: 768px) {
    .grax_tm_contact .info_list ul li {
        display: flex;
        flex-direction: column;
        align-items: center; /* Center everything horizontally */
        text-align: center;
        margin-bottom: 20px;
    }

    .grax_tm_contact .info_list ul li .list_inner {
        display: flex;
        flex-direction: column; /* Stack icon+header and details vertically */
        align-items: center; /* Center everything horizontally */
        width: 100%;
    }

    .grax_tm_contact .info_list ul li .icon-heading {
        display: flex;
        flex-direction: row; /* Place icon and header side by side */
        align-items: center; /* Vertically center icon and header */
        justify-content: center; /* Horizontally center icon and header */
        gap: 8px; /* Space between icon and header */
        margin-bottom: 8px; /* Space between icon+header and details */
    }

    .grax_tm_contact .info_list ul li .svg {
        width: 22px;
        height: 22px;
    }

    .grax_tm_contact .info_list ul li p {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 0;
    }

    .grax_tm_contact .info_list ul li span.first {
        font-weight: 600;
        display: inline-block; /* Ensure header aligns with icon */
    }

    .grax_tm_contact .info_list ul li span.second {
        font-weight: 400;
        color: #555;
        display: block;
        margin-top: 4px; /* Space between header and details */
    }
}
.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 .google-map {
    width: 120%;
    height: 330px;  /* Adjust this height as per the original form */
    border-radius: 5px;
    overflow: hidden;
}

.grax_tm_contact .fields .google-map iframe {
    width: 100%;
    height: 100%;
    border-radius: 5px;
}

.grax_tm_contact .fields .google-map {
    width: 120%;
    height: 330px; /* Adjust this height as per the original form */
    border-radius: 5px;
    overflow: hidden;
    display: flex;
    align-items: center; /* Center the text vertically */
    justify-content: center; /* Center the text horizontally */
    background-color: #f9f9f9; /* Add a light background for better readability */
    padding: 20px; /* Add padding for spacing */
    box-sizing: border-box; /* Ensure padding is included in the width/height */
}

.grax_tm_contact .fields .google-map .visit-paragraph {
    /* font-family: 'Glamora', sans-serif;  */
    font-size: 18px; /* Adjust font size as needed */
    line-height: 1.6; /* Improve readability */
    color: #333; /* Dark gray for better contrast */
    text-align: center; /* Center-align the text */
}

@media (max-width: 768px) {
    .grax_tm_contact .fields .google-map {
        width: 100%; /* Ensure it fits within the screen */
        height: auto; /* Adjust height automatically */
        padding: 15px; /* Adjust padding for better spacing */
    }

    .grax_tm_contact .fields .google-map .visit-paragraph {
        font-size: 16px; /* Reduce font size for smaller screens */
        line-height: 1.5; /* Adjust line height for readability */
        text-align: center;
        padding: 10px;
    }
}

.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: #192f56;
	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: 150px;}
.grax_tm_copyright .social ul {
    margin: 0px;
    list-style-type: none;
    padding: 0;
}

.grax_tm_copyright .social ul li {
    margin: 0px 25px 0px 0px;
    display: inline-block;
    text-align: center; /* Aligns the label under the icon */
}

.grax_tm_copyright .social ul li:last-child {
    margin-right: 0px;
}

.grax_tm_copyright .social ul li a {
    text-decoration: none;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.grax_tm_copyright .social .svg {
    width: 25px; /* Increase the icon size */
    height: 25px;
    margin-bottom: 5px; /* Adds space between icon and text */
}

.grax_tm_copyright .social .social-label {
    font-size: 12px; /* Adjust text size */
    color: #fff;
    margin-top: 5px;
    display: block;
}

.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;
}
@media (max-width: 768px) {
    .grax_tm_copyright .copyright_inner {
        flex-direction: column; /* Stack elements vertically */
        align-items: center; /* Center align content */
        text-align: center; /* Ensure text is centered */
    }

    .grax_tm_copyright .logo {
        margin-bottom: 20px; /* Add space below logo */
    }

    .grax_tm_copyright .social {
        margin-bottom: 20px; /* Add space below social icons */
    }

    .grax_tm_copyright .social ul li {
        margin: 0px 15px; /* Reduce spacing between icons */
    }

    .grax_tm_copyright .social .svg {
        width: 30px; /* Slightly increase icon size for better visibility */
        height: 30px;
    }

    .grax_tm_copyright .social .social-label {
        font-size: 14px; /* Increase font size for better readability */
    }

    .grax_tm_copyright .copy {
        margin-top: 20px; /* Add space above the copyright text */
    }
}

/*---------------------------------------------------*/
/*	certificates
/*---------------------------------------------------*/

.grax_tm_certifications {
    width: 100%;
    background-color: #fff;
    padding: 50px 0;
    text-align: center;
}

.grax_tm_certifications .certifications-title {
    color: #fff;
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 30px;
    text-transform: uppercase;
}

/* Certification Grid */
.grax_tm_certifications .certifications-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
    justify-content: center;
    align-items: stretch;
}

/* Certification Box */
.grax_tm_certifications .certification-item {
    background-color: #192f56;
    border-radius: 10px;
    text-align: center;
    width: 100%;
    aspect-ratio: 1 / 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Icon Inside Box */
.grax_tm_certifications .certification-item img {
    width: 60px;
    height: auto;
    flex-shrink: 0;
}

/* Text Inside Box */
.grax_tm_certifications .certification-item span {
    display: block;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    word-wrap: break-word;
    max-width: 90%;
    text-align: center;
}

/* === Hover Effects for PC Screens === */
@media (min-width: 1025px) {
    .grax_tm_certifications .certification-item:hover {
        transform: translateY(-5px) scale(1.05);
        box-shadow: 0px 8px 20px rgba(255, 255, 255, 0.2);
        background-color: #192f56;
    }
}

/* Responsive for Mobile */
@media (max-width: 1024px) {
    .grax_tm_certifications .certifications-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .grax_tm_certifications .certifications-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .grax_tm_certifications .certification-item {
        height: 140px; 
        justify-content: center; 
    }

    .grax_tm_certifications .certification-item img {
        width: 50px;
    }

    .grax_tm_certifications .certification-item span {
        font-size: 12px;
        max-width: 80%;
    }
}


/*---------------------------------------------------*/
/*	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;
}
.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;
}
.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: #192f56;
    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_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;}
}

.whatsapp-button {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 60px;
    height: 60px;
    background-color: #25d366;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.whatsapp-button img {
    width: 35px;
    height: 35px;
}

.whatsapp-button:hover {
    transform: scale(1.1);
    background-color: #128C7E;
}