@charset "utf-8";

/*
/*	Copyright (c) 2023 Marketify
/*	Author: Marketify
/*	This file is made for CURRENT TEMPLATE


01)	JARA BASE
02) JARA MOBILE MENU
03) JARA SIDEBAR
04) JARA HOME
05) JARA ABOUT
06) JARA SERVICES
07) JARA PORTFOLIO
08) JARA PARTNERS
09) JARA TESTIMONIALS
10) JARA NEWS
11) JARA CONTACT
12) JARA MODALBOXES
13) JARA ONE PAGE
14) JARA MAGIC CURSOR
15) JARA MEDIA QUERIES (FOR SMALL DEVICES)


/*---------------------------------------------------*/
/*	01) JARA BASE
/*---------------------------------------------------*/

a{
	text-decoration: none;
}
ul{
	list-style-type: none;
}
:root{
    --main-color: rgba(22,21,19,0.80);
    --heading-color: #161513;
    --font-roboto: 'Roboto', sans-serif;
    --font-syne: 'Syne', sans-serif;;
	--main-gradient: linear-gradient(270deg, #FF9D42 0%, #FF6069 50.91%, #B16CEA 100%);
	
}
html {
	overflow-x: hidden;
	padding: 0px;
	margin: 0px;	
}
body{
	font-family: var(--font-roboto);
	font-size: 16px;
	line-height: 24px;
	letter-spacing: 0px;
	word-wrap: break-word;
	font-weight: 400;
	background-color: #fff;
	color: var(--main-color);
	overflow-x: hidden;
}

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

::placeholder { /* Most modern browsers support this now. */
   color: rgba(85,82,124,.6);
}

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

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

.jara_tm_all_wrap{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	position: relative;
}
.jara_tm_all_wrap,
.jara_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+ */
}
.jara_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: #000;
    -webkit-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}
#preloader:after{
    left: auto;
    right: 0;
}
#preloader .loader_line{
    margin: auto;
    width: 1px;
    height: 250px;
    position: relative;
    overflow: hidden;
    -webkit-transition: all 0.8s ease 0s;
    -o-transition: all 0.8s ease 0s;
    transition: all 0.8s ease 0s;
}
.loader_line:before{
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 1px;
    height: 0%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    background-color: #fff;
    -webkit-animation: lineheight 1000ms ease-in-out 0s forwards;
    -o-animation: lineheight 1000ms ease-in-out 0s forwards;
    animation: lineheight 1000ms ease-in-out 0s forwards;
}
.loader_line:after{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 1px;
    height: 100%;
    background-color: #999999;
    -webkit-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    -o-transform: translateY(-100%);
    transform: translateY(-100%);
    -webkit-animation: lineround 1200ms linear 0s infinite;
    -o-animation: lineround 1200ms linear 0s infinite;
    animation: lineround 1200ms linear 0s infinite;
    animation-delay: 2000ms;
}

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

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

/*hiding all*/
.preloaded .loader_line:after{
    opacity: 0;
}
.preloaded  .loader_line{
    opacity: 0;
    height: 100%!important;
}
.preloaded:before,
.preloaded:after{
    -webkit-animation: preloadedzero 300ms ease-in-out 500ms forwards;
    -o-animation: preloadedzero 300ms ease-in-out 500ms forwards;
    animation: preloadedzero 300ms ease-in-out 500ms forwards;
}
@keyframes preloadedzero{
    0%{
        width: 50%;
    }
    100%{
        width: 0%;
    }
}
.container{
	max-width: 1210px;
	width:100%;
	margin-left: auto;
	margin-right: auto;
	height:auto;
	padding:0px 20px;
	position:relative;
	clear:both;
}

/*---------------------------------------------------*/
/*	02) JARA MOBILE MENU
/*---------------------------------------------------*/

.jara_tm_mobile_menu{
	width: 100%;
	height: auto;
	position: fixed;
	top: -200px;
	left: 0px;
	display: none;
	z-index: 10;
	
	-webkit-transition: all .3s ease;
	   -moz-transition: all .3s ease;
	    -ms-transition: all .3s ease;
	     -o-transition: all .3s ease;
	        transition: all .3s ease;
}
.jara_tm_all_wrap.ready .jara_tm_mobile_menu{
	top: 0px;
}
.jara_tm_mobile_menu .mobile_menu_inner{
	width: 100%;
	height: auto;
	float: left;
	clear: both;
	background-color: #000;
	border-bottom: 1px solid rgba(255,255,255,.2);
	padding: 10px 20px 10px 20px;
}
.jara_tm_mobile_menu .mobile_in{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.jara_tm_mobile_menu .mobile_in .logo img{
	max-width: 90px;
	max-height: 70px;
}
.jara_tm_mobile_menu .trigger{
	line-height: 0;
}
.jara_tm_mobile_menu .dropdown{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	background-color: #000;
	display: none;
}
.jara_tm_mobile_menu .dropdown .dropdown_inner{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	padding: 20px;
}
.jara_tm_mobile_menu .dropdown .dropdown_inner > ul{
	margin: 0px;
	list-style-type: none;
}
.jara_tm_mobile_menu .dropdown .dropdown_inner > ul > li{
	margin: 0px;
	float: left;
	width: 100%;
}
.jara_tm_mobile_menu .dropdown .dropdown_inner > ul > li a{
	text-decoration: none;
	color: #fff;
	display: inline-block;
	padding: 0px 0px;
	font-family: var(--font-syne);
	font-weight: 500;
}
.jara_tm_mobile_menu .hamburger-inner, 
.jara_tm_mobile_menu .hamburger-inner:after, 
.jara_tm_mobile_menu .hamburger-inner:before{
	width: 30px;
	height: 2px;
	background-color: #fff;
}
.jara_tm_mobile_menu .hamburger.is-active .hamburger-inner, 
.jara_tm_mobile_menu .hamburger.is-active .hamburger-inner:after, 
.jara_tm_mobile_menu .hamburger.is-active .hamburger-inner:before{
	background-color: #fff;
}
.jara_tm_mobile_menu .hamburger-box{
	width: 30px;
}
.jara_tm_mobile_menu .hamburger{
	padding: 0px;
}
.jara_tm_mobile_menu .social{
	width: 100%;
	float: left;
	border-top: 1px solid rgba(255,255,255,.2);
	padding-top: 30px;
	margin-top: 30px;
}
.jara_tm_mobile_menu .social ul{
	margin: 0px;
	padding: 0px;
}
.jara_tm_mobile_menu .social ul li{
	margin: 0px 13px 0px 0px;
	display: inline-block;
}
.jara_tm_mobile_menu .social ul li:last-child{
	margin-right: 0px;
}
.jara_tm_mobile_menu .social ul li a{
	text-decoration: none;
	color: #fff;
}

/*---------------------------------------------------*/
/*	03) JARA HEADER
/*---------------------------------------------------*/

.jara_tm_header{
	position: fixed;
	top: -200px;
	left: 0px;
	right: 0px;
	z-index: 10;
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	background-color: #000;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0px 50px;
	
	-webkit-transition: all .3s ease;
	   -moz-transition: all .3s ease;
	    -ms-transition: all .3s ease;
	     -o-transition: all .3s ease;
	        transition: all .3s ease;
}
.jara_tm_all_wrap.ready .jara_tm_header{
	top: 0px;
}
.jara_tm_header .logo a{
	display: inline-block;
}
.jara_tm_header .logo img{
	max-width: 200px;
	max-height: 50px;
}
.jara_tm_header .menu ul{
	margin: 0px;
	padding: 0px;
}
.jara_tm_header .menu ul li{
	margin: 0px 75px 0px 0px;
	display: inline-block;
}
.jara_tm_header .menu ul li:last-child{
	margin-right: 0px;
}
.jara_tm_header .menu ul li a{
	text-decoration: none;
	color: #fff;
	display: inline-block;
	padding: 30px 0px;
	font-family: var(--font-syne);
	font-weight: 500;
}
.jara_tm_header .social ul{
	margin: 0px;
	padding: 0px;
}
.jara_tm_header .social ul li{
	margin: 0px 13px 0px 0px;
	display: inline-block;
}
.jara_tm_header .social ul li:last-child{
	margin-right: 0px;
}
.jara_tm_header .social ul li a{
	text-decoration: none;
	color: #fff;
}

/*---------------------------------------------------*/
/*	04) JARA HERO
/*---------------------------------------------------*/

.jara_tm_hero{
	width: 100%;
	min-height: 100vh;
	clear: both;
	float: left;
	background-color: #F3F3F3;
}
.jara_tm_hero .content{
	width: 100%;
	height: auto;
	display: flex;
	align-items: center;
	padding-top: 150px;
}
.jara_tm_hero .left{
	width: 50%;
	opacity: 0;
	transform: translateX(-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;
}
.jara_tm_all_wrap.ready .jara_tm_hero .left{
	transition-delay: .5s;
	opacity: 1;
	transform: translateX(0);
}
.jara_tm_hero .right{
	width: 50%;
	opacity: 0;
	transform: translateX(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;
}
.jara_tm_all_wrap.ready .jara_tm_hero .right{
	transition-delay: .5s;
	opacity: 1;
	transform: translateX(0);
}
.jara_tm_hero .right .in{
	display: inline-block;
	position: relative;
	float: right;
}
.jara_tm_hero .right .in > img{
	max-height: 650px;
	max-width: 550px;
}
.jara_tm_hero .hello{
	width: 100%;
	float: left;
	position: relative;
	margin-bottom: 6px;
}
.jara_tm_hero .hello span{
	font-family: var(--font-syne);
	font-weight: 700;
	color: var(--heading-color);
	font-size: 20px;
	line-height: 26px;
	padding-left: 50px;
}
.jara_tm_hero .hello .svg{
	position: absolute;
	left: 0px;
	top: 50%;
	transform: translateY(-50%);
	width: 40px;
	height: 40px;
}
.jara_tm_hero .title{
	width: 100%;
	float: left;
	margin-bottom: 20px;
}
.jara_tm_hero .title h2{
	color: var(--heading-color);
	font-family: Syne;
	font-size: 120px;
	font-style: normal;
	font-weight: 700;
	line-height: 115px;
}
.jara_tm_hero .title h3{
	background: var(--main-gradient);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	font-family: Syne;
	font-size: 80px;
	font-style: normal;
	font-weight: 700;
	line-height: 88px;
}
.jara_tm_hero .subtitle{
	width: 100%;
	float: left;
	margin-bottom: 40px;
}
.jara_tm_hero .subtitle p{
	color: var(--heading-color);
	font-variant-numeric: lining-nums proportional-nums;
	font-family: var(--font-syne);
	font-size: 32px;
	font-style: normal;
	font-weight: 700;
	line-height: 40px; 
}
.jara_tm_hero .buttons{
	width: 100%;
	float: left;
	display: flex;
}
.jara_tm_hero .buttons .jara_tm_button{
	width: auto;
}
.jara_tm_button{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
}
.jara_tm_button[data-text-align="left"]{text-align: left;}
.jara_tm_button[data-text-align="center"]{text-align: center;}
.jara_tm_button[data-text-align="right"]{text-align: right;}
.jara_tm_button a{
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	display: inline-block;
	padding: 16px 40px;
	background: var(--main-gradient);
	transition: background 3s ease-out;
}
.jara_tm_button a:hover{
	background: linear-gradient(270deg, #B16CEA 0%, #FF6069 50.91%, #FF9D42 100%);
}
.jara_tm_button_border{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
}
.jara_tm_button_border a{
	color: var(--heading-color);
	text-align: center;
	font-variant-numeric: lining-nums proportional-nums;
	font-size: 15px;
	font-weight: 600;
	display: inline-block;
	padding: 15px 40px;
	border: 1px solid #161513;
	
	-webkit-transition: all .3s ease;
	   -moz-transition: all .3s ease;
	    -ms-transition: all .3s ease;
	     -o-transition: all .3s ease;
	        transition: all .3s ease;
}
.jara_tm_button_border a:hover{
	color: #fff;
	background-color: #161513;
}
.jara_tm_hero .jara_tm_button_border{
	width: auto;
	margin-left: 15px;
}
.jara_tm_hero .play{
	width: 136px;
	height: 136px;
	border-radius: 100%;
	flex-shrink: 0;
	background: var(--main-gradient);
	z-index: 1;
	position: absolute;
	bottom: 0px;
	left: 50px;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	-ms-align-items: center;
	align-items: center;
	justify-content: center;
}
.jara_tm_hero .play .svg{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 20px;
	height: 20px;
	margin-left: 3px;
	
	-webkit-transition: all .3s ease;
	   -moz-transition: all .3s ease;
	    -ms-transition: all .3s ease;
	     -o-transition: all .3s ease;
	        transition: all .3s ease;
}
.jara_tm_hero .play .animate_image{
	animation: animCircle 15s infinite linear;
}
@keyframes animCircle{
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}
.jara_tm_full_link{
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	z-index: 5;
}
.jara_tm_hero .play .jara_tm_full_link{
	border-radius: 100%;
}
.tm_partners{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	display: flex;
	align-items: center;
	margin-top: 75px;
	padding-bottom: 50px;
	transform: translateY(30px);
	opacity: 0;
	
	-webkit-transition: all .3s ease;
	   -moz-transition: all .3s ease;
	    -ms-transition: all .3s ease;
	     -o-transition: all .3s ease;
	        transition: all .3s ease;
}
.jara_tm_all_wrap.ready .tm_partners{
	opacity: 1;
	transform: translateY(0);
}
.tm_partners .text{
	width: 15%;
}
.tm_partners .text p{
	font-weight: 500;
	font-size: 18px;
	color: rgba(22,21,19,.6);
}
.tm_partners .list{
	width: 85%;
	overflow: hidden;
	position: relative;
}
.tm_partners .list:before{
	position: absolute;
	content: "";
	left: 0px;
	top: 0px;
	bottom: 0px;
	width: 250px;
	z-index: 2;
	background: rgb(243,243,243);
	background: -moz-linear-gradient(90deg, rgba(243,243,243,1) 0%, rgba(243,243,243,0) 100%);
	background: -webkit-linear-gradient(90deg, rgba(243,243,243,1) 0%, rgba(243,243,243,0) 100%);
	background: linear-gradient(90deg, rgba(243,243,243,1) 0%, rgba(243,243,243,0) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f3f3f3",endColorstr="#f3f3f3",GradientType=1);
}
.tm_partners .list:after{
	position: absolute;
	content: "";
	right: 0px;
	top: 0px;
	bottom: 0px;
	width: 250px;
	z-index: 2;
	background: rgb(243,243,243);
	background: -moz-linear-gradient(270deg, rgba(243,243,243,1) 0%, rgba(243,243,243,0) 100%);
	background: -webkit-linear-gradient(270deg, rgba(243,243,243,1) 0%, rgba(243,243,243,0) 100%);
	background: linear-gradient(270deg, rgba(243,243,243,1) 0%, rgba(243,243,243,0) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f3f3f3",endColorstr="#f3f3f3",GradientType=1);
}
.tm_partners .list ul{
	margin: 0px;
	padding: 0px;
	display: flex;
}
.tm_partners .list ul li{
	margin: 0px 20px 0px 0px;
	padding: 0px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.tm_partners .list ul li img{
	max-width: 200px;
	max-height: 100px;
}
.tm_partners .list ul li:last-child{
	margin-right: 0px;
}

/*---------------------------------------------------*/
/*	05) JARA ABOUT
/*---------------------------------------------------*/

.jara_tm_about{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	background-color: #fff;
	padding: 140px 0px 145px 0px;
}
.jara_tm_about .about_inner{
	width: 100%;
	display: flex;
	align-items: center;
}
.jara_tm_about .experience{
	width: 30%;
}
.jara_tm_about .in{
	filter: drop-shadow(-3px 7px 0px #000);
}
.jara_tm_about .inside{
	width: 280px;
	height: 420px;
	clip-path: ellipse(50% 50% at 50% 50%);
	background: var(--main-gradient);
	transform: rotate(-15deg);
	display: flex;
	flex-direction: column;
	justify-content:center;
	align-items: center;
	text-align: center;
}
.jara_tm_about .inside h3{
	transform: rotate(15deg);
	font-size: 120px;
	color: #fff;
	line-height: 124px;
	margin-left: 40px;
}
.jara_tm_about .inside h6{
	transform: rotate(15deg);
	font-size: 20px;
	color: #fff;
}
.text_gradient{
	position: relative;
}
.text_gradient .inn{
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	width: 0px;
	background: var(--main-gradient);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	font-variant-numeric: lining-nums proportional-nums;
	
	-webkit-transition: all .2s ease;
	   -moz-transition: all .2s ease;
	    -ms-transition: all .2s ease;
	     -o-transition: all .2s ease;
	        transition: all .2s ease;

}
.text_gradient .or{
	opacity: .5;
	
	-webkit-transition: all .2s ease;
	   -moz-transition: all .2s ease;
	    -ms-transition: all .2s ease;
	     -o-transition: all .2s ease;
	        transition: all .2s ease;
}
.text_gradient .or.disable{
	opacity: 0;
}
.inn.waypoint_effect.load{
	width: 100%;
}
.text_gradient{
	display: inline;
	background: var(--main-gradient);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: rgba(0,0,0,0.1);
	font-variant-numeric: lining-nums proportional-nums;
	background-repeat: no-repeat;
	background-size: 0% 100%;
	
	-webkit-transition: all .1s ease;
	   -moz-transition: all .1s ease;
	    -ms-transition: all .1s ease;
	     -o-transition: all .1s ease;
	        transition: all .1s ease;
}
.text_hover_gradient{
	position: relative;
	display: inline;
	background-image: var(--main-gradient);
    background-position: 0% 100%;
    background-repeat: no-repeat;
    background-size: 0% 2px;
    transition: background-size .5s;
}
.text_hover_gradient:after{
	content: '';
	position: absolute;
	top: -5px;
	left: -5px;
	right: -5px;
	bottom: -5px;
}
.text_hover_gradient:hover,
.jara_tm_header .menu ul li.current a{
	background-size: 100% 2px;
}
.jara_tm_about .text{
	width: 50%;
	padding: 0px 30px;
}
.jara_tm_about .text p{
	font-size: 44px;
	line-height: 54px;
	font-weight: 700;
	font-family: var(--font-syne);
	color: var(--heading-color);
	font-variant-numeric: lining-nums proportional-nums;
	margin-bottom: 30px;
}
.jara_tm_about .counter{
	padding-left: 50px;
}
.jara_tm_about .counter ul{
	margin: 0px;
	padding: 0px;
}
.jara_tm_about .counter ul li{
	margin: 0px 0px 40px 0px;
	width: 100%;
	float: left;
}
.jara_tm_about .counter ul li:last-child{
	margin-right: 0px;
}
.jara_tm_about .counter{
	width: 20%;
}
.jara_tm_about .counter h3{
	color: var(--heading-text);
	font-family: Syne;
	font-size: 44px;
	font-style: normal;
	font-weight: 700;
	line-height: 54px; 
	margin-bottom: 8px;
}
.jara_tm_about .counter .text{
	color: var(--heading-text);
	font-family: var(--font-roboto);
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 20px; 
}

/*---------------------------------------------------*/
/*	06) JARA SERVICE
/*---------------------------------------------------*/

.jara_tm_services{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	background: var(--main-gradient);
	padding: 115px 0px;
}
.jara_tm_services .service_inner{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
}
.jara_tm_services .jara_tm_title h3{
	color: #fff;
}
.jara_tm_flex_title{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
}
.jara_tm_title{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
}
.jara_tm_title[data-text-align="left"]{text-align: left;}
.jara_tm_title[data-text-align="center"]{text-align: center;}
.jara_tm_title[data-text-align="right"]{text-align: right;}
.jara_tm_title h3{
	font-size: 64px;
	line-height: 72px; 
}
.jara_tm_flex_title .mail a{
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	display: inline-block;
	position: relative;
	padding-left: 25px;
}
.jara_tm_flex_title .mail i{
	position: absolute;
	left: 0px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 16px;
}
.jara_tm_services .list{
	width: 100%;
	float: left;
	margin-top: 50px;
}
.jara_tm_services .list > ul{
	margin: 0px 0px 0px -30px;
	padding: 0px;
	display: flex;
	flex-wrap: wrap
}
.jara_tm_services .list > ul > li{
	margin: 0px 0px 25px 0px;
	padding-left: 30px;
	width: 25%;
	float: left;
}
.jara_tm_services .list .in{
	position: relative;
	z-index: 1;
}
.jara_tm_services .list .list_inner{
	width: 100%;
	height: 100%;
	clear: both;
	float: left;
	position: relative;
	padding: 50px 30px 65px 30px;
}
.jara_tm_services .list .list_inner:before{
	position: absolute;
	content: "";
	top: 0px;
	left: 0px;
	right: 0px;
	height: 0px;
	background-color: #fff;
	
	-webkit-transition: all .5s ease;
	   -moz-transition: all .5s ease;
	    -ms-transition: all .5s ease;
	     -o-transition: all .5s ease;
	        transition: all .5s ease;
}
.jara_tm_services .list > ul > li.waypoint_effect.load .list_inner:before{
	height: 100%;
}
.jara_tm_services .list .icon{
	display: inline-block;
	width: 60px;
	height: 60px;
	border-radius: 12px;
	background: var(--main-gradient);
	position: relative;
	margin-bottom: 25px;
	opacity: 0;
	transform: translateY(20px);
	
	-webkit-transition: all .3s ease;
	   -moz-transition: all .3s ease;
	    -ms-transition: all .3s ease;
	     -o-transition: all .3s ease;
	        transition: all .3s ease;
}
.jara_tm_services .list > ul > li.waypoint_effect.load .icon{
	transform: translateY(0);
	opacity: 1;
	transition-delay: .5s;
}
.jara_tm_services .list .icon .svg{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate3d(-50%,-50%,0);
	width: 24px;
	height: 24px;
	display: 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;
}
.jara_tm_services .list .list_inner:hover .icon .svg{
	transform: translate3d(-50%,-50%,0) rotate(360deg);
}
.jara_tm_services .list .title{
	width: 100%;
	float: left;
	margin-bottom: 11px;
	opacity: 0;
	transform: translateY(20px);
	
	-webkit-transition: all .3s ease;
	   -moz-transition: all .3s ease;
	    -ms-transition: all .3s ease;
	     -o-transition: all .3s ease;
	        transition: all .3s ease;
}
.jara_tm_services .list > ul > li.waypoint_effect.load .title{
	transform: translateY(0);
	opacity: 1;
	transition-delay: .7s;
}
.jara_tm_services .list .title h3{
	font-size: 20px;
}
.jara_tm_services .item ul{
	margin: 0px;
	padding: 0px;
	list-style-type:disc;
	padding-left: 25px;
	opacity: 0;
	transform: translateY(20px);
	
	-webkit-transition: all .3s ease;
	   -moz-transition: all .3s ease;
	    -ms-transition: all .3s ease;
	     -o-transition: all .3s ease;
	        transition: all .3s ease;
}
.jara_tm_services .list > ul > li.waypoint_effect.load .item ul{
	transform: translateY(0);
	opacity: 1;
	transition-delay: .9s;
}

/*---------------------------------------------------*/
/*	07) JARA PORTFOLIO
/*---------------------------------------------------*/

.jara_tm_portfolio{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	padding: 117px 0px 140px 0px;
}
.jara_tm_portfolio .portfolio_inner{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
}
.jara_tm_portfolio .portfolio_list{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	margin-top: 70px;
}
.jara_tm_portfolio .portfolio_list ul{
	margin: 0px 0px 0px -100px;
	padding: 0px;
}
.jara_tm_portfolio .portfolio_list ul li{
	margin: 0px 0px 48px 0px;
	padding-left: 100px;
	width: 50%;
	float: left;
}
.jara_tm_portfolio .portfolio_list ul li:nth-child(2){
	margin-top: -227px;
}
.jara_tm_portfolio .portfolio_list ul li:nth-child(2) .image{
	max-width: 81% !important;
}
.jara_tm_portfolio .portfolio_list ul li .list_inner{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	position: relative;
}
.jara_tm_portfolio .portfolio_list ul li .image{
	position: relative;
	overflow: hidden;
}
.jara_tm_portfolio .portfolio_list ul li .image img{
	position: relative;
	opacity: 0;
	min-width: 100%;
}
.jara_tm_portfolio .portfolio_list ul li .main{
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	transform: translateZ(0);
	
	-webkit-transition: all .3s ease;
	   -moz-transition: all .3s ease;
	    -ms-transition: all .3s ease;
	     -o-transition: all .3s ease;
	        transition: all .3s ease;
}
.jara_tm_portfolio .portfolio_list ul li .image:hover .main{
	transform: scale(1.1) translateZ(0);
}
.jara_tm_portfolio .portfolio_list ul li .overlay{
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	background-color: #fff;
	z-index: 6;
	transition: 0.5s ease-in-out;
}
.jara_tm_portfolio .portfolio_list ul li.waypoint_effect.load .overlay{
	left: 100%;
}
.jara_tm_portfolio .portfolio_list ul li .title{
	margin-top: 18px;
	overflow: hidden;
	display: inline-block;
}
.jara_tm_portfolio .portfolio_list ul li .title h3{
	font-size: 20px;
	color: var(--heading-color);
}
.jara_tm_portfolio .portfolio_list ul li .title a{
	color: var(--heading-color);
	position: relative;
	
	-webkit-transition: all .3s ease;
	   -moz-transition: all .3s ease;
	    -ms-transition: all .3s ease;
	     -o-transition: all .3s ease;
	        transition: all .3s ease;
}
.link_effect:before{
	position: absolute;
	content: "";
	width: 100%;
	height: 100%;
	left: 0;
	background-color: #fff;
	transition: .5s ease-in-out;
}
.jara_tm_portfolio .portfolio_list ul li.waypoint_effect.load .title .link_effect:before{
	left: 100%;
}

/*---------------------------------------------------*/
/*	08) JARA PROCESS
/*---------------------------------------------------*/

.jara_tm_process{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	background-color: #F3F3F3;
	position: relative;
	padding: 115px 0px 140px 0px;
}
.jara_tm_process .process_inner{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
}
.jara_tm_process .list{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	margin-top: 50px;
	padding-right: 370px;
}
.jara_tm_process .list ul{
	margin: 0px 0px 0px -30px;
	padding: 0px;
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 25px;
}
.jara_tm_process .list ul li{
	margin: 0px 0px 30px 0px;
	width: 33.3333%;
	padding-left: 30px;
	float: left;
}
.jara_tm_process .list .list_inner .in{
	position: relative;
	z-index: 1;
}
.jara_tm_process .list .list_inner{
	width: 100%;
	height: 100%;
	clear: both;
	float: left;
	position: relative;
	padding: 35px 30px;
}
.jara_tm_process .list .list_inner:before{
	position: absolute;
	content: "";
	left: 0px;
	top: 0px;
	right: 0px;
	height: 0px;
	background-color: #fff;
	
	-webkit-transition: all .3s ease;
	   -moz-transition: all .3s ease;
	    -ms-transition: all .3s ease;
	     -o-transition: all .3s ease;
	        transition: all .3s ease;
}
.jara_tm_process .list ul li.waypoint_effect.load .list_inner:before{
	height: 100%;
}
.jara_tm_process .list .step{
	color: var(--heading-text-);
	font-size: 18px;
	font-weight: 500;
	display: block;
	margin-bottom: 50px;
	opacity: 0;
	transform: translateY(20px);
	
	-webkit-transition: all .3s ease;
	   -moz-transition: all .3s ease;
	    -ms-transition: all .3s ease;
	     -o-transition: all .3s ease;
	        transition: all .3s ease;
}
.jara_tm_process .list ul li.waypoint_effect.load .step{
	transition-delay: .5s;
	opacity: 1;
	transform: translateY(0);
}
.jara_tm_process .list .icon{
	display: block;
	margin-bottom: 25px;
	opacity: 0;
	transform: translateY(20px);
	
	-webkit-transition: all .3s ease;
	   -moz-transition: all .3s ease;
	    -ms-transition: all .3s ease;
	     -o-transition: all .3s ease;
	        transition: all .3s ease;
}
.jara_tm_process .list ul li.waypoint_effect.load .icon{
	transition-delay: .7s;
	opacity: 1;
	transform: translateY(0);
}
.jara_tm_process .list .icon .svg{
	width: 40px;
	height: 40px;
}
.jara_tm_process .list .title{
	font-size: 20px;
	margin-bottom: 10px;
	opacity: 0;
	transform: translateY(20px);
	
	-webkit-transition: all .3s ease;
	   -moz-transition: all .3s ease;
	    -ms-transition: all .3s ease;
	     -o-transition: all .3s ease;
	        transition: all .3s ease;
}
.jara_tm_process .list ul li.waypoint_effect.load .title{
	transition-delay: .9s;
	opacity: 1;
	transform: translateY(0);
}
.jara_tm_process .list .text{
	opacity: 0;
	transform: translateY(20px);
	
	-webkit-transition: all .3s ease;
	   -moz-transition: all .3s ease;
	    -ms-transition: all .3s ease;
	     -o-transition: all .3s ease;
	        transition: all .3s ease;
}
.jara_tm_process .list ul li.waypoint_effect.load .text{
	transition-delay: 1.1s;
	opacity: 1;
	transform: translateY(0);
}
.jara_tm_process .jara_tm_button_border{
	text-align: center;
}
.jara_tm_process .jara_tm_button_border.waypoint_effect.load{
	opacity: 1;
	transform: translateY(0);
}
.jara_tm_process .imagebox{
	position: absolute;
	top: 0px;
	bottom: 0px;
	right: 0px;
	width: 200px;
}
.jara_tm_process .imagebox .main{
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

/*---------------------------------------------------*/
/*	09) JARA TESTIMONIALS
/*---------------------------------------------------*/

.jara_tm_testimonials{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	background: var(--main-gradient);
	padding: 140px 0px;
}
.jara_tm_testimonials .testimonials_inner{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	display: flex;
	align-items: center;
}
.jara_tm_testimonials .left{
	width: 35%;
}
.jara_tm_testimonials .left img{
	min-width: 100%;
	max-height: 600px;
}
.jara_tm_testimonials .right{
	width: 65%;
	padding-left: 95px;
}
.jara_tm_testimonials .text{
	width: 100%;
	float: left;
	margin-bottom: 50px;
}
.jara_tm_testimonials .text p{
	color: #fff;
	font-family: var(--font-syne);
	font-size: 32px;
	font-weight: 700;
	line-height: 40px; 
}
.jara_tm_testimonials .extra{
	width: 100%;
	float: left;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.jara_tm_testimonials .extra h3{
	font-size: 20px;
	color: #fff;
}
.jara_tm_testimonials .extra span{
	color: #fff;
	font-size: 14px;
}
.jara_tm_testimonials .extra .svg{
	width: 36px;
	height: 36px;
}

/*---------------------------------------------------*/
/*	10) JARA PRICING
/*---------------------------------------------------*/

.jara_tm_pricing{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	padding: 115px 0px 0px 0px;
}
.jara_tm_pricing .list{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	margin-top: 45px;
}
.jara_tm_pricing .list ul{
	margin: 0px 0px 0px -30px;
}
.jara_tm_pricing .list ul li{
	margin: 0px 0px 30px 0px;
	padding-left: 30px;
	width: 33.3333%;
	float: left;
}
.jara_tm_pricing .list ul li .list_inner .in{
	position: relative;
	z-index: 1;
}
.jara_tm_pricing .list ul li .list_inner{
	width: 100%;
	height: 100%;
	clear: both;
	float: left;
	position: relative;    
	text-align: center;
	padding: 50px;
}
.jara_tm_pricing .list ul li .list_inner:before{
	position: absolute;
	content: "";
	top: 0px;
	left: 0px;
	right: 0px;
	height: 0px;
	background-color: #eee;
	
	-webkit-transition: all .3s ease;
	   -moz-transition: all .3s ease;
	    -ms-transition: all .3s ease;
	     -o-transition: all .3s ease;
	        transition: all .3s ease;
}
.jara_tm_pricing .list ul li.waypoint_effect.load .list_inner:before{
	height: 100%;
}
.jara_tm_pricing .list ul li:nth-child(1) .list_inner:before{
	background-color: #E9F0F5;
}
.jara_tm_pricing .list ul li:nth-child(2) .list_inner:before{
	background-color: #000;
}
.jara_tm_pricing .list ul li:nth-child(3) .list_inner:before{
	background-color: #FFE6E9;
}
.jara_tm_pricing .top{
	opacity: 0;
	transform: translateY(20px);
	
	-webkit-transition: all .3s ease;
	   -moz-transition: all .3s ease;
	    -ms-transition: all .3s ease;
	     -o-transition: all .3s ease;
	        transition: all .3s ease;
}
.jara_tm_pricing .list ul li.waypoint_effect.load .top{
	transition-delay: .5s;
	opacity: 1;
	transform: translateY(0);
}
.jara_tm_pricing .plan{
	font-size: 14px;
	text-transform: uppercase;
	color: var(--heading-color);
	margin-bottom: 10px;
}
.jara_tm_pricing .hour{
	font-size: 20px;
}
.jara_tm_pricing .time{
	font-size: 14px;
	display: inline-block;
	margin-bottom: 10px;
}
.jara_tm_pricing .price{
	font-size: 64px;
	margin-bottom: 25px;
	opacity: 0;
	transform: translateY(20px);
	
	-webkit-transition: all .3s ease;
	   -moz-transition: all .3s ease;
	    -ms-transition: all .3s ease;
	     -o-transition: all .3s ease;
	        transition: all .3s ease;
}
.jara_tm_pricing .list ul li.waypoint_effect.load .price{
	transition-delay: .7s;
	opacity: 1;
	transform: translateY(0);
}
.jara_tm_pricing .price span{
	font-size: 20px;
}
.jara_tm_pricing ul li.dark .plan,
.jara_tm_pricing ul li.dark .hour,
.jara_tm_pricing ul li.dark .time,
.jara_tm_pricing ul li.dark .price span{
	color: #fff;
}
.jara_tm_pricing ul li .jara_tm_button_border{
	opacity: 0;
	transform: translateY(20px);
	
	-webkit-transition: all .3s ease;
	   -moz-transition: all .3s ease;
	    -ms-transition: all .3s ease;
	     -o-transition: all .3s ease;
	        transition: all .3s ease;
}
.jara_tm_pricing .list ul li.waypoint_effect.load .jara_tm_button_border{
	transition-delay: .9s;
	opacity: 1;
	transform: translateY(0);
}
.jara_tm_pricing ul li.dark .jara_tm_button_border a{
	border-color: #fff;
	color: #fff;
}
.jara_tm_pricing ul li.dark .jara_tm_button_border a:hover{
	background-color: #fff;
	color: #000;
}
.jara_tm_pricing ul li.dark .gradient{
	font-size: 64px;
	font-weight: 700;
	background: var(--main-gradient);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.jara_tm_pricing ul li.dark .price span{
	color: #fff;
}

/*---------------------------------------------------*/
/*	11) JARA NEWS
/*---------------------------------------------------*/

.jara_tm_news{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	margin-bottom: 90px;
	padding-top: 85px;
}
.jara_tm_news .news_inner{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
}
.jara_tm_news .jara_tm_button_border{
	width: auto;
}
.jara_tm_news .jara_tm_title{
	width: auto;
}
.jara_tm_news .list{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	margin-top: 60px;
}
.jara_tm_news .list ul{
	margin: 0px 0px 0px -30px;
}
.jara_tm_news .list ul li{
	margin: 0px 0px 40px 0px;
	padding-left: 30px;
	width: 50%;
	float: left;
}
.jara_tm_news .list ul li .list_inner{
	width: 100%;
	height: 100%;
	clear: both;
	float: left;
	position: relative;
}
.jara_tm_news .list ul li .image{
	position: relative;
	overflow: hidden;
}
.jara_tm_news .list ul li .image img{
	position: relative;
	opacity: 0;
	min-width: 100%;
}
.jara_tm_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: translateZ(0);
	
	-webkit-transition: all .3s ease;
	   -moz-transition: all .3s ease;
	    -ms-transition: all .3s ease;
	     -o-transition: all .3s ease;
	        transition: all .3s ease;
}
.jara_tm_news .list ul li .image:hover .main{
	transform: scale(1.1) translateZ(0);
}
.jara_tm_news .list ul li .details{
	width: 100%;
	float: left;
	margin-top: 25px;
}
.jara_tm_news .list ul li .date{
	background: var(--main-gradient);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	margin-bottom: 10px;
	display: inline-block;
	font-weight: 500;
}
.jara_tm_news .list ul li .title a{
	font-size: 32px;
	color: var(--heading-color);
	line-height: 40px;
}

/*---------------------------------------------------*/
/*	12) JARA FOOTER
/*---------------------------------------------------*/

.jara_tm_footer{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	background-color: #000;
	padding-top: 100px;
}
.jara_tm_footer .footer_inner{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
}
.jara_tm_footer .project{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	display: flex;
	align-items: center;
	background: var(--main-gradient);
	padding: 90px;
}
.jara_tm_footer .project .left{
	width: 60%;
	padding-right: 50px;
}
.jara_tm_footer .project .left h3{
	font-size: 64px;
	color: #fff;
	line-height: 72px;
}
.jara_tm_footer .project .right{
	width: 40%;
	padding-left: 50px;
}
.jara_tm_footer .project .text{
	color: #fff;
	margin-bottom: 23px;
}
.jara_tm_footer .call{
	width: 100%;
	float: left;
}
.jara_tm_footer .call a{
	display: inline-block;
	color: var(--heading-color);
	text-align: center;
	font-variant-numeric: lining-nums proportional-nums;
	font-size: 15px;
	font-style: normal;
	font-weight: 600;
	line-height: 16px;
	background-color: #fff;
	padding: 16px 40px;
	
	-webkit-transition: all .3s ease;
	   -moz-transition: all .3s ease;
	    -ms-transition: all .3s ease;
	     -o-transition: all .3s ease;
	        transition: all .3s ease;
}
.jara_tm_footer .call a:hover{
	color: #fff;
	background-color: #000;
}
.jara_tm_footer .copyright{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	display: flex;
	align-items: center;;
	justify-content: space-between;
	padding: 60px 0px 35px 0px;
}
.jara_tm_footer .year p{
	color: #fff;
}

.jara_tm_footer .logo{
	display: inline-block;
	padding: 0px 30px;
}
.jara_tm_footer .social ul{
	margin: 0px;
	padding: 0px;
}
.jara_tm_footer .social ul li{
	margin: 0px 13px 0px 0px;
	display: inline-block;
}
.jara_tm_footer .social ul li:last-child{
	margin-right: 0px;
}
.jara_tm_footer .social ul li a{
	text-decoration: none;
	color: #fff;
}

/*---------------------------------------------------*/
/*	13) JARA MODALBOXES
/*---------------------------------------------------*/

.jara_tm_modalbox{
	position: fixed;
	top: 0px;
	left: 0px;
	right: 0px;
	height: 100vh;
	z-index: 20;
	background-color: rgba(0,0,0,.8);
	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;
}
.jara_tm_modalbox.opened{
	opacity: 1;
	visibility: visible;
}
.jara_tm_modalbox .box_inner{
	position: absolute;
	top: 70px;
	bottom: 70px;
	width: 968px;
	left: 50%;
	transform: translateX(-53%);
	background-color: #fff;
	z-index: 1;
	opacity: 0;
	visibility: hidden;
	transition-delay: .3s;
	
	-webkit-transition: all .3s ease;
	   -moz-transition: all .3s ease;
	    -ms-transition: all .3s ease;
	     -o-transition: all .3s ease;
	        transition: all .3s ease;
}
.jara_tm_modalbox.opened .box_inner{
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%);
}
.jara_tm_modalbox .close{
	position: fixed;
	left: 100%;
	top: 0px;
	margin-left: 30px;
	z-index: 10;
}
.jara_tm_modalbox .close a{
	display: block;
	width: 40px;
	height: 40px;
	text-decoration: none;
	color: #fff;
	border:2px solid #fff;
	position: relative;
	
	-webkit-transition: all .3s ease;
	   -moz-transition: all .3s ease;
	    -ms-transition: all .3s ease;
	     -o-transition: all .3s ease;
	        transition: all .3s ease;
}
.jara_tm_modalbox .close a:hover{
	border-radius: 100%;
}
.jara_tm_modalbox .close a i{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}
.jara_tm_modalbox .description_wrap{
	position: relative;
	width: 100%;
	height: 100%;
	float: left;
	overflow: hidden;
	padding: 50px;
	overflow-y: scroll;
}
.jara_tm_modalbox .description_wrap:before{
	position: fixed;
	content: "";
	top: 0px;
	left: 0px;
	right: 0px;
	height: 50px;
	background-color: #fff;
	z-index: 5;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
}
.jara_tm_modalbox .description_wrap:after{
	position: fixed;
	content: "";
	bottom: 0px;
	left: 0px;
	right: 0px;
	height: 50px;
	background-color: #fff;
	z-index: 5;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
}
.jara_tm_modalbox .description_wrap::-webkit-scrollbar{
  width: 11px;
}
.jara_tm_modalbox .description_wrap{
  scrollbar-width: thin;
  scrollbar-color: #bbb #fff;
}
.jara_tm_modalbox .description_wrap:-webkit-scrollbar-track{
  background: #fff;
}
.jara_tm_modalbox .description_wrap::-webkit-scrollbar-thumb{
  background-color: #bbb;
  border-radius: 10px;
  border: 3px solid #fff;
}

/*Portfolio*/

.hidden_content_portfolio{
	display: none;
	opacity: 0;
	visibility: hidden;
	position: absolute;
	z-index: -11;
}
.jara_tm_modalbox .hidden_content_portfolio{
	display: none;
	opacity: 0;
	visibility: hidden;
	position: absolute;
	z-index: -11;
}
.jara_tm_modalbox .popup_details{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
}
.jara_tm_modalbox .popup_details .top_image{
	position: relative;
	overflow: hidden;
	margin-bottom: 30px;
}
.jara_tm_modalbox .popup_details .top_image img{
	position: relative;
	min-width: 100%;
	opacity: 0;
}
.jara_tm_modalbox .popup_details .top_image .main{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}
.jara_tm_modalbox .portfolio_main_title{
	width: 100%;
	float: left;
	margin-bottom: 20px;
}
.jara_tm_modalbox .portfolio_main_title .category a{
	display: inline-block;
	color: var(--main-color);
	margin-bottom: 7px;
	
	-webkit-transition: all .3s ease;
	   -moz-transition: all .3s ease;
	    -ms-transition: all .3s ease;
	     -o-transition: all .3s ease;
	        transition: all .3s ease;
}
.jara_tm_modalbox .portfolio_main_title .category a:hover{
	color: var(--yellow-color);
}
.jara_tm_modalbox .portfolio_main_title h3{
	font-size: 25px;
}
.jara_tm_modalbox .main_details{
	width: 100%;
	height: auto;
	clear: both;
	display: flex;
	margin-bottom: 60px;
}
.jara_tm_modalbox .main_details .textbox{
	width: 70%;
	padding-right: 40px;
}
.jara_tm_modalbox .main_details .textbox p{
	margin-bottom: 10px;
	opacity: .8;
}
.jara_tm_modalbox .main_details .textbox p:last-child{
	margin-bottom: 0px;
}
.jara_tm_modalbox .main_details .detailbox{
	width: 30%;
	padding-left: 40px;
}
.jara_tm_modalbox .main_details .detailbox > ul{
	margin: 0px;
	list-style-type: none;
}
.jara_tm_modalbox .main_details .detailbox > ul > li{
	margin: 0px 0px 10px 0px;
	width: 100%;
	float: left;
}
.jara_tm_modalbox .main_details .detailbox > ul > li:last-child{
	margin-bottom: 0px;
}
.jara_tm_modalbox .main_details .detailbox > ul > li span:last-child{
	opacity: .8;
}
.jara_tm_modalbox .main_details .detailbox .first{
    font-weight: 700;
	display: block;
}
.jara_tm_modalbox .main_details .detailbox span a{
	text-decoration: none;
	color: var(--main-color);
	
	-webkit-transition: all .3s ease;
	   -moz-transition: all .3s ease;
	    -ms-transition: all .3s ease;
	     -o-transition: all .3s ease;
	        transition: all .3s ease;
}
.jara_tm_modalbox .main_details .detailbox span a:hover{
	color: var(--yellow-color);
}
.jara_tm_modalbox .main_details .detailbox .share{
	margin: 0px;
	list-style-type: none;
	position: relative;
	top: 7px;
}
.jara_tm_modalbox .main_details .detailbox .share li{
	margin: 0px 13px 0px 0px;
	display: inline-block;
}
.jara_tm_modalbox .main_details .detailbox .share li:last-child{
	margin-right: 0px;
}
.jara_tm_modalbox .main_details .detailbox .share li a{
	text-decoration: none;
	color: var(--main-color);
	
	-webkit-transition: all .3s ease;
	   -moz-transition: all .3s ease;
	    -ms-transition: all .3s ease;
	     -o-transition: all .3s ease;
	        transition: all .3s ease;
}
.jara_tm_modalbox .main_details .detailbox .share li a:hover{
	color: var(--yellow-color);
}
.jara_tm_modalbox .additional_images{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
}
.jara_tm_modalbox .additional_images ul{
	margin: 0px 0px 0px -30px;
	list-style-type: none;
}
.jara_tm_modalbox .additional_images ul li{
	margin: 0px 0px 30px 0px;
	float: left;
	width: 50%;
	padding-left: 30px;
}
.jara_tm_modalbox .additional_images ul li:nth-child(3n-2){
	width: 100%;
}
.jara_tm_modalbox .additional_images ul li .list_inner{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	position: relative;
}
.jara_tm_modalbox .additional_images ul li .my_image{
	position: relative;
}
.jara_tm_modalbox .additional_images ul li .my_image img{
	opacity: 0;
	min-width: 100%;
}
.jara_tm_modalbox .additional_images ul li .my_image .main{
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

/*Blog*/

.jara_tm_news .news_hidden_details{
	display: none;
	opacity: 0;
	visibility: hidden;
	position: absolute;
	z-index: -11;
}
.jara_tm_modalbox .news_popup_informations{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
}
.jara_tm_modalbox .news_popup_informations .image{
	position: relative;
	margin-bottom: 30px;
}
.jara_tm_modalbox .news_popup_informations .image img{
	position: relative;
	opacity: 0;
	min-width: 100%;
}
.jara_tm_modalbox .news_popup_informations .image .main{
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}
.jara_tm_modalbox .news_popup_informations .text{
	width: 100%;
	float: left;
}
.jara_tm_modalbox .news_popup_informations .text p{
	margin-bottom: 10px;
	opacity: .8;
}
.jara_tm_modalbox .news_popup_informations .text p:last-child{
	margin-bottom: 0px;
}
.jara_tm_modalbox .meta{
	width: 100%;
	float: left;
}
.jara_tm_modalbox .meta span{
	background: var(--main-gradient);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	margin-bottom: 10px;
	display: inline-block;
	font-weight: 500;
}
.jara_tm_modalbox .news_popup_informations .title{
	width: 100%;
	float: left;
	margin-bottom: 20px;
}
.jara_tm_modalbox .news_popup_informations .title h3{
	font-size: 25px;
}

/*---------------------------------------------------*/
/*	14) JARA PORTFOLIO PAGE
/*---------------------------------------------------*/

.jara_tm_portfolio_page{
	width: 100%;
	float: left;
	transform: translateY(30px);
	opacity: 0;
	
	-webkit-transition: all .3s ease;
	   -moz-transition: all .3s ease;
	    -ms-transition: all .3s ease;
	     -o-transition: all .3s ease;
	        transition: all .3s ease;
}
.jara_tm_all_wrap.ready .jara_tm_portfolio_page{
	transition-delay: .5s;
	opacity: 1;
	transform: translateY(0);
}
.jara_tm_portfolio_page .jara_tm_title{
	width: auto;
}
.jara_tm_portfolio_page .jara_tm_portfolio .portfolio_list ul li:nth-child(2){
	margin-top: 0px;
}
.jara_tm_portfolio_page .jara_tm_portfolio .portfolio_list ul li:nth-child(2) .image{
	max-width: 100% !important;
}
.jara_tm_portfolio_page .jara_tm_portfolio{
	padding-top: 0px;
	margin-top: 220px;
	padding-bottom: 100px;
}
.portfolio_filter ul{
	margin: 0px;
	padding: 0px;
}
.portfolio_filter ul li{
	display: inline-block;
	margin: 0px 20px 0px 10px;
}
.portfolio_filter ul li:last-child{
	margin-right: 0px;
}
.portfolio_filter ul li a{
	color: var(--heading-color);
	font-family: var(--font-syne);
}

/*NEW FUNCTIONALITY*/
#imagePlaceholder {
	width: 100%; /* Set to the width of your images */
	height: 100%; /* Set to the height of your images */
	max-width: 100%; /* Ensure the container doesn't exceed the viewport width */
	border: 1px solid #ccc;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 20px;
	overflow: hidden; /* Hide any overflowing content */
	position: relative; /* Set to relative to allow absolute positioning of child elements */
}

#imagePlaceholder::before {
    content: "";
    display: block;
    padding-top: 100%; /* This sets a 4:3 aspect ratio; adjust as needed */
}

#generatedImage {
    z-index: 2; /* Ensure it's above the placeholder image */
}


#placeholderImage.faded, img.faded {
	opacity: 0.5; /* 70% opacity when .faded class is applied */
}


#waitMessage {
	display: none; /* Initially hidden */
	position: absolute; /* Absolute positioning to overlay on top of the image */
	top: 65%; /* Center vertically */
	left: 50%; /* Center horizontally */
	transform: translate(-50%, -50%); /* Adjust for exact centering */
	font-size: 36px;
	color: rgb(227, 178, 2);
	z-index: 1; /* Ensure it's above the image */
}

#generatedImage {
   max-width: 100%; /* Image will scale down if it's too wide for the container */
   max-height: 100%;  /* Image will scale down if it's too tall for the container */ 
	display: none; /* Initially hidden */
}

#negprompt {
	
	display: none; /* Initially hidden */
}


/* Adjusting the container around settings */
#imagenSettings {
    display: none; /* Initially hidden */	
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin-top: 20px;
    width: 80%;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

/* Consistent labels */
#imagenSettings p {
    font-family: 'Roboto', sans-serif;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 10px;
    color: #333;
}

/* Labels for select and input */
#imagenSettings label {
    font-size: 16px;
    font-weight: 500;
    color: #555;
    display: block;
    margin-bottom: 5px;
}

/* Input fields styling */
#imagenSettings select,
#imagenSettings input[type="number"] {
    width: 100%;
    padding: 10px;
    border-radius: 6px;
    border: 1px solid #ddd;
    font-size: 16px;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: border-color 0.2s;
}

#imagenSettings select:focus,
#imagenSettings input[type="number"]:focus {
    border-color: #b96bdd;
    outline: none;
}

/* Styling the buttons */
#imagenSettings button {
    background: linear-gradient(90deg, #b16cea, #ff6069, #ff9d42);
    color: #fff;
    font-size: 16px;
    padding: 12px 24px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.3s;
    display: inline-block;
    margin-top: 15px;
}

#imagenSettings button:hover {
    background: linear-gradient(270deg, #b16cea, #ff6069, #ff9d42);
}

/* Additional spacing */
#imagenSettings .form-group {
    margin-top: 15px;
}


#div-to-appear {
display:none;
}	

#div-to-dissappear {
display:block;
}	

.consent-bar {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background-color: #f9f9f9;
border-top: 1px solid #ddd;
padding: 10px 20px;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 1000;
}

.consent-bar {
/* ... other styles ... */
display: none; /* Add this line to hide the bar by default */
}

/* ------------------------------------------------------------------- 
* ## FAQ block
* ------------------------------------------------------------------- */

.s-faq {
background-color: #D1D1D1;
padding-top: calc(6 * var(--space));
padding-bottom: var(--vspace-4);
}

.s-faq__section {
border-bottom: 1px solid var(--color-border);
padding-bottom: var(--vspace-0_75);
margin-bottom: var(--vspace-2_5);
}

.s-faq__section:last-child {
border-bottom: none;
padding-bottom: 0;
margin-bottom: 0;
}
/* ------------------------------------------------------------------- 
* ## FAQ block
* ------------------------------------------------------------------- */
.faq-block {
margin-bottom: var(--vspace-1_75);
}

.faq-block h4 {
line-height: 1.080;
margin-top: 0;
margin-bottom: var(--vspace-0_25);
}

.faq-block__header-meta {
font-family: var(--font-2);
font-size: calc(var(--text-size) * 1.1111);
font-style: italic;
margin-top: -.4rem;
margin-bottom: var(--vspace-0_75);
}

.faq-block__header-meta span:first-child {
margin-right: .6rem;
}

.faq-block__header-date {
display: inline-block;
font-family: var(--font-1);
font-size: calc(var(--text-size) * 0.8889);
font-size: var(--text-sm);
font-style: normal;
text-transform: uppercase;
letter-spacing: .12em;
color: var(--color-text-light);
}

.faq-block__header-date::before {
content: "\2022";
color: var(--color-text);
margin-right: .2rem;
}

/* ------------------------------------------------------------------- 
* responsive:
FAQ
* ------------------------------------------------------------------- */
@media screen and (max-width: 400px) {
.s-faq {
padding-top: var(--vspace-4);
}
.s-faq__section .column:first-child {
text-align: center;
}
}






/* ===================================================================
* # FAQ
*
* ------------------------------------------------------------------- */

.faq-section {
display: flex;
flex-direction: column;
width: 80vw; /* 80% of the viewport width */
width: 100%;
border: 1px solid #ccc;
padding: 10px;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
overflow-wrap: break-word; /* Breaks long words to prevent overflow */
overflow: hidden;


}

.faq-question {
width: 100%;
text-align: left;
border: none;
background: none;
padding: 10px;
cursor: pointer;
font-weight: bold;
overflow: hidden;
white-space: normal !important;
border-bottom: 1px solid #019C8B;/* Adds a light gray border at the bottom */
/* margin-bottom: 1px;  Adds some space between questions */
/* padding-bottom: 1px; /* Adds some padding to the bottom for visual balance */
}

.faq-question:hover {
background-color: #f5f5f5; /* Light gray background */
color: #333; /* Darker text color */
}	


.faq-answer {
display: none;
padding: 10px;
border-top: 1px solid #eee;
overflow-wrap: break-word;


}

/* Mobile styles */
@media screen and (max-width: 768px) {
.faq-section {
max-width: 95vw;
padding: 5px;
}

.faq-question, .faq-answer {
font-size: 14px; /* Adjust font size for mobile */
padding: 5px;
}
}

@media screen and (max-width: 400px) {
.faq-section {
max-width: 95vw;
padding: 5px;
}

.faq-question, .faq-answer {
font-size: 10px; /* Adjust font size for mobile */
padding: 5px;
}
}



/*---------------------------------------------------*/
/*	15) JARA BLOG PAGE
/*---------------------------------------------------*/

.jara_tm_blog_page{
	width: 100%;
	float: left;
	transform: translateY(30px);
	opacity: 0;
	
	-webkit-transition: all .3s ease;
	   -moz-transition: all .3s ease;
	    -ms-transition: all .3s ease;
	     -o-transition: all .3s ease;
	        transition: all .3s ease;
}
.jara_tm_all_wrap.ready .jara_tm_blog_page{
	transition-delay: .5s;
	opacity: 1;
	transform: translateY(0);
}
.jara_tm_blog_page .jara_tm_news{
	padding-top: 0px;
	margin-top: 220px;
}
.jara_tm_blog_page .jara_tm_news .list ul{
	margin-left: -100px;
}
.jara_tm_blog_page .jara_tm_news .list ul li{
	padding-left: 100px;
	margin-bottom: 50px;
}

/*---------------------------------------------------*/
/*	16) JARA MEDIA QUERIES (FOR SMALL DEVICES)
/*---------------------------------------------------*/

@media (max-width: 1600px) {
	body{font-size: 16px;line-height: 30px;}
	.container{max-width: 1140px;}
	.jara_tm_header .menu ul li{margin-right: 60px;}
	.jara_tm_header .menu ul li a{padding: 20px 0px;}
	.jara_tm_hero .title h2{font-size: 90px;line-height: 85px;}
	.jara_tm_hero .title h3{font-size: 60px;line-height: 65px;}
	.jara_tm_hero .subtitle p{font-size: 24px;line-height: 24px;}
	.jara_tm_button a{padding: 10px 32px;}
	.jara_tm_button_border a{padding: 9px 32px;}
	.jara_tm_hero .subtitle{margin-bottom: 30px;}
	.jara_tm_hero .content{padding-top: 100px;}
	.jara_tm_hero .right .in > img{max-height: 400px;max-width: 300px;}
	.jara_tm_hero .right .in{float: left;}
	.jara_tm_all_wrap.ready .jara_tm_hero .right{padding-left: 60px;}
	.jara_tm_hero .play{width: 80px;height: 80px;}
	.jara_tm_hero .play .svg{width: 14px;height: 14px;}
	.tm_partners{margin-top: 50px;}
	.tm_partners .text p{font-size: 16px;line-height: 20px;}
	.jara_tm_about .text p{font-size: 40px;line-height: 50px;}
	.jara_tm_about .counter ul li{margin-bottom: 30px;}
	.jara_tm_about .counter h3{font-size: 40px;line-height: 45px;}
	.jara_tm_title h3{font-size: 55px;line-height: 62px;}
	.jara_tm_services .list .title h3{font-size: 18px;}
	.jara_tm_services .list .list_inner{padding-bottom: 50px;}
	.jara_tm_testimonials .text p{font-size: 30px;line-height: 37px;}
	.jara_tm_testimonials .text{margin-bottom: 35px;}
	.jara_tm_modalbox .box_inner{width: 800px;}
	.jara_tm_modalbox .description_wrap{padding: 40px;}
	.jara_tm_modalbox .description_wrap:before{height: 40px;}
	.jara_tm_modalbox .description_wrap:after{height: 40px;}
	.jara_tm_modalbox .close{margin-left: 20px;}
}
@media (max-width: 1040px) {
	.jara_tm_header{display: none;}
	.jara_tm_mobile_menu{display: block;}
	.mouse-cursor{display: none;}
	.jara_tm_hero .content{flex-direction: column-reverse;padding-top: 90px;}
	.jara_tm_hero .left{width: 100%;}
	.jara_tm_hero .hello span{font-size: 18px;padding-left: 45px;}
	.jara_tm_hero .hello .svg{width: 35px;height: 35px;}
	.jara_tm_hero .title h2{font-size: 50px;line-height: 55px;}
	.jara_tm_hero .title h3{font-size: 35px;line-height: 40px;}
	.jara_tm_hero .subtitle p{font-size: 21px;line-height: 30px;}
	.jara_tm_all_wrap.ready .jara_tm_hero .right{padding-left: 0px;}
	.tm_partners{margin-top: 50px;}
	.tm_partners .text{display: none;}
	.tm_partners .list{width: 100%;}
	.tm_partners .list:after{width: 50px;}
	.tm_partners .list:before{width: 50px;}
	.jara_tm_hero .right{width: 100%;margin-bottom: 60px;}
	.jara_tm_hero .right .in{float: left;}
	.jara_tm_hero .right .in > img{max-width: 350px;max-height: 350px;}
	.jara_tm_hero .play{display: none;}
	.jara_tm_about .about_inner{flex-direction: column;align-items: baseline;}
	.jara_tm_about .experience{width: 100%;margin-bottom: 40px;}
	.jara_tm_about .inside{clip-path:none;width: auto;height: auto;transform: rotate(0);padding: 35px 20px 50px 20px;}
	.jara_tm_about .inside h3{transform: rotate(0);font-size: 80px;line-height: 100px;margin-left: 0px;}
	.jara_tm_about .inside h6{transform: rotate(0);}
	.jara_tm_about .text{padding: 0px;width: 100%;margin-bottom: 40px;}
	.jara_tm_about .text p{font-size: 25px;line-height: 33px;}
	.jara_tm_about .counter{padding-left: 0px;width: 100%;}
	.jara_tm_about .counter ul li{width: auto;display: inline-block;margin-right: 20px;margin-bottom: 20px;}
	.jara_tm_title h3{font-size: 40px;line-height: 47px;}
	.jara_tm_services .list > ul > li{width: 50%;}
	.jara_tm_portfolio .portfolio_list ul{margin-left: -50px;}
	.jara_tm_portfolio .portfolio_list ul li{padding-left: 50px;}
	.jara_tm_process .imagebox{display: none;}
	.jara_tm_process .list{padding-right: 0px !important;}
	.jara_tm_process .list ul li{width: 50%;}
	.jara_tm_testimonials .testimonials_inner{flex-direction: column;align-items: baseline;}
	.jara_tm_testimonials .left{width: 100%;margin-bottom: 40px;}
	.jara_tm_testimonials .right{width: 100%;padding-left: 0px;}
	.jara_tm_testimonials .text p{font-size: 25px;line-height: 32px;}
	.jara_tm_pricing .list ul li{width: 50%;}
	.jara_tm_footer .project{flex-direction: column;align-items: baseline;padding: 50px 40px;}
	.jara_tm_footer .project .left{width: 100%;padding-right: 0px;margin-bottom: 15px;}
	.jara_tm_footer .project .right{width: 100%;padding-left: 0px;}
	.jara_tm_footer .project .left h3{font-size: 30px;line-height: 36px;}
	.jara_tm_footer .copyright{flex-direction: column;}
	.jara_tm_footer .copyright .logo{padding: 10px 0px;}
	.jara_tm_portfolio_page .jara_tm_portfolio{margin-top: 155px;}
	.jara_tm_blog_page .jara_tm_news{margin-top: 155px;}
	.jara_tm_modalbox .box_inner{width: 600px;top: 50px;bottom: 50px;}
	.jara_tm_modalbox .description_wrap{padding: 30px;}
	.jara_tm_modalbox .description_wrap:before{height: 30px;}
	.jara_tm_modalbox .description_wrap:after{height: 30px;}
	.jara_tm_modalbox .close a{width: 30px;height: 30px;}
	.jara_tm_modalbox .close{margin-left: 15px;}
	.jara_tm_modalbox .main_details{flex-direction: column;}
	.jara_tm_modalbox .main_details .textbox{width: 100%;padding-right: 0px;margin-bottom: 30px;}
	.jara_tm_modalbox .main_details .detailbox{width: 100%;padding-left: 0px;}
}
@media (max-width: 768px) {
	.jara_tm_flex_title{flex-direction: column;align-items: baseline;}
	.jara_tm_flex_title .jara_tm_title{margin-bottom: 20px;}
	.jara_tm_services .list > ul{margin-left: 0px;}
	.jara_tm_services .list > ul > li{width: 100%;padding-left: 0px;}
	.jara_tm_portfolio .portfolio_list ul{margin: 0px;}
	.jara_tm_portfolio .portfolio_list ul li{width: 100%;padding-left: 0px;margin-bottom: 40px;}
	.jara_tm_portfolio .portfolio_list ul li:nth-child(2){margin-top: 0px;}
	.jara_tm_portfolio .portfolio_list ul li:nth-child(2) .image{max-width: 100% !important;}
	.jara_tm_process .list ul{margin: 0px;}
	.jara_tm_process .list ul li{width: 100%;padding-left: 0px;}
	.jara_tm_pricing .list ul{margin: 0px;}
	.jara_tm_pricing .list ul li{width: 100%;padding-left: 0px;}
	.jara_tm_news .list ul{margin: 0px;}
	.jara_tm_news .list ul li{width: 100%;padding-left: 0px;}
	.jara_tm_news .list ul li .title{line-height: 1;}
	.jara_tm_news .list ul li .title a{font-size: 23px;line-height: 23px;}
	.jara_tm_about{padding-bottom: 115px;}
	.jara_tm_testimonials{padding-bottom: 130px;}
	.jara_tm_modalbox .box_inner{width: 300px;top: 40px;bottom: 40px;}
	.jara_tm_modalbox .description_wrap{padding: 30px 25px 25px 25px;}
	.jara_tm_modalbox .description_wrap:before{height: 30px;}
	.jara_tm_modalbox .description_wrap:after{height: 25px;}
	.jara_tm_modalbox .close{margin-left: auto;left: auto;right: 25px;top: 15px;}
	.jara_tm_modalbox .close a{color: #000;width: auto;height: auto;border: none;font-size: 20px;}
	.jara_tm_modalbox .portfolio_main_title h3{font-size: 19px;}
	.jara_tm_modalbox .portfolio_main_title{margin-bottom: 15px;}
	.jara_tm_modalbox .additional_images ul{margin: 0px;}
	.jara_tm_modalbox .additional_images ul li{width: 100% !important;padding-left: 0px;margin-bottom: 20px;}
	.jara_tm_modalbox .news_popup_informations .title h3{font-size: 19px;}
	.jara_tm_modalbox .news_popup_informations .title{margin-bottom: 15px;}
}

/* Position the Clerk #app button on the right below the header for desktop */
#app {
    position: fixed; /* Ensures the button stays fixed in the corner */
    top: 80px;       /* Keep the top margin to maintain some space from the top */
    right: 50px;     /* Position the button 20px from the right edge */
    z-index: 10000;  /* Ensure it's above other elements */
}

/* Adjust Clerk app positioning for mobile devices */
@media (max-width: 768px) {
    #app {
        position: relative; /* Positions it relative to the flow of the document */
        top: auto;
        right: auto;
        margin-top: 5px; /* Adjust spacing if needed */
        margin-left: 20px; /* Align it under the hamburger menu */
    }
}


/* Keep the header above all other elements */
.jara_tm_header {
    z-index: 9999;   /* Ensure the header stays below the #app */
}

/* Modal Styles for PayPal Payment */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1000; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0, 0, 0); /* Fallback color */
    background-color: rgba(0, 0, 0, 0.8); /* Black w/ opacity */
}

.modal-content {
    background-color: #ffffff;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Could be more or less, depending on screen size */
    max-width: 400px;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}

.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

#loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999; /* Ensure it's on top of everything else */
}

#loading-message {
    text-align: center;
    color: white;
}

#loading-message img {
    width: 250px;
    height: 250px;
    margin-bottom: 20px;
}

a.custom-link {
    color: inherit; /* Inherit the color from the parent element */
    font-size: inherit; /* Inherit the font size from the parent element */
    text-decoration: underline; /* Keep the underline */
    text-decoration-color: currentColor; /* Ensure underline matches the text color */
    text-decoration-thickness: 1px; /* You can adjust the thickness of the underline if needed */
}

a.custom-link:hover {
    color: inherit; /* Keep the same color on hover */
    text-decoration: underline; /* Keep the underline on hover */
}


@keyframes ldio-x2uulkbinbj-1 {
  0% { top: 45px; height: 160px }
  50% { top: 75px; height: 100px }
  100% { top: 75px; height: 100px }
}
@keyframes ldio-x2uulkbinbj-2 {
  0% { top: 52.49999999999999px; height: 145.00000000000003px }
  50% { top: 75px; height: 100px }
  100% { top: 75px; height: 100px }
}
@keyframes ldio-x2uulkbinbj-3 {
  0% { top: 60px; height: 130px }
  50% { top: 75px; height: 100px }
  100% { top: 75px; height: 100px }
}
.ldio-x2uulkbinbj div { position: absolute; width: 45px }.ldio-x2uulkbinbj div:nth-child(1) {
  left: 40px;
  background: #b96bdd;
  animation: ldio-x2uulkbinbj-1 1s cubic-bezier(0,0.5,0.5,1) infinite;
  animation-delay: -0.2s
}
.ldio-x2uulkbinbj div:nth-child(2) {
  left: 102.5px;
  background: #ff6367;
  animation: ldio-x2uulkbinbj-2 1s cubic-bezier(0,0.5,0.5,1) infinite;
  animation-delay: -0.1s
}
.ldio-x2uulkbinbj div:nth-child(3) {
  left: 165px;
  background: #ff9945;
  animation: ldio-x2uulkbinbj-3 1s cubic-bezier(0,0.5,0.5,1) infinite;
  animation-delay: undefineds
}

.loadingio-spinner-pulse-nq4q5u6dq7r {
  width: 250px;
  height: 250px;
  display: inline-block;
  overflow: hidden;
  background: none;
}
.ldio-x2uulkbinbj {
  width: 100%;
  height: 100%;
  position: relative;
  transform: translateZ(0) scale(1);
  backface-visibility: hidden;
  transform-origin: 0 0; /* see note above */
}
.ldio-x2uulkbinbj div { box-sizing: content-box; }



/* Modal Styles */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1000; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0, 0, 0); /* Fallback color */
    background-color: rgba(0, 0, 0, 0.8); /* Black w/ opacity */
}

.modal-content {
    background-color: #ffffff;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Could be more or less, depending on screen size */
    max-width: 400px;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}

.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}
  .gallery {
	  display: grid;
	  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	  gap: 15px;
  }
  
  .gallery-item {
	  width: 100%;
	  height: 150px;
	  object-fit: cover;
	  border-radius: 4px;
  }