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


	01) ARLO BASE
	02) ARLO CONTENT
	03) ARLO ABOUT
	04) ARLO SERVICES
	05) ARLO COUNTERBOX
	06) ARLO PORTFOLIO
	07) ARLO TESTIMONIALS
	08) ARLO NEWS
	09) ARLO CONTACT
	09) ARLO CONTACT
	10) ARLO TO TOP
	11) ARLO PARTICLE HOMEPAGE
	12) ARLO RIPPLE HOMEPAGE
	13) ARLO PORTFOLIO SINGLE
	14) ARLO MOBILE HEADER
    15) ARLO MEDIA QUERIES (FOR SMALL DEVICES)


/*---------------------------------------------------*/
/*	01) ARLO BASE
/*---------------------------------------------------*/

html {
	overflow-x: hidden;
	padding: 0px;
	margin: 0px
}
body{
	font-family: "Open Sans";
	font-size: 14px;
	line-height: 1.8;
	letter-spacing: 0.5px;
	word-wrap: break-word;
	font-weight: 400;
}
svg{
	fill: currentcolor;
	width: 15px;
	height: 15px;
}
img.svg{
	width: 15px;
	height: 15px;
}
.arlo_tm_wrapper_all,
.arlo_tm_section,
.arlo_tm_content{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	   -moz-box-sizing: border-box; /* Firefox, other Gecko */
			box-sizing: border-box; /* Opera/IE 8+ */ 
}
#ripple{
	position: relative;
	z-index: 0;
}
.arlo_tm_content{
	position: relative;
	z-index: 2;
}

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

::placeholder { /* Most modern browsers support this now. */
   color: #333;
}
.arlo_tm_preloader{
  position: fixed;
  background-color: #fff;
  z-index: 9999999;
  height: 100%;
  width: 100%;	
	
  -webkit-transition: .2s all ease;
  -o-transition: .2s all ease;
  transition: .2s all ease;
  -webkit-transition-delay: .5s;
  -o-transition-delay: .5s;
  transition-delay: .5s; }  
.arlo_tm_preloader .spinner_wrap{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	z-index: 33333;
}
.arlo_tm_preloader.loaded {
    opacity: 0;
    visibility: hidden;
}
.arlo_tm_preloader:before,
.arlo_tm_preloader:after{
    content: "";
    position: absolute;
    height: 50%;
    width: 100%;
    background-color: #041230;
	
    -webkit-transition: .7s all ease;
    -o-transition: .7s all ease;
    transition: .7s all ease;
}
.arlo_tm_preloader:before{
    top: 0;
    left: 0; 
}
.arlo_tm_preloader:after{
    bottom: 0;
	left: 0; 
}
.arlo_tm_preloader.loaded:before, 
.arlo_tm_preloader.loaded:after{height: 0%;}

/*---------------------------------------------------*/
/*	02) ARLO CONTENT
/*---------------------------------------------------*/

.arlo_tm_leftpart_wrap{
	width: 300px;
	position: fixed;
	top: 0px;
	bottom: 0px;
	left: 0px;
	background-color: #041230;
	z-index: 100;
	
	-webkit-transition: all .3s ease;
	   -moz-transition: all .3s ease;
	    -ms-transition: all .3s ease;
	     -o-transition: all .3s ease;
	        transition: all .3s ease;
	
}
.arlo_tm_leftpart_wrap.hide{left: -300px;}
.arlo_tm_leftpart_wrap.opened{left: -300px;}
.arlo_tm_leftpart_wrap .logo_wrap{
	background-color: #041230;
	padding: 50px 20px;
	width: 100%;
	float: left;
	text-align: center;
	margin-bottom: 50px;
	border-bottom: 1px solid rgba(255,255,255,.1);
	
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	   -moz-box-sizing: border-box; /* Firefox, other Gecko */
			box-sizing: border-box; /* Opera/IE 8+ */
}
.arlo_tm_leftpart_wrap .menu_list_wrap{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	padding: 0px 20px 0px 60px;
	
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	   -moz-box-sizing: border-box; /* Firefox, other Gecko */
			box-sizing: border-box; /* Opera/IE 8+ */
}
.arlo_tm_leftpart_wrap .menu_list_wrap ul{
	margin: 0px;
	list-style-type: none;
}
.arlo_tm_leftpart_wrap .menu_list_wrap ul li{margin:0px;}
.arlo_tm_leftpart_wrap .menu_list_wrap ul li:last-child{margin-bottom: 0px;}
.arlo_tm_leftpart_wrap .menu_list_wrap ul li a{
	text-decoration: none;
	color: #fff;
	font-family: "Montserrat";
	font-size: 16px;
	font-weight: 500;
	text-transform: uppercase;
	position: relative;
	display: inline-block;
	padding-bottom: 19px;
	
	-webkit-transition: all .3s ease;
	   -moz-transition: all .3s ease;
	    -ms-transition: all .3s ease;
	     -o-transition: all .3s ease;
	        transition: all .3s ease;
}
.arlo_tm_leftpart_wrap .menu_list_wrap ul li a:before{
	position: absolute;
	content: "";
	height: 2px;
	width: 0px;
	background-color: #E3872D;
	top: 14px;
	transform: translateY(-50%);
	left: 100%;
	margin-left: 10px;
	
	-webkit-transition: all .3s ease;
	   -moz-transition: all .3s ease;
	    -ms-transition: all .3s ease;
	     -o-transition: all .3s ease;
	        transition: all .3s ease;
}
.arlo_tm_leftpart_wrap .menu_list_wrap ul li a:hover{color: #E3872D;}
.arlo_tm_leftpart_wrap .menu_list_wrap ul li a:hover:before{width: 35px;}
.arlo_tm_leftpart_wrap .leftpart_bottom{
	position: absolute;
	left: 60px;
	bottom: 38px;
}
.arlo_tm_leftpart_wrap .leftpart_bottom .social_wrap{
	width: 100%;
	height: auto;
	float: left;
	position: relative;
	left: -5px;
	margin-bottom: 10px;
	
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	   -moz-box-sizing: border-box; /* Firefox, other Gecko */
			box-sizing: border-box; /* Opera/IE 8+ */
}
.arlo_tm_leftpart_wrap .leftpart_bottom .social_wrap ul{
	margin: 0px;
	list-style-type: none;
}
.arlo_tm_leftpart_wrap .leftpart_bottom .social_wrap ul li{
	margin: 0px 10px 0px 0px;
	display: inline-block;
}
.arlo_tm_leftpart_wrap .leftpart_bottom .social_wrap ul li:last-child{margin-right: 0px;}
.arlo_tm_leftpart_wrap .leftpart_bottom .social_wrap ul li a{
	text-decoration: none;
	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;
}
.arlo_tm_leftpart_wrap .leftpart_bottom .social_wrap ul li a:hover{color: #E3872D;}
.arlo_tm_leftpart_wrap .arlo_tm_resize{
	position: absolute;
	right: 0px;
	bottom: 20%;
	width: 30px;
	height: 30px;
	text-align: center;
	line-height: 30px;
	background-color: #E3872D;
	display: inline-block;
	text-decoration: none;
	z-index: 200;
	
	-webkit-transition: all .3s ease;
	   -moz-transition: all .3s ease;
	    -ms-transition: all .3s ease;
	     -o-transition: all .3s ease;
	        transition: all .3s ease;
}

.social_wrap a i {
    font-size: 24px; /* Increase the size of the icons */
    margin: 0 10px; /* Add horizontal spacing between icons */
    color: black; /* Set the icon color to black */
}

.social_wrap a i:hover {
    color: #E3872D; /* Optional: Change color on hover */
}

.arlo_tm_leftpart_wrap .arlo_tm_resize.opened{right: -30px;}
.arlo_tm_leftpart_wrap .arlo_tm_resize i{
	color: #fff;
	transform: rotate(0deg);
	position: absolute;
	left: 6px;
	
	-webkit-transition: all .3s ease;
	   -moz-transition: all .3s ease;
	    -ms-transition: all .3s ease;
	     -o-transition: all .3s ease;
	        transition: all .3s ease;
}
.arlo_tm_leftpart_wrap .arlo_tm_resize i.opened{transform: rotate(-180deg);}
.arlo_tm_rightpart{
	width: 100%;
	height: auto;
	float: left;
	padding-left: 300px;
	
	-webkit-transition: all .3s ease;
	   -moz-transition: all .3s ease;
	    -ms-transition: all .3s ease;
	     -o-transition: all .3s ease;
	        transition: all .3s ease;
	
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	   -moz-box-sizing: border-box; /* Firefox, other Gecko */
			box-sizing: border-box; /* Opera/IE 8+ */
}
.arlo_tm_rightpart.full{padding-left: 0px;}
.arlo_tm_rightpart.opened{padding-left: 0px;}
.arlo_tm_rightpart .rightpart_inner{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	   -moz-box-sizing: border-box; /* Firefox, other Gecko */
			box-sizing: border-box; /* Opera/IE 8+ */
}
.arlo_tm_hero_header_wrap{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	margin-bottom: 100px;
	
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	   -moz-box-sizing: border-box; /* Firefox, other Gecko */
			box-sizing: border-box; /* Opera/IE 8+ */
}
.arlo_tm_universal_box_wrap{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	position: relative;
	
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	   -moz-box-sizing: border-box; /* Firefox, other Gecko */
			box-sizing: border-box; /* Opera/IE 8+ */
}
.arlo_tm_universal_box_wrap .bg_wrap{
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	z-index: 10;
}
.arlo_tm_universal_box_wrap .overlay_image{
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	z-index: 15;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}
.arlo_tm_universal_box_wrap .overlay_video{
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	z-index: 15;
	overflow: hidden;
}
.arlo_tm_universal_box_wrap .overlay_video video{
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	object-fit: cover;
}
.arlo_tm_universal_box_wrap .overlay_color{
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	z-index: 20;
}
.arlo_tm_universal_box_wrap .content{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	position: relative;
	z-index: 25;
	
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	   -moz-box-sizing: border-box; /* Firefox, other Gecko */
			box-sizing: border-box; /* Opera/IE 8+ */
}
.arlo_tm_universal_box_wrap .overlay_image.hero{background-image: url(../img/hero/2.jpg);}
.arlo_tm_universal_box_wrap .overlay_color.hero{background-color: rgba(7,23,55,.8);}
.arlo_tm_universal_box_wrap .content.hero{height: 100vh;}
.arlo_tm_hero_header_wrap .inner_content{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	z-index: 2;
	text-align: center;
	width: 100%;
	padding: 0px 20px;
	
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	   -moz-box-sizing: border-box; /* Firefox, other Gecko */
			box-sizing: border-box; /* Opera/IE 8+ */
}
.arlo_tm_hero_header_wrap .image_wrap{
	width: 200px;
	height: 200px;
	display: inline-block;
	margin-bottom: 38px;
}
.arlo_tm_hero_header_wrap .image_wrap img{
	border-radius: 100%;
	border: 8px solid rgba(255,255,255,.5);
}
.arlo_tm_hero_header_wrap .name_holder h3{
	font-family: "Montserrat";
	text-transform: uppercase;
	color: #fff;
	font-size: 50px;
	font-weight: 300;
}
.arlo_tm_hero_header_wrap .name_holder h3 span{
	font-weight: 500;
	color: #E3872D;
}
.arlo_tm_hero_header_wrap .text_typing{
	width: 100%;
	height: auto;
	float: left;
	
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	   -moz-box-sizing: border-box; /* Firefox, other Gecko */
			box-sizing: border-box; /* Opera/IE 8+ */
}
.arlo_tm_hero_header_wrap .text_typing p{
	color: #fff;
	font-size: 24px;
	font-family: "Montserrat";
}
.arlo_tm_animation_text_word{
	font-weight: 600;
	line-height: 1;
	font-family: "Montserrat";
}
.arlo_tm_about_wrap .arlo_tm_animation_text_word{color: #E3872D;}
.arlo_tm_arrow_wrap{
	position: absolute;
	left: 50%;
	bottom: 5%;
	transform: translateX(-50%);
	margin-left: -21px;
	z-index: 55;
}
.arlo_tm_arrow_wrap.bounce {
  -webkit-animation: bounce 2s infinite;
  animation: bounce 2s infinite; }

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

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    transform: translateY(0); }
  40% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px); }
  60% {
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px); } }
.arlo_tm_arrow_wrap a{
	text-decoration: none;
	color: #fff;
	font-size: 30px;
}

/*---------------------------------------------------*/
/*	03) ARLO ABOUT
/*---------------------------------------------------*/

.arlo_tm_title_holder{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	text-align: left;
	padding-bottom: 50px;
	position: relative;
	
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	   -moz-box-sizing: border-box; /* Firefox, other Gecko */
			box-sizing: border-box; /* Opera/IE 8+ */
}
.arlo_tm_title_holder.contact{
	padding-bottom: 50px;}
.arlo_tm_title_holder:before{
	position: absolute;
	content: "";
	width: 6px;
	height: 72px;
	background-color: #E3872D;
	top: 2px;
}
.arlo_tm_title_holder h3{
	font-size: 50px;
	text-transform: uppercase;
	font-weight: 600;
	letter-spacing: -.5px;
	padding-left: 25px;
	line-height: 1;
/*	font-style: italic;*/
}
.arlo_tm_title_holder span{
	font-size: 16px;
	font-family: "Montserrat";
	padding-left: 25px;
}
.arlo_tm_about_wrapper_all{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	background-color: #fff;
	
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	   -moz-box-sizing: border-box; /* Firefox, other Gecko */
			box-sizing: border-box; /* Opera/IE 8+ */
}

.arlo_tm_main_title_holder{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	text-align: left;
	margin-bottom: 120px;
	
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	   -moz-box-sizing: border-box; /* Firefox, other Gecko */
			box-sizing: border-box; /* Opera/IE 8+ */
}
.arlo_tm_main_title_holder.about{
	text-align: left;
	margin-bottom: 0px;
	padding: 0px;
}
.arlo_tm_main_title_holder h3{
	font-weight: 900;
	font-family: "Montserrat";
	color: #041230;
	font-size: 30px;
	line-height: 1;
}
.arlo_tm_main_title_holder h3 span{position: relative;}
.arlo_tm_main_title_holder h3 span:before{
    position: absolute;
	content: "";
	width: 50px;
	height: 4px;
	background-color: #041230;
	letter-spacing: 0px;
	bottom: -10px;
}
.arlo_tm_about_wrapper_all{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	background-color: #fff;
	
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	   -moz-box-sizing: border-box; /* Firefox, other Gecko */
			box-sizing: border-box; /* Opera/IE 8+ */
}
.arlo_tm_main_title_holder{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	text-align: left;
	margin-bottom: 120px;
	
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	   -moz-box-sizing: border-box; /* Firefox, other Gecko */
			box-sizing: border-box; /* Opera/IE 8+ */
}
.arlo_tm_main_title_holder.about{
	text-align: left;
	margin-bottom: 0px;
	padding: 0px;
}
.arlo_tm_main_title_holder h3{
	font-weight: 900;
	font-family: "Montserrat";
	color: #041230;
	font-size: 30px;
	line-height: 1;
}
.arlo_tm_main_title_holder h3 span{position: relative;}
.arlo_tm_main_title_holder h3 span:before{
    position: absolute;
	content: "";
	width: 50px;
	height: 4px;
	background-color: #041230;
	letter-spacing: 0px;
	bottom: -10px;
}
.arlo_tm_about_wrap{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	padding-bottom: 122px;
	position: relative;
	margin-top: -6px;
	
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	   -moz-box-sizing: border-box; /* Firefox, other Gecko */
			box-sizing: border-box; /* Opera/IE 8+ */ 
}
.arlo_tm_about_wrap .author_wrap{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	position: relative;
	display: flex;
	align-items: center;
	
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	   -moz-box-sizing: border-box; /* Firefox, other Gecko */
			box-sizing: border-box; /* Opera/IE 8+ */ 
}
.arlo_tm_about_wrap .leftbox{
	width: 35%;
	float: left;
	height: auto;
	padding-right: 40px;
	
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	   -moz-box-sizing: border-box; /* Firefox, other Gecko */
			box-sizing: border-box; /* Opera/IE 8+ */
	
}
.arlo_tm_about_wrap .leftbox .about_image_wrap{position: relative;}
.arlo_tm_about_wrap .leftbox .about_image_wrap .image{
	position: absolute;
	z-index: 2;
}
.arlo_tm_about_wrap .leftbox .about_image_wrap .image .inner{
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}
.arlo_tm_about_wrap .leftbox .about_image_wrap .border .inner{
	position: absolute;
	top: 25px !important;
	bottom: -25px !important;
	left: 25px !important;
	right: -25px !important;
	border: 10px solid #041230;
}
.arlo_tm_about_wrap .leftbox .about_image_wrap img{opacity: 0;}
.arlo_tm_about_wrap .rightbox{
	width: 65%;
	float: right;
	padding: 0px 0px 0px 65px;
	
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	   -moz-box-sizing: border-box; /* Firefox, other Gecko */
			box-sizing: border-box; /* Opera/IE 8+ */ 
}
.arlo_tm_about_wrap .subtitle{
	width: 100%;
	float: left;
	margin-bottom: 20px;
}
.arlo_tm_about_wrap .subtitle p{
	font-family: "Montserrat";
	color: #333;
	font-size: 15px;
	font-weight: 600;
}
.arlo_tm_about_wrap .definition{margin-bottom: 15px;}
.arlo_tm_about_wrap .definition p{color: #333;}
.arlo_tm_about_wrap .definition p strong{color: #E3872D;}

.arlo_tm_about_wrap .about_short_contact_wrap{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	margin-bottom: 13px;
	
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	   -moz-box-sizing: border-box; /* Firefox, other Gecko */
			box-sizing: border-box; /* Opera/IE 8+ */
}
.arlo_tm_about_wrap .arlo_tm_main_title_holder{margin-bottom: 40px;}
.arlo_tm_about_wrap .about_short_contact_wrap ul{
	margin: 0px;
	list-style-type: none;
}
.arlo_tm_about_wrap .about_short_contact_wrap ul li{
	margin: 0px 0px 10px 0px;
	width: 50%;
	float: left;
}
.arlo_tm_about_wrap .about_short_contact_wrap ul li:nth-of-type(2n){clear: right;}
.about_short_contact_wrap ul li label{
	font-family: "Montserrat";
	font-weight: 700;
	font-size: 13px;
	color: #000;
	min-width: 85px;
	display: inline-block;
}
.arlo_tm_about_wrap .about_short_contact_wrap ul li a{
	text-decoration: none;
	color: #000;
    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;
}
.arlo_tm_about_wrap .about_short_contact_wrap ul li a:hover{color: #BD0A0D;}
.arlo_tm_about_wrap .buttons_wrap{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	   -moz-box-sizing: border-box; /* Firefox, other Gecko */
			box-sizing: border-box; /* Opera/IE 8+ */
}
.arlo_tm_about_wrap .buttons_wrap ul{
	margin: 0px;
	list-style-type: none;
}
.arlo_tm_about_wrap .buttons_wrap ul li{
	margin: 0px 30px 10px 0px;
	float: left;
}
.arlo_tm_about_wrap .buttons_wrap ul li:last-child{margin-right: 0px;}
.arlo_tm_about_wrap .buttons_wrap ul li a span{
	position: relative;
	z-index: 2;
}
.arlo_tm_about_wrap .buttons_wrap ul li a{
	text-decoration: none;
    color: #fff;
    background-color: #E3872D;
    font-weight: 600;
    font-family: "Montserrat";
    padding: 12px 35px;
    border-radius: 3px;
    display: inline-block;
    position: relative;
    overflow: hidden;;
}
.arlo_tm_about_wrap .buttons_wrap ul li a:before{
	position: absolute;
    content: "";
    top: 0px;
    height: 100%;
    left: -25%;
    width: 0%;
    background-color: #041230;
    transform: skew(50deg);
    transition-duration: .6s;
    z-index: 1;
}
.arlo_tm_about_wrap .buttons_wrap ul li a:hover:before{width: 180%;}
.arlo_tm_skills_wrap,
.arlo_tm_skills_wrap .inner_wrap{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	   -moz-box-sizing: border-box; /* Firefox, other Gecko */
			box-sizing: border-box; /* Opera/IE 8+ */
}
.arlo_tm_skills_wrap{
	background-color: #f6f7fd;
	padding: 90px 0px;
	margin-bottom: 100px;
}
.arlo_tm_skills_wrap .inner_wrap{display: flex;}
.arlo_tm_skills_wrap .leftbox{
	width: 35%;
	height: auto;
	clear: both;
	float: left;
	padding-right:0px;
	
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	   -moz-box-sizing: border-box; /* Firefox, other Gecko */
			box-sizing: border-box; /* Opera/IE 8+ */
}
.arlo_tm_skills_wrap .rightbox{
	width: 65%;
	height: auto;
	clear: both;
	float: right;
	padding-left: 65px;
	
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	   -moz-box-sizing: border-box; /* Firefox, other Gecko */
			box-sizing: border-box; /* Opera/IE 8+ */
}
.progress_bar_wrap_total{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	margin-bottom: 10px;
	position: relative;
	margin-top: -4px;
	
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	   -moz-box-sizing: border-box; /* Firefox, other Gecko */
			box-sizing: border-box; /* Opera/IE 8+ */
}
.arlo_tm_progress_wrap[data-size="big"] .arlo_tm_progress .arlo_tm_bar_bg{height:40px;}
.arlo_tm_progress_wrap[data-size="small"] .arlo_tm_progress .arlo_tm_bar_bg{height:5px;}

.arlo_tm_progress_wrap[data-round="a"] .arlo_tm_progress .arlo_tm_bar_bg,
.arlo_tm_progress_wrap[data-round="a"] .arlo_tm_progress .arlo_tm_bar{
	-webkit-border-radius:2px;
	-moz-border-radius:2px;
	border-radius:2px;
}
.arlo_tm_progress_wrap[data-round="b"] .arlo_tm_progress .arlo_tm_bar_bg,
.arlo_tm_progress_wrap[data-round="b"] .arlo_tm_progress .arlo_tm_bar{
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	border-radius:5px;
}
.arlo_tm_progress_wrap[data-round="c"] .arlo_tm_progress .arlo_tm_bar_bg,
.arlo_tm_progress_wrap[data-round="c"] .arlo_tm_progress .arlo_tm_bar{
	-webkit-border-radius:50px;
	-moz-border-radius:50px;
	border-radius:50px;
}
.arlo_tm_progress{
	width:100%;
	margin-bottom:16px;
}
.arlo_tm_progress:last-child{margin-bottom: 0px;}
.arlo_tm_progress > span{
	margin:0px 0px 3px 0px;
	width:100%;
	display:block;
	text-align:left;
}
.arlo_tm_progress span.label{
	font-size:13px;
	font-weight:700;
	color:#000;
	font-family: "Montserrat";
}
.arlo_tm_progress span.label .experience{font-size: 12px;font-weight: 600;}
.arlo_tm_progress span.number{
	float:right;
	font-size:13px;
	color:#000;
	font-weight: 700;
	font-family: "Montserrat";
}
.arlo_tm_progress .arlo_tm_bar_bg{
	background:rgba(0,0,0,.1);
	width:100%;
	min-width:100%;
	position:relative;
	height:20px;
}
.arlo_tm_progress .arlo_tm_bar_bg .arlo_tm_bar_wrap{
	width:0px;
	height:100%;
}
.arlo_tm_progress .arlo_tm_bar_bg .arlo_tm_bar_wrap.open{
	-webkit-animation: arlo_tm_expand 3s cubic-bezier(0.165, 0.840, 0.440, 1.000);  /* Safari 4+ */
	-moz-animation:    arlo_tm_expand 3s cubic-bezier(0.165, 0.840, 0.440, 1.000);  /* Fx 5+ */
	animation:         arlo_tm_expand 3s cubic-bezier(0.165, 0.840, 0.440, 1.000);  /* IE 10+ */
	width:100%;	
}
.arlo_tm_progress .arlo_tm_bar_bg .arlo_tm_bar{
	height:100%;
	background:#333;
	width:0px;
	overflow:hidden;
}
.arlo_tm_progress_wrap[data-strip="on"] .arlo_tm_progress .arlo_tm_bar{
	background-image: linear-gradient(-45deg, rgba(255, 255, 255, 1) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 1) 75%, transparent 75%, transparent);
	
	-webkit-animation: arlo_tm_bar_move 4s linear infinite;
	-moz-animation: arlo_tm_bar_move 4s linear infinite;
	animation: arlo_tm_bar_move 4s linear infinite;
	background-size: 50px 50px;
}
@-webkit-keyframes arlo_tm_bar_move {0%{background-position: 0 0;} 100% {background-position: 50px 50px;}}
@-moz-keyframes arlo_tm_bar_move {0%{background-position: 0 0;} 100% {background-position: 50px 50px;}}
@keyframes arlo_tm_bar_move {0%{background-position: 0 0;} 100% {background-position: 50px 50px;}}

/*expand width animation*/
@-webkit-keyframes arlo_tm_expand {0%{ width:0%; } 100%{ width:100%; }}
@-moz-keyframes arlo_tm_expand {0%{ width:0%; } 100%{ width:100%; }}
@keyframes arlo_tm_expand {0%{ width:0%; } 100%{ width:100%; }}

.arlo_tm_mini_title_holder{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	   -moz-box-sizing: border-box; /* Firefox, other Gecko */
			box-sizing: border-box; /* Opera/IE 8+ */
}
.arlo_tm_mini_title_holder h4{
	line-height: 1;
	margin-bottom: 18px;
}
.arlo_tm_mini_title_holder.contact h4{margin-bottom:30px;}

/*---------------------------------------------------*/
/*	04) ARLO SERVICES
/*---------------------------------------------------*/

.arlo_tm_services_wrap{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	background-color: #fff;
	margin-bottom: 70px;
	text-align: left;
	
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	   -moz-box-sizing: border-box; /* Firefox, other Gecko */
			box-sizing: border-box; /* Opera/IE 8+ */ 
}
.arlo_tm_services_wrap .arlo_tm_title_holder_wrap{margin-bottom: 93px;}
.arlo_tm_services_wrap .list_wrap{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	   -moz-box-sizing: border-box; /* Firefox, other Gecko */
			box-sizing: border-box; /* Opera/IE 8+ */ 
}
.arlo_tm_services_wrap .list_wrap ul{
	margin: 0px 0px 0px -30px;
	list-style-type: none;
}
.arlo_tm_services_wrap .list_wrap ul li{
	margin: 0px 0px 30px 0px;
	float: left;
	width: 33.3333%;
	padding-left: 30px;
	
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	   -moz-box-sizing: border-box; /* Firefox, other Gecko */
			box-sizing: border-box; /* Opera/IE 8+ */ 
}
.arlo_tm_services_wrap .list_wrap ul li .inner{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	position: relative;
	box-shadow: 0 0 20px rgba(0,0,0,.1);
	padding: 40px 40px 33px 40px;
	top: 0px;
	
	-webkit-transition: all .3s ease;
	   -moz-transition: all .3s ease;
	    -ms-transition: all .3s ease;
	     -o-transition: all .3s ease;
	        transition: all .3s ease;
	
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	   -moz-box-sizing: border-box; /* Firefox, other Gecko */
			box-sizing: border-box; /* Opera/IE 8+ */ 
}
.arlo_tm_services_wrap .list_wrap ul li .inner:hover{top: -5px;}
.arlo_tm_services_wrap .list_wrap ul li .icon{margin-bottom: 21px;}
.arlo_tm_services_wrap .list_wrap ul li .icon .svg{
	width: 40px;
	height: 40px;
	color: #E3872D;
}
.arlo_tm_services_wrap .list_wrap ul li .title_service{margin-bottom: 17px;}
.arlo_tm_services_wrap .list_wrap ul li .title_service h3{
	font-family: "Montserrat";
    font-size: 22px;
    font-weight: 600;
    color: #000000;
	line-height: 1;
}

/*---------------------------------------------------*/
/*	05) ARLO COUNTERBOX
/*---------------------------------------------------*/

.arlo_tm_counter_wrap{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	   -moz-box-sizing: border-box; /* Firefox, other Gecko */
			box-sizing: border-box; /* Opera/IE 8+ */
}
.arlo_tm_counter_wrap{overflow: hidden;}
.arlo_tm_counter_list{
	list-style-type:none;
	width:100%;
	margin: 0px;
	
	-webkit-perspective: 500px;
	-moz-perspective: 500px;
	perspective: 500px;
}
.arlo_tm_counter_list li{
	width:25%;
	float:left;
	text-align:center;
	margin: 0px;
	
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	   -moz-box-sizing: border-box; /* Firefox, other Gecko */
			box-sizing: border-box; /* Opera/IE 8+ */
}
.arlo_tm_counter_list li .inner{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	position: relative;
	padding: 90px 15px 93px 15px;
	
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	   -moz-box-sizing: border-box; /* Firefox, other Gecko */
			box-sizing: border-box; /* Opera/IE 8+ */
}
.arlo_tm_counter_list li .inner:before{
	position: absolute;
	content: "";
	width: 1px;
	top: 35px;
	bottom: 35px;
	background-color: #d1d7db;
	left: 100%;
}
.arlo_tm_counter_list li:nth-child(4) .inner:before{display: none;}
.arlo_tm_counter_list li h3{
	font-family: "Montserrat";
	color: #181a2f;
	margin-bottom: 10px;
}
.arlo_tm_counter_list li h3 > span{
	font-size: 40px;
	font-weight: 700;
}
.arlo_tm_counter_list li .inner > span{
	color:#666;
	font-family: "Open Sans";
	font-size: 14px;
	display: block;
	font-weight: 600;
}

/*---------------------------------------------------*/
/*	06) ARLO PORTFOLIO
/*---------------------------------------------------*/

.arlo_tm_title_holder.portfolio{padding-bottom: 90px;}
.arlo_tm_portfolio_wrapper_all{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	padding-bottom: 70px;
	background-color: #fff;
	
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	   -moz-box-sizing: border-box; /* Firefox, other Gecko */
			box-sizing: border-box; /* Opera/IE 8+ */ 
}
.arlo_tm_portfolio_wrapper_all .arlo_tm_button{text-align: center;}
.arlo_tm_portfolio_wrap{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	   -moz-box-sizing: border-box; /* Firefox, other Gecko */
			box-sizing: border-box; /* Opera/IE 8+ */ 
}
.arlo_tm_portfolio_filter{
	width:100%;
	height: auto;
	text-align:left;
	list-style-type:none;
	margin: 0px 0px 13px 0px;
	display: inline-block;
	
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	   -moz-box-sizing: border-box; /* Firefox, other Gecko */
			box-sizing: border-box; /* Opera/IE 8+ */
}
.arlo_tm_portfolio_filter li{
	display:inline-block;
	margin:0px 40px 0px 0px;
}
.arlo_tm_portfolio_filter li:last-child{margin-right: 0px;}
.arlo_tm_portfolio_filter li a{
	text-decoration:none;
	font-size:14px;
	font-weight:700;
	color:#000;
	display: inline-block;
	margin-bottom: 10px;
	position: relative;
	
	-webkit-transition: all .1s ease;
	   -moz-transition: all .1s ease;
	    -ms-transition: all .1s ease;
	     -o-transition: all .1s ease;
	        transition: all .1s ease;
}
.arlo_tm_portfolio_filter li a.current{color: #BD0A0D;}

/* PORTFOLIO LIST */

.arlo_tm_portfolio_list{
	list-style-type:none;
	margin: 0px 0px 0px -30px;
	
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	   -moz-box-sizing: border-box; /* Firefox, other Gecko */
			box-sizing: border-box; /* Opera/IE 8+ */
}
.arlo_tm_portfolio_list > li{
	width:33.3333%;
	float:left;
	position:relative;
	margin: 0px 0px 30px 0px;
	padding-left: 30px;
	
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	   -moz-box-sizing: border-box; /* Firefox, other Gecko */
			box-sizing: border-box; /* Opera/IE 8+ */
}
.arlo_tm_portfolio_list li img{min-width: 100%;}
.arlo_tm_portfolio_titles {
  white-space: nowrap;
  background: #ffffff;
  font-size: 20px;
  font-weight: 700;
  padding: 5px 15px;
  color: #000000;
  position: fixed;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
}
.arlo_tm_portfolio_titles.visible {
  opacity: 1;
  visibility: visible;
}
.arlo_tm_portfolio_titles .work__cat {
  position: absolute;
  background: #ffffff;
  top: 100%;
  left: 0;
  margin-top: -5px;
  font-family: "Montserrat";
  font-size: 12px;
  font-weight: 400;
  padding: 5px 15px;
}
.entry{position: relative;}
.arlo_tm_portfolio_image_main{
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

/*---------------------------------------------------*/
/*	07) ARLO TESTIMONIALS
/*---------------------------------------------------*/

.arlo_tm_testimonials_wrapper_all{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	   -moz-box-sizing: border-box; /* Firefox, other Gecko */
			box-sizing: border-box; /* Opera/IE 8+ */ 
}
.arlo_tm_testimonial_wrap{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	   -moz-box-sizing: border-box; /* Firefox, other Gecko */
			box-sizing: border-box; /* Opera/IE 8+ */ 
}
.arlo_tm_testimonial_wrap .carousel_wrap{
	width: 100%;
	max-width: 730px;
	margin: 0px auto;
	height: auto;
	clear: both;
	text-align: center;
	cursor: e-resize;
	
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	   -moz-box-sizing: border-box; /* Firefox, other Gecko */
			box-sizing: border-box; /* Opera/IE 8+ */ 
}
.arlo_tm_testimonial_wrap .carousel_wrap ul{
	margin: 0px;
	list-style-type: none;
}
.arlo_tm_testimonial_wrap .carousel_wrap ul li{margin: 0px;}
.arlo_tm_testimonial_wrap .carousel_wrap ul li .inner{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	position: relative;
	
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	   -moz-box-sizing: border-box; /* Firefox, other Gecko */
			box-sizing: border-box; /* Opera/IE 8+ */ 
}
.arlo_tm_testimonial_wrap .quotebox_wrap{
	clear: both;
	margin-bottom: 22px;
}
.arlo_tm_testimonial_wrap .quotebox_wrap i{
	color: #E3872D;
	font-size: 35px;
}
.arlo_tm_testimonial_wrap .definitions_wrap{
	clear: both;
	margin-bottom: 32px;
}
.arlo_tm_testimonial_wrap .definitions_wrap p{
	color: #fff;
	font-size: 27px;
	font-family: "Montserrat";
	font-weight: 600;
	line-height: 1.4;
}
.arlo_tm_testimonial_wrap .name_holder p{
	color: #fff;
	font-size: 18px;
	font-family: "Montserrat";
}

.arlo_tm_universal_box_wrap{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	position: relative;
	
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	   -moz-box-sizing: border-box; /* Firefox, other Gecko */
			box-sizing: border-box; /* Opera/IE 8+ */
}
.arlo_tm_universal_box_wrap .bg_wrap{
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	z-index: 10;
}
.arlo_tm_universal_box_wrap .overlay_image{
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	z-index: 15;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}
.arlo_tm_universal_box_wrap .overlay_video{
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	z-index: 15;
	overflow: hidden;
}
.arlo_tm_universal_box_wrap .overlay_video video{
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	object-fit: cover;
}
.arlo_tm_universal_box_wrap .overlay_color{
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	z-index: 20;
}
.arlo_tm_universal_box_wrap .content{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	position: relative;
	z-index: 25;
	
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	   -moz-box-sizing: border-box; /* Firefox, other Gecko */
			box-sizing: border-box; /* Opera/IE 8+ */
}
.arlo_tm_universal_box_wrap .overlay_image.testimonial{background-image: url(../img/hero/3.jpg);}
.arlo_tm_universal_box_wrap .overlay_color.testimonial{background-color: rgba(7,23,55,.8);}
.arlo_tm_universal_box_wrap .content.testimonial{padding: 82px 0px 90px 0px;}

/*---------------------------------------------------*/
/*	08) ARLO NEWS
/*---------------------------------------------------*/

.arlo_tm_list_wrap{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	   -moz-box-sizing: border-box; /* Firefox, other Gecko */
			box-sizing: border-box; /* Opera/IE 8+ */
}
.arlo_tm_list_wrap > ul.total{
	margin: 0px 0px 0px -30px;
	list-style-type: none;
}
.arlo_tm_list_wrap > ul.total > li{
	margin: 0px 0px 30px 0px;
	float: left;
	width: 33.3333333%;
	padding-left: 30px;
	
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	   -moz-box-sizing: border-box; /* Firefox, other Gecko */
			box-sizing: border-box; /* Opera/IE 8+ */
}
.arlo_tm_list_wrap > ul.total > li:last-child{margin-bottom: 0px;}
.arlo_tm_list_wrap > ul.total > li .inner_list{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	position: relative;
	
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	   -moz-box-sizing: border-box; /* Firefox, other Gecko */
			box-sizing: border-box; /* Opera/IE 8+ */
}

.arlo_tm_list_wrap > ul.total_100 > li{
	margin: 0px 0px 10px 0px;
	float: left;
	width: 100%;
	padding-left: 20px;
	
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	   -moz-box-sizing: border-box; /* Firefox, other Gecko */
			box-sizing: border-box; /* Opera/IE 8+ */
}


.arlo_tm_news_wrap{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	padding-top: 50px;
	padding-bottom: 25px;
	background-color: #f6f7fd;
	margin-bottom: 25px;
	
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	   -moz-box-sizing: border-box; /* Firefox, other Gecko */
			box-sizing: border-box; /* Opera/IE 8+ */ 
}
.arlo_tm_news_wrap .link_news{
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	z-index: 22;
}
.arlo_tm_news_wrap .arlo_tm_list_wrap .inner_list{
	background-color: #fff;
	border-radius: 3px;
}
.arlo_tm_news_wrap .definitions_wrap{
	padding: 40px 30px 47px 30px;}
.arlo_tm_news_wrap .image_wrap{position: relative;}
.arlo_tm_news_wrap .image_wrap .big{display: none;}
.arlo_tm_news_wrap .image_wrap .small{display: block;}
.arlo_tm_news_wrap .image_wrap .small_centered {
    max-width: 70%; /* Adjust the size as desired */
    display: block;
    margin: 0 auto;
}

.arlo_tm_news_wrap .news_image{
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.arlo_tm_news_wrap .date_wrap{margin-bottom: 16px;}
.arlo_tm_news_wrap .date_wrap p{
	color: #333;
	font-family: "Montserrat";
	font-weight: 600;
}
.arlo_tm_news_wrap .full_def{
	display: none;}
.arlo_tm_news_wrap .date_wrap p a{
	color: #000;
	text-decoration: none;
	text-transform: uppercase;
	position: relative;
	margin-left: 23px;
	
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}
.arlo_tm_news_wrap .date_wrap p a:hover{color: #E3872D;}
.arlo_tm_news_wrap .date_wrap p a:after{
	position: absolute;
	content: "";
	width: 10px;
	height: 1px;
	background-color: #333;
	top: 50%;
	right: 100%;
	margin-right: 8px;
}
.arlo_tm_news_wrap .title_holder{margin-bottom: 18px;}
.arlo_tm_news_wrap .title_holder h3{
	color: #fff;
	line-height: 1.4;
	font-weight: 600;
	font-family: "Montserrat";
}
.arlo_tm_news_wrap .title_holder h3 a{
	text-decoration: none;
	color: #041230;
	font-size: 22px;
	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;
}
.arlo_tm_news_wrap .title_holder h3 a:hover{color: #E3872D;}
.arlo_tm_news_wrap .definition{margin-bottom: 26px;}
.arlo_tm_news_wrap .definition p{color: #333;}
.arlo_tm_news_wrap .read_more a{
	text-decoration: none;
    color: #fff;
    background-color: #E3872D;
    font-weight: 600;
    font-family: "Montserrat";
    padding: 12px 35px;
    border-radius: 3px;
    display: inline-block;
    position: relative;
    overflow: hidden;
}
.arlo_tm_news_wrap .read_more a:before{
	position: absolute;
    content: "";
    top: 0px;
    height: 100%;
    left: -25%;
    width: 0%;
    background-color: #041230;
    transform: skew(50deg);
    transition-duration: .6s;
    z-index: 1;
}
.arlo_tm_news_wrap .read_more a:hover:before{width: 170%;}
.arlo_tm_news_wrap .read_more a span{
	position: relative;
	z-index: 2;
}
.arlo_tm_popup_share_wrap{display: none;}

#arlo_tm_popup_blog{
	opacity: 0;
	visibility: hidden;
	
	width: 90%;
	height: 100vh;
	position: fixed;
	background-color: rgb(248, 241, 219);
	padding: 50px 0px;	
	z-index: 99999999;

	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	   -moz-box-sizing: border-box; /* Firefox, other Gecko */
			box-sizing: border-box; /* Opera/IE 8+ */
	
	-webkit-transition: all .2s ease;
	   -moz-transition: all .2s ease;
	    -ms-transition: all .2s ease;
	     -o-transition: all .2s ease;
	        transition: all .2s ease;
}
#arlo_tm_popup_blog.opened{
	opacity: 1;
	visibility: visible;
}
#arlo_tm_popup_blog .definitions_wrap{
	width: 100%;
	float: left;
}
#arlo_tm_popup_blog .full_def{
	display: block;
	margin-bottom: 20px;

	width: 100%;

	float: left;
}
#arlo_tm_popup_blog .full_def p{display: inline-block;}
#arlo_tm_popup_blog .definition{display: none;}
#arlo_tm_popup_blog .inner_popup{
	width: 100%;
	float: left;
	clear: both;
	position: relative;
}
#arlo_tm_popup_blog .date_wrap p{
	color: #333;
    font-family: "Montserrat";
    font-weight: 600;
}
#arlo_tm_popup_blog .date_wrap p a{
	color: #333;
    text-decoration: none;
    text-transform: uppercase;
    position: relative;
    margin-left: 23px;
	
	-webkit-transition: all .3s ease;
	   -moz-transition: all .3s ease;
	    -ms-transition: all .3s ease;
	     -o-transition: all .3s ease;
	        transition: all .3s ease;
}
#arlo_tm_popup_blog .date_wrap p a:hover{color: #BD0A0D;}
#arlo_tm_popup_blog .image_wrap{
	margin-bottom: 45px;
	position: relative;
	width: 100%;
	float: left;
}
#arlo_tm_popup_blog .image_wrap .big{
	display: block;
	min-height: 250px;
}
#arlo_tm_popup_blog .image_wrap .small{display: none;}
#arlo_tm_popup_blog .image_wrap .news_image{
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}
#arlo_tm_popup_blog .date_wrap{
	margin-bottom: 16px;
	width: 100%;
	float: left;
}
#arlo_tm_popup_blog .date_wrap p a:before{
	position: absolute;
    content: "";
    width: 10px;
    height: 1px;
    background-color: #333;
    top: 50%;
    right: 100%;
    margin-right: 8px;
}
#arlo_tm_popup_blog .title_holder{
	margin-bottom: 18px;
	width: 100%;
	float: left;
}
#arlo_tm_popup_blog .title_holder h3{
    line-height: 1.4;
    font-weight: 600;
    font-family: "Montserrat";
}
#arlo_tm_popup_blog .title_holder h3 a{
    text-decoration: none;
    color: #000;
    font-size: 22px;
    display: block;
}
#arlo_tm_popup_blog .definition p{color: #333;}
#arlo_tm_popup_blog .read_more{display: none;}
#arlo_tm_popup_blog .arlo_tm_popup_share_wrap{
	display: block;
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	padding-bottom: 5px;
	
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	   -moz-box-sizing: border-box; /* Firefox, other Gecko */
			box-sizing: border-box; /* Opera/IE 8+ */
}
#arlo_tm_popup_blog .arlo_tm_popup_share_wrap ul{
	margin: 0px;
	list-style-type: none;
}
#arlo_tm_popup_blog .arlo_tm_popup_share_wrap ul li{
	display: inline-block;
	margin: 0px 15px 0px 0px;
}
#arlo_tm_popup_blog .arlo_tm_popup_share_wrap ul li a{
	text-decoration: none;
    color: #000;
    font-size: 15px;
    position: relative;
    font-family: "Montserrat";
    font-weight: 600;
	
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}
#arlo_tm_popup_blog .arlo_tm_popup_share_wrap ul li a:hover{color: #BD0A0D;}
#arlo_tm_popup_blog .close{
	position: absolute;
	top: 30px;
	right: 40px;
	width: 50px;
	height: 50px;
	cursor: pointer;
	display: block;
	z-index: 111111111;
}
#arlo_tm_popup_blog .close a{
	position: relative;
	display: block;
	height: 30px;
	margin-right: 10px;
	margin-top: 12px;
}
#arlo_tm_popup_blog .close a:before{
	position: absolute;
	content: "";
	width: 2px;
	height: 20px;
	background-color: rgba(0,0,0,1.00);
	top: 5px;
	right: 13px;
	transform: rotate(45deg);
}
#arlo_tm_popup_blog .close a:after{
	position: absolute;
	content: "";
	width: 2px;
	height: 20px;
	background-color: rgba(0,0,0,1.00);
	top: 5px;
	right: 13px;
	transform: rotate(135deg);
}

/*---------------------------------------------------*/
/*	09) ARLO CONTACT
/*---------------------------------------------------*/

.arlo_tm_contact_wrap_all{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	background-color: #fff;
	
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	   -moz-box-sizing: border-box; /* Firefox, other Gecko */
			box-sizing: border-box; /* Opera/IE 8+ */
}
.arlo_tm_contact_wrap_all .leftbox{
	width: 40%;
	height: auto;
	float: left;
	padding-right: 40px;
	
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	   -moz-box-sizing: border-box; /* Firefox, other Gecko */
			box-sizing: border-box; /* Opera/IE 8+ */		
}
.arlo_tm_contact_wrap_all .leftbox .short_info_wrap{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	   -moz-box-sizing: border-box; /* Firefox, other Gecko */
			box-sizing: border-box; /* Opera/IE 8+ */
}
.arlo_tm_contact_wrap_all .leftbox .short_info_wrap ul{
	margin: 0px;
	list-style-type: none;
}
.arlo_tm_contact_wrap_all .leftbox .short_info_wrap ul li{
	margin: 0px 0px 25px 0px;
}
.arlo_tm_contact_wrap_all .leftbox .short_info_wrap ul li label{
	font-family: "Montserrat";
    font-weight: 700;
    font-size: 13px;
    color: #000;
}
.arlo_tm_contact_wrap_all .leftbox .short_info_wrap ul li span{padding-left: 5px;}
.arlo_tm_contact_wrap_all .leftbox .short_info_wrap ul li a{
	text-decoration: none;
	color: #000;
}
.arlo_tm_contact_wrap_all .rightbox{
	width: 60%;
	height: auto;
	float: right;
	
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	   -moz-box-sizing: border-box; /* Firefox, other Gecko */
			box-sizing: border-box; /* Opera/IE 8+ */		
}
.arlo_tm_contact_wrap{
	max-width: 830px;
	height: auto;
	margin: 0px auto;
	
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	   -moz-box-sizing: border-box; /* Firefox, other Gecko */
			box-sizing: border-box; /* Opera/IE 8+ */
}
.arlo_tm_contact_wrap .subtitle{
	text-align: center;
	margin-bottom: 69px;
}
.arlo_tm_contact_wrap .subtitle p{color: #333;}
.arlo_tm_contact_wrap .main_input_wrap{
	margin-bottom: 75px;
	position: relative;
	top: -24px;
}
.arlo_tm_contact_wrap .main_input_wrap,
.arlo_tm_contact_wrap .main_input_wrap .wrap{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	   -moz-box-sizing: border-box; /* Firefox, other Gecko */
			box-sizing: border-box; /* Opera/IE 8+ */
}
.arlo_tm_contact_wrap .main_input_wrap .wrap{margin-bottom: 20px;}
.arlo_tm_contact_wrap .main_input_wrap .wrap input{
	width: 100%;
	text-align: left;
	background-color: transparent;
	border: none;
	border-bottom: 1px solid rgba(10,4,37,1);
	color: #333;
	padding-left: 0px !important;
}
.arlo_tm_contact_wrap .main_input_wrap .wrap input:focus{
	outline: none;
}
.arlo_tm_contact_wrap .main_input_wrap .wrap textarea{
	width: 100%;
	height: 80px;
	text-align: left;
	background-color: transparent;
	border: none;
	border-bottom: 1px solid rgba(10,4,37,1);
	color: #333;
	padding-left: 0px !important;
}
.arlo_tm_contact_wrap .main_input_wrap .wrap textarea:focus{
	outline: none;
}
.arlo_tm_contact_wrap .arlo_tm_button a{
	text-decoration: none;
    color: #fff;
    background-color: #E3872D;
    font-weight: 600;
    font-family: "Montserrat";
    padding: 12px 35px;
    border-radius: 3px;
    display: inline-block;
    position: relative;
    overflow: hidden;
}
.arlo_tm_contact_wrap .arlo_tm_button a:before{
	position: absolute;
    content: "";
    top: 0px;
    height: 100%;
    left: -25%;
    width: 0%;
    background-color: #041230;
    transform: skew(50deg);
    transition-duration: .6s;
    z-index: 1;
}
.arlo_tm_contact_wrap .arlo_tm_button a:hover:before{width: 170%;}
.arlo_tm_contact_wrap .arlo_tm_button a span{
	position: relative;
	z-index: 2;
}
.arlo_tm_contact_wrap .empty_notice{
	color: #BD0A0D;
	margin-bottom: 7px;
	display: none;
	text-align: left;
}
.arlo_tm_contact_wrap .contact_error{
	color: rgba(255,0,4,1.00);
	text-align: left;
}
.arlo_tm_contact_wrap .returnmessage{
	color:#0064FF;
	margin-bottom: 7px;
	text-align: left;
}

.arlo_tm_footer_wrap{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	text-align: left;
	background-color: #041230;
	
	
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	   -moz-box-sizing: border-box; /* Firefox, other Gecko */
			box-sizing: border-box; /* Opera/IE 8+ */ 
}
.arlo_tm_footer_wrap p{color: #fff;}
.arlo_tm_footer_wrap p a{
	text-decoration: none;
	color: #fff;
	font-family: "Montserrat";
	font-weight: 600;
    position: relative;
}

/*---------------------------------------------------*/
/*	10) EDREA TO TOP
/*---------------------------------------------------*/

.arlo_tm_totop{
	position: fixed;
	bottom: 40px;
	right: 55px;
	z-index: 100;
	overflow: hidden;
	outline: 1px solid rgba(255,255,255,.2);

	background-color: #E3872D;
    padding: 22px;
    border-radius: 3px;
    display: inline-block;
	
	opacity: 0;
	visibility: hidden;
	
	-webkit-transition: all .5s ease;
	   -moz-transition: all .5s ease;
	    -ms-transition: all .5s ease;
	     -o-transition: all .5s ease;
	        transition: all .5s ease;
}
.arlo_tm_totop:before{
	position: absolute;
    content: "";
    top: 0px;
    height: 100%;
    left: -75%;
    width: 0%;
    background-color: #041230;
    transform: skew(50deg);
    transition-duration: .6s;
    z-index: 1;
}
.arlo_tm_totop:after{
	width: 0px;
    height: 0px;
    position: absolute;
    content: '';
    border: 5px solid transparent;
    border-bottom-color: #fff;
    top: 14px;
    left: 17px;
	z-index: 2;
}
.arlo_tm_totop:hover:before{width: 290%;}
.arlo_tm_totop.opened{
	opacity: 1;
	visibility: visible;
	bottom: 55px;
}

/*---------------------------------------------------*/
/*	11) ARLO PARTICLE HOMEPAGE
/*---------------------------------------------------*/

#particles-js {
	width: 100%;
	height: 100%;
  	position: relative;
  	z-index: 2;
}
.arlo_tm_universal_box_wrap.particle{
	height: 100vh;
	position: relative;
	background-image: url(../img/hero/2.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}
.arlo_tm_universal_box_wrap.particle .particle_overlay{
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	background-color:rgba(7,23,55,.8);
}

/*---------------------------------------------------*/
/*	12) ARLO RIPPLE HOMEPAGE
/*---------------------------------------------------*/

.arlo_tm_ripple_wrap{
	width: 100%;
	height:100vh;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	background-image: url(../img/hero/2.jpg);
	position: relative;
}
.arlo_tm_ripple_wrap .overlay{
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	background-color: rgba(7,23,55,.8);
	z-index: 1;
}
.arlo_tm_ripple_wrap .container{
	height: 100%;
	z-index: 2;
}


/*---------------------------------------------------*/
/*	 ARLO INTRO_PAGE
/*---------------------------------------------------*/

.arlo_tm_intro_universal_bg_wrap{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	position: relative;
	
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	   -moz-box-sizing: border-box; /* Firefox, other Gecko */
			box-sizing: border-box; /* Opera/IE 8+ */
}
.arlo_tm_intro_universal_bg_wrap .bg_wrap{
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	z-index: 10;
}
.arlo_tm_intro_universal_bg_wrap .bg_wrap .overlay_image{
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	z-index: 15;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}
.arlo_tm_intro_universal_bg_wrap .bg_wrap .overlay_color{
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	z-index: 20;
}
.arlo_tm_intro_universal_bg_wrap .content{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	position: relative;
	z-index: 30;
	
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	   -moz-box-sizing: border-box; /* Firefox, other Gecko */
			box-sizing: border-box; /* Opera/IE 8+ */
}
.arlo_tm_intro_universal_bg_wrap .bg_wrap .overlay_image.top{background-image: url(../img/hero/2.jpg);}
.arlo_tm_intro_universal_bg_wrap .bg_wrap .overlay_color.top{background-color: rgba(10,4,37,.85);}
.arlo_tm_intro_universal_bg_wrap .content.top{height: 75vh;}
.arlo_tm_intro_universal_bg_wrap .content.top .main_titles_wrap{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	text-align: center;
	width: 100%;
	padding: 0px 20px;
	
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	   -moz-box-sizing: border-box; /* Firefox, other Gecko */
			box-sizing: border-box; /* Opera/IE 8+ */
}
.arlo_tm_intro_universal_bg_wrap .logo_holder{margin-bottom: 25px;}
.arlo_tm_intro_universal_bg_wrap .logo_holder span{
	display: block;
	color: #fff;
	font-size: 36px;
	text-transform: uppercase;
	font-weight: 600;
	padding-top: 10px;
}
.arlo_tm_intro_universal_bg_wrap .intro_definition{margin-bottom: 26px;}
.arlo_tm_intro_universal_bg_wrap .intro_definition p{
	color: #FFFFFF;
	font-size: 25px;
	font-weight: 500;
	font-family: "Montserrat";
}
.arlo_tm_intro_universal_bg_wrap .purchase_button a span{
	position: relative;
	z-index: 2;
}
.arlo_tm_intro_universal_bg_wrap .purchase_button a{
	text-decoration: none;
    color: #fff;
    background-color: #fd4d4d;
    font-weight: 600;
    font-family: "Montserrat";
    padding: 12px 40px;
    border-radius: 3px;
    display: inline-block;
    position: relative;
    overflow: hidden;
}
.arlo_tm_intro_universal_bg_wrap .purchase_button a:before{
	position: absolute;
    content: "";
    top: 0px;
    height: 100%;
    left: -25%;
    width: 0%;
    background-color: #fff;
    transform: skew(50deg);
    transition-duration: .6s;
    z-index: 1;
}
.arlo_tm_intro_universal_bg_wrap .purchase_button a:hover:before{width: 160%;}
.arlo_tm_intro_universal_bg_wrap .purchase_button a:hover{color: #000;}
.arlo_tm_intro_universal_bg_wrap .purchase_button a i{margin-right: 10px;}
.arlo_tm_main_demos_wrap,
.arlo_tm_main_demos_title,
.arlo_tm_main_demos_list_wrap,
.arlo_tm_main_demos_list_wrap ul li .inner{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	background-color: #fff;
	
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	   -moz-box-sizing: border-box; /* Firefox, other Gecko */
			box-sizing: border-box; /* Opera/IE 8+ */
}
.arlo_tm_main_demos_wrap{padding-bottom: 60px;}
.arlo_tm_main_demos_title{text-align: center;}
.arlo_tm_main_demos_title span{
	display: inline-block;
	text-align: center;
	color: #000;
	font-size: 25px;
	font-weight: 600;
	padding: 80px 0px;
	text-transform: uppercase;
	font-family: "Montserrat";
}
.arlo_tm_main_demos_title.another span{padding-top: 20px !important;}
.arlo_tm_main_demos_list_wrap ul{
	margin: 0px 0px 0px -40px;
	list-style-type: none;
}
.arlo_tm_main_demos_list_wrap ul li{
	margin: 0px 0px 40px 0px;
	float: left;
	width: 33.3333%;
	padding-left: 40px;
	position: relative;
	top: 0px;
	
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	   -moz-box-sizing: border-box; /* Firefox, other Gecko */
			box-sizing: border-box; /* Opera/IE 8+ */
	
	-webkit-transition: all .3s ease;
	   -moz-transition: all .3s ease;
	    -ms-transition: all .3s ease;
	     -o-transition: all .3s ease;
	        transition: all .3s ease;
}
.arlo_tm_main_demos_list_wrap ul li:hover{top: -5px;left: 0px;}
.arlo_tm_main_demos_list_wrap ul li .inner{
	position: relative;
	overflow: hidden;
	box-shadow: 0px 5px 40px -8px rgba(0,0,0,.1);
	padding-bottom: 20px;
}
.arlo_tm_main_demos_list_wrap ul li .inner .image_holder{margin-bottom: 15px;}
.arlo_tm_main_demos_list_wrap ul li .inner .image_holder img{min-width: 100%;}
.arlo_tm_main_demos_list_wrap ul li .inner .name{
	width: 100%;
	float: left;
	text-align: center;
}
.arlo_tm_main_demos_list_wrap ul li .inner .name span{
	color: #FFFFFF;
	font-size: 18px;
	font-weight: 500;
	display: inline-block;
	text-transform: uppercase;
}
.arlo_tm_main_demos_list_wrap ul li .inner .name span a{
	text-decoration: none;
	color: #000;
	font-family: "Montserrat";
	
	-webkit-transition: all .3s ease;
	   -moz-transition: all .3s ease;
	    -ms-transition: all .3s ease;
	     -o-transition: all .3s ease;
	        transition: all .3s ease;
}
.arlo_tm_main_demos_list_wrap ul li .inner .name span a:hover{color: #BC0127;}
.arlo_tm_main_demos_list_wrap ul li .inner .new{
	position: absolute;
	top: 15px;
	left:-33px;
	transform: rotate(-45deg);
}
.arlo_tm_main_demos_list_wrap ul li .inner .new span{
	display: inline-block;
	color: #FFFFFF;
	background-color: #BC0127;
	text-transform: uppercase;
	font-weight: 600;
	font-size: 16px;
	padding: 5px 45px;
}
.arlo_tm_footer_wrap.intro{
	padding-left: 40px;
	padding-right: 40px;
	text-align: center;
}

/*---------------------------------------------------*/
/*	13) ARLO PORTFOLIO SINGLE
/*---------------------------------------------------*/

.arlo_tm_portfolio_single_wrap{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	padding-top: 150px;
	
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	   -moz-box-sizing: border-box; /* Firefox, other Gecko */
			box-sizing: border-box; /* Opera/IE 8+ */
}
.arlo_tm_portfolio_single_wrap .title_holder h3{
	font-size: 50px;
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: -.5px;
    line-height: 1;
	margin-bottom: 100px;
}
.arlo_tm_portfolio_single_wrap .details_wrap{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	display: flex;
	flex-direction: row;
	margin-bottom: 100px;
	
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	   -moz-box-sizing: border-box; /* Firefox, other Gecko */
			box-sizing: border-box; /* Opera/IE 8+ */
}
.arlo_tm_portfolio_single_wrap .details_wrap .leftbox{
	width: 40%;
	height: auto;
	float: left;
	padding-right: 50px;
	
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	   -moz-box-sizing: border-box; /* Firefox, other Gecko */
			box-sizing: border-box; /* Opera/IE 8+ */
}
.arlo_tm_portfolio_single_wrap .details_wrap .name_holder h3{
	font-family: "Montserrat";
    font-size: 22px;
    font-weight: 600;
    color: #000000;
    line-height: 1;
	margin-bottom: 20px;
}
.arlo_tm_portfolio_single_wrap .details_wrap .short_list ul{
	margin: 0px;
	list-style-type: none;
}
.arlo_tm_portfolio_single_wrap .details_wrap .short_list ul li{margin: 0px 0px 3px 0px;}
.arlo_tm_portfolio_single_wrap .details_wrap .short_list ul li:last-child{margin-bottom: 0px;}
.arlo_tm_portfolio_single_wrap .details_wrap .short_list ul li span{display: inline-block;}
.arlo_tm_portfolio_single_wrap .details_wrap .short_list ul li span.first{
    font-weight: 600;
	min-width: 150px;
}
.arlo_tm_portfolio_single_wrap .details_wrap .rightbox{
	width: 60%;
	height: auto;
	float: left;
}
.arlo_tm_portfolio_single_wrap .details_wrap .rightbox p{line-height: 2;}
.arlo_tm_portfolio_single_wrap .images_list{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	margin-bottom: 50px;
	
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	   -moz-box-sizing: border-box; /* Firefox, other Gecko */
			box-sizing: border-box; /* Opera/IE 8+ */
}
.arlo_tm_portfolio_single_wrap .images_list ul{
	margin: 0px;
	list-style-type: none;
}
.arlo_tm_portfolio_single_wrap .images_list ul li{
	margin: 0px 0px 50px 0px;
	float: left;
	width: 100%;
}
.arlo_tm_portfolio_single_wrap .images_list ul li:last-child{margin-bottom: 0px;}
.arlo_tm_portfolio_single_wrap .images_list ul li img{min-width: 100%;}
.arlo_tm_portfolio_single_wrap .pagination_wrap{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	margin-bottom: 100px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	   -moz-box-sizing: border-box; /* Firefox, other Gecko */
			box-sizing: border-box; /* Opera/IE 8+ */
}
.arlo_tm_portfolio_single_wrap .pagination_wrap a{
	text-decoration: none;
	color: #000000;
	font-weight: 600;
	font-size: 16px;
	
	-webkit-transition: all .3s ease;
	   -moz-transition: all .3s ease;
	    -ms-transition: all .3s ease;
	     -o-transition: all .3s ease;
	        transition: all .3s ease;
}
.arlo_tm_portfolio_single_wrap .pagination_wrap a:hover{color: #E3872D;}

/*---------------------------------------------------*/
/*	14) ARLO MOBILE HEADER
/*---------------------------------------------------*/

.arlo_tm_mobile_header_wrap{
	width: 100%;
	height: auto;
	position: fixed;
	z-index: 11111111;
	left: 0px;
	top: 0px;
	display: none;
}
.arlo_tm_mobile_header_wrap .main_wrap{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	padding: 30px 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background-color: #041230;
	border-bottom: 1px solid rgba(255,255,255,.1);
	
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	   -moz-box-sizing: border-box; /* Firefox, other Gecko */
			box-sizing: border-box; /* Opera/IE 8+ */
}
.arlo_tm_trigger{width: auto;}
.arlo_tm_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;
}
.arlo_tm_trigger .hamburger-box{
    width: 30px;
    height: 18px;
    display: inline-block;
    position: relative;
}
.arlo_tm_trigger .hamburger-inner{
    display: block;
    top: 50%;
    margin-top: -2px;
}
.arlo_tm_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;
}
.arlo_tm_trigger .hamburger-inner::before,
.arlo_tm_trigger .hamburger-inner::after{
    content: "";
    display: block;
}
.arlo_tm_trigger .hamburger-inner::before{top: -8px;}
.arlo_tm_trigger .hamburger-inner::after{ bottom: -10px;}
.arlo_tm_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);
}
.arlo_tm_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;
}
.arlo_tm_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);
}
.arlo_tm_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);
}
.arlo_tm_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;
}
.arlo_tm_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);
}
.arlo_tm_trigger .hamburger{
	padding: 0px;
	height: 100%;
	display: table-cell;
	vertical-align: middle;
}
.arlo_tm_trigger .hamburger-box{display: block;}
.arlo_tm_trigger .hamburger .hamburger-inner::before,
.arlo_tm_trigger .hamburger .hamburger-inner::after,
.arlo_tm_trigger .hamburger .hamburger-inner{
	background-color: #fff;
	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;
}
.arlo_tm_mobile_menu_wrap{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	background-color: rgba(4,18,48,.97);
	padding: 30px 20px;
	display: none;
	border-bottom: 1px solid rgba(0,0,0,.09);
	border-top: 1px solid rgba(0,0,0,.09);
	
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	   -moz-box-sizing: border-box; /* Firefox, other Gecko */
			box-sizing: border-box; /* Opera/IE 8+ */	
}
.arlo_tm_mobile_menu_wrap .mob_menu{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	   -moz-box-sizing: border-box; /* Firefox, other Gecko */
			box-sizing: border-box; /* Opera/IE 8+ */
}
.arlo_tm_mobile_menu_wrap .mob_menu > ul{
	margin: 0px;
	list-style-type: none;
}
.arlo_tm_mobile_menu_wrap .mob_menu > ul > li{margin: 0px 0px 5px 0px;}
.arlo_tm_mobile_menu_wrap .mob_menu > ul > li:last-child{margin-bottom: 0px;}
.arlo_tm_mobile_menu_wrap .mob_menu > ul > li a{
	text-decoration: none;
	color: #fff;
	font-family: "Montserrat";
	font-weight: 600;
	font-size: 19px;
}

/*---------------------LLM STUFF------------------------------*/

/* Scrollable container */
.scrollable-container {
    display: flex;
    overflow-x: hidden;
    scroll-behavior: smooth;
    width: 100%;
    position: relative;
}

/* Research item styling */
.scrollable-container .research-item {
    flex: 0 0 33.33%; /* Show 3 items at a time */
    box-sizing: border-box;
    padding: 10px;
}

/* Navigation buttons */
.nav-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
    z-index: 1;
}

.nav-button.left {
    left: 0;
}

.nav-button.right {
    right: 0;
}

/*---------------------------------------------------*/
/* LEFT MENU SCROLLBAR
/*---------------------------------------------------*/

.menu_list_wrap {
    max-height: 70vh; /* Adjust this value as needed */
    overflow-y: auto;
    padding-right: 10px; /* Adds some space for the scrollbar */
}

/* Optional: Customize the scrollbar appearance */
.menu_list_wrap::-webkit-scrollbar {
    width: 6px;
}

.menu_list_wrap::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}

.menu_list_wrap::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 3px;
}

.menu_list_wrap::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
}

/*---------------------------------------------------*/
/*	ECA TWO COLUMNS
/*---------------------------------------------------*/

.arlo_tm_list_wrap .total.two-column {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

.arlo_tm_list_wrap .total.two-column li {
    width: 100%;
    margin-right: 0;
}

.image_wrap.large-image {
    height: 300px; /* Adjust this value to increase image size */
}

.image_wrap.large-image .news_image {
    background-size: cover;
    background-position: center;
    height: 100%;
}

/* Responsive adjustments */
@media screen and (max-width: 768px) {
    .arlo_tm_list_wrap .total.two-column {
        grid-template-columns: 1fr;
    }
}


/*---------------------------------------------------*/
/*	RESEARCH THREE COLUMNS
/*---------------------------------------------------*/


/* Add this CSS to your stylesheet */
.arlo_tm_list_wrap .total.three-column {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.arlo_tm_list_wrap .total.three-column li {
    width: 100%;
    margin-right: 0;
}

.image_wrap.large-images {
    height: 250px; /* Adjusted height for three-column layout */
}

.image_wrap.large-images .news_image {
    background-size: cover;
    background-position: center;
    height: 100%;
}

/* Responsive adjustments */
@media screen and (max-width: 992px) {
    .arlo_tm_list_wrap .total.three-column {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 576px) {
    .arlo_tm_list_wrap .total.three-column {
        grid-template-columns: 1fr;
    }
}


/*---------------------------------------------------*/
/*	RESEARCH PUBLICATION STYLES
/*---------------------------------------------------*/

.pub-type-badge {
	display: inline-block;
	padding: 3px 8px;
	border-radius: 12px;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-right: 8px;
	color: white;
	text-decoration: none;
	vertical-align: middle;
}

.pub-type-journal {
	background-color: #28a745;
}

.pub-type-conference {
	background-color: #e91e63;
}

.pub-type-book {
	background-color: #ff9800;
}

.publication-wrapper {
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.publication-wrapper:hover {
	transform: translateY(-5px);
	box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
}

.project-links {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 15px;
}

.project-links a {
	border: 2px solid #000;
	border-radius: 8px;
	padding: 8px 12px;
	background: none;
	color: #000;
	text-decoration: none;
	transition: box-shadow 0.3s ease;
}

.project-links a:hover {
	box-shadow: 0 4px 8px rgba(0,0,0,0.2) !important;
	color: #000;
}

/* Mobile Responsive for Research Publications */
@media (max-width: 768px) {
	.project-links {
		flex-direction: column;
	}
	
	.project-links a {
		text-align: center;
		width: 100%;
	}
	
	.publication-wrapper {
		padding: 15px !important;
		margin-bottom: 15px;
	}
	
	.pub-type-badge {
		font-size: 10px;
		padding: 2px 6px;
	}
}


/* BibTeX Dropdown Styles */
.bibtex-content {
	display: none;
	margin-top: 10px;
	padding: 15px;
	background: #f5f5f5;
	border: 1px solid #ddd;
	border-radius: 8px;
	position: relative;
}

.bibtex-content.active {
	display: block;
}

.bibtex-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 10px;
	padding-bottom: 10px;
	border-bottom: 1px solid #ddd;
}

.bibtex-header span {
	font-weight: 600;
	font-size: 14px;
	color: #333;
}

.bibtex-content pre {
	background: #2d2d2d;
	color: #f8f8f2;
	padding: 15px;
	border-radius: 4px;
	overflow-x: auto;
	margin: 0;
	font-family: 'Courier New', monospace;
	font-size: 13px;
	line-height: 1.5;
}

.copy-button {
	background: none;
	border: 2px solid #333;
	border-radius: 6px;
	padding: 5px 10px;
	cursor: pointer;
	color: #333;
	font-size: 12px;
	transition: all 0.3s ease;
}

.copy-button:hover {
	background: #333;
	color: #fff;
}

.copy-button i {
	margin-right: 5px;
}

/* BibTeX Modal Styles Popup */

.bibtex-modal {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.7);
	z-index: 99999;
	justify-content: center;
	align-items: center;
}

.bibtex-modal.active {
	display: flex !important;
}

.bibtex-modal-content {
	background: white;
	border-radius: 12px;
	padding: 25px;
	max-width: 700px;
	width: 90%;
	max-height: 80vh;
	overflow-y: auto;
	position: relative;
	box-shadow: 0 10px 40px rgba(0,0,0,0.3);
}

.bibtex-close {
	position: absolute;
	top: 15px;
	right: 15px;
	background: none;
	border: none;
	font-size: 24px;
	cursor: pointer;
	color: #666;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
	z-index: 10;
}

.bibtex-close:hover {
	background: #f0f0f0;
	color: #000;
}

.bibtex-modal-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20px;
	padding-bottom: 15px;
	padding-right: 40px;
	border-bottom: 2px solid #e0e0e0;
}

.bibtex-modal-header h3 {
	font-size: 18px;
	font-weight: 600;
	color: #333;
	margin: 0;
	flex: 1;
}

.bibtex-modal pre {
	background: #2d2d2d;
	color: #f8f8f2;
	padding: 20px;
	border-radius: 8px;
	overflow-x: auto;
	margin: 0;
	font-family: 'Courier New', monospace;
	font-size: 14px;
	line-height: 1.6;
	white-space: pre-wrap;
	word-wrap: break-word;
}

.bibtex-copy-btn {
	background: #000;
	color: #fff;
	border: none;
	border-radius: 6px;
	padding: 8px 16px;
	cursor: pointer;
	font-size: 13px;
	font-weight: 500;
	transition: all 0.3s ease;
	display: flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
	flex-shrink: 0;
}

.bibtex-copy-btn:hover {
	background: #333;
	transform: translateY(-2px);
	box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.bibtex-copy-btn i {
	font-size: 14px;
}

body.bibtex-modal-open {
	overflow: hidden;
}

/* Mobile Responsive */
@media (max-width: 768px) {
	.bibtex-modal-content {
		width: 95%;
		padding: 20px;
	}
	
	.bibtex-modal-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
		padding-right: 40px;
	}
	
	.bibtex-copy-btn {
		width: 100%;
		justify-content: center;
	}
	
	.bibtex-modal pre {
		font-size: 12px;
		padding: 15px;
	}
}


/* Education Section Styles*/

.education-card {
	transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.education-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 8px 20px rgba(0,0,0,0.15) !important;
}

.degree-badge {
	display: inline-block;
	padding: 4px 12px;
	border-radius: 20px;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.education-highlights ul li {
	position: relative;
	padding-left: 20px;
	margin-bottom: 5px;
	color: #333;
	font-size: 14px;
}

.education-highlights ul li i {
	position: absolute;
	left: 0;
	top: 3px;
	font-size: 12px;
}

/* Mobile Responsive for Education Cards */
@media (max-width: 768px) {
	.education-card > div {
		flex-direction: column !important;
		text-align: center;
	}
	
	.education-card > div > div:first-child {
		flex: 0 0 auto !important;
		margin: 0 auto 20px auto;
	}
	
	.education-highlights ul {
		padding-left: 0 !important;
		text-align: left;
	}
}

/* ========================================
   COMPLETE MOBILE RESPONSIVE CSS
   All fixes combined
   ======================================== */



/* ========================================
   RESEARCH SECTION - Card Border & Shadow
   ======================================== */

/* Research card styling with border and shadow */
.publication-wrapper {
	border: 1px solid #e0e0e0 !important;
	border-radius: 12px !important;
	padding: 25px 25px 30px 25px !important;
	background: #ffffff !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.06) !important;
	transition: all 0.3s ease !important;
}

/* Make sure buttons stay inside */
.project-links a {
	margin-bottom: 0 !important;
}

/* Alternative fix: Add specific padding to the flex container */
#research .arlo_tm_list_wrap li {
	margin-bottom: 30px !important;
}

/* Mobile adjustments */
@media (max-width: 768px) {
	.publication-wrapper,
	#research .arlo_tm_list_wrap li > div {
		padding: 20px 15px 25px 15px !important; /* Extra bottom padding on mobile too */
	}
}


/* ========================================
   RESEARCH SECTION - Mobile Layout Fix
   ======================================== */

/* Keep research cards in proper layout on mobile */
@media (max-width: 768px) {
	
	/* Adjust padding for mobile */
	.publication-wrapper,
	#research .arlo_tm_list_wrap li > div {
		padding: 20px 15px !important;
	}
	
	/* Research publication wrapper - stack vertically */
	.publication-wrapper > div,
	#research .arlo_tm_list_wrap li > div > div {
		flex-direction: column !important;
		gap: 15px !important;
	}
	
	/* Content section - full width */
	.publication-wrapper > div > div:first-child,
	#research .arlo_tm_list_wrap li > div > div > div:first-child {
		flex: 1 !important;
		min-width: 100% !important;
		order: 2; /* Content goes below image */
	}
	
	/* Image section - centered, full width */
	.publication-wrapper > div > div:last-child,
	#research .arlo_tm_list_wrap li > div > div > div:last-child {
		flex: 0 0 auto !important;
		max-width: 100% !important;
		width: 100% !important;
		order: 1; /* Image goes on top */
	}
	
	/* Image itself - responsive */
	.publication-wrapper img,
	#research .arlo_tm_list_wrap li img {
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		border-radius: 8px;
	}
	
	/* Project links - stack vertically or wrap */
	.project-links {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
	}
	
	.project-links a {
		flex: 1 1 auto;
		min-width: 120px;
	}
	
	/* Date badge and pub type */
	.date_wrap,
	.pub-type-badge {
		font-size: 12px !important;
	}
	
	/* Title */
	.title_holder h3 {
		font-size: 16px !important;
		line-height: 1.4 !important;
	}
	
	/* Description */
	.definition p {
		font-size: 13px !important;
	}
}


/* ========================================
   EDUCATION SECTION - Mobile Fix
   ======================================== */

@media (max-width: 768px) {
	/* Timeline adjustments */
	#academiccredentials li {
		padding-left: 25px !important;
	}
	
	/* Timeline line and dot positioning */
	#academiccredentials .news-line {
		left: 4px !important;
	}
	
	#academiccredentials .news-dot {
		left: -1px !important;
	}
}


/* ========================================
   NEWS SECTION - Container Border & Shadow
   ======================================== */

/* Single border around entire news section */
#news .arlo_tm_list_wrap {
	border: 1px solid #e0e0e0 !important;
	border-radius: 12px !important;
	padding: 20px !important;
	background: #F6F7FD !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.06) !important;
}

/* Remove individual item styling */
#news .arlo_tm_list_wrap li {
	border: none !important;
	box-shadow: none !important;
	background: transparent !important;
	padding: 0 !important;
	margin-bottom: 12px !important;
}

/* Optional: Add subtle hover effect to individual items */
#news .arlo_tm_list_wrap li:hover {
	background: rgba(4, 18, 48, 0.03) !important;
	border-radius: 8px;
	transition: background 0.2s ease;
}


/* ========================================
   NEWS SECTION - Custom Scrollbar
   ======================================== */

/* Custom scrollbar for news section */
#news .blog_list > div {
	scrollbar-width: thin;
	scrollbar-color: #041230 #e0e0e0;
}

/* For Webkit browsers (Chrome, Safari, Edge) */
#news .blog_list > div::-webkit-scrollbar {
	width: 8px;
}

#news .blog_list > div::-webkit-scrollbar-track {
	background: #e0e0e0;
	border-radius: 10px;
}

#news .blog_list > div::-webkit-scrollbar-thumb {
	background: #041230;
	border-radius: 10px;
}

#news .blog_list > div::-webkit-scrollbar-thumb:hover {
	background: #E3872D;
}


/* ========================================
   NEWS SECTION - Mobile Fix
   ======================================== */

@media (max-width: 768px) {
	/* Scrollable container height adjustment */
	#news .arlo_tm_list_wrap > div {
		max-height: 350px !important;
	}
	
	/* News items */
	#news .arlo_tm_list_wrap li p {
		flex-wrap: wrap !important;
		gap: 8px !important;
	}
	
	/* Date badges */
	#news .arlo_tm_list_wrap li span[style*="min-width"] {
		min-width: 80px !important;
		font-size: 10px !important;
	}
	
	/* News content text */
	#news .arlo_tm_list_wrap li p > span:last-child {
		flex: 1 1 100%;
		font-size: 13px !important;
	}
}


/* FORCE research cards to contain buttons */
#research .arlo_tm_list_wrap li > div {
	border: 1px solid #e0e0e0 !important;
	border-radius: 12px !important;
	padding: 25px 25px 35px 25px !important; /* Extra bottom padding: 35px */
	background: #ffffff !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.06) !important;
	transition: all 0.3s ease !important;
}

/* Ensure the wrapper has proper box-sizing */
#research .arlo_tm_list_wrap li > div,
#research .arlo_tm_list_wrap li > div * {
	box-sizing: border-box !important;
}


/* ========================================
   ABOUT SECTION - Mobile Image Display
   ======================================== */

/* Force about image to display */
.arlo_tm_about_wrap .leftbox {
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
}

.arlo_tm_about_wrap .leftbox .about_image_wrap {
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
}

.arlo_tm_about_wrap .leftbox .about_image_wrap .image {
	display: block !important;
	visibility: visible !important;
	position: relative !important;
}

.arlo_tm_about_wrap .leftbox .about_image_wrap .image .inner {
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	background-image: url('../img/about/Rashik2.JPG') !important;
}

/* Ensure the wrapper image is visible for sizing */
.arlo_tm_about_wrap .leftbox .about_image_wrap img {
	opacity: 1 !important;
	visibility: visible !important;
	display: block !important;
}

/* Border frame */
.arlo_tm_about_wrap .leftbox .about_image_wrap .border {
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

.arlo_tm_about_wrap .leftbox .about_image_wrap .border .inner {
	position: absolute;
	top: 25px !important;
	bottom: -25px !important;
	left: 25px !important;
	right: -25px !important;
	border: 10px solid #041230;
}

/* Image layer should be on top */
.arlo_tm_about_wrap .leftbox .about_image_wrap .image {
	position: absolute;
	z-index: 2;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

/* Desktop specific */
@media (min-width: 1200px) {
	.arlo_tm_about_wrap .leftbox {
		display: block !important;
		width: 35% !important;
		float: left !important;
		padding-right: 40px !important;
	}
	
	.arlo_tm_about_wrap .rightbox {
		width: 65% !important;
		float: right !important;
		padding-left: 65px !important;
	}
}

/* Tablet adjustments */
@media (min-width: 769px) and (max-width: 1199px) {
	.arlo_tm_about_wrap .leftbox {
		display: block !important;
		width: 100% !important;
		padding-right: 0 !important;
		margin-bottom: 40px !important;
		max-width: 400px !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}
	
	.arlo_tm_about_wrap .rightbox {
		width: 100% !important;
		padding-left: 0 !important;
	}
}

/* Mobile: Keep the image */
@media (max-width: 768px) {
	.arlo_tm_about_wrap .leftbox {
		display: block !important;
		width: 100% !important;
		padding-right: 0 !important;
		margin-bottom: 30px;
	}
	
	.arlo_tm_about_wrap .leftbox .about_image_wrap .image {
		max-width: 300px;
		margin: 0 auto;
	}
	
	.arlo_tm_about_wrap .rightbox {
		width: 100% !important;
		padding-left: 0 !important;
	}
}


/* ========================================
   ABOUT SECTION - Fix Overlapping & Button Layout
   ======================================== */

/* Fix the flex layout to prevent overlapping */
.arlo_tm_about_wrap .author_wrap {
	display: flex !important;
	flex-direction: row !important;
	align-items: flex-start !important;
	gap: 40px !important;
}

/* Left box - Image */
.arlo_tm_about_wrap .leftbox {
	flex: 0 0 35% !important;
	max-width: 35% !important;
	padding-right: 0 !important;
}

/* Right box - Content */
.arlo_tm_about_wrap .rightbox {
	flex: 1 !important;
	padding-left: 0 !important;
	width: auto !important;
}

/* Ensure buttons stay in one row */
.arlo_tm_about_wrap .buttons_wrap ul {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	gap: 15px !important;
	align-items: center !important;
}

.arlo_tm_about_wrap .buttons_wrap ul li {
	margin: 0 !important;
	float: none !important;
}

/* Button sizing - make them more compact if needed */
.arlo_tm_about_wrap .buttons_wrap ul li a {
	white-space: nowrap !important;
	display: inline-block !important;
}

/* Medium screens */
@media (max-width: 1200px) {
	.arlo_tm_about_wrap .author_wrap {
		flex-direction: column !important;
	}
	
	.arlo_tm_about_wrap .leftbox {
		flex: 0 0 auto !important;
		max-width: 400px !important;
		margin: 0 auto 30px auto !important;
	}
	
	.arlo_tm_about_wrap .rightbox {
		width: 100% !important;
		flex: 1 !important;
	}
}

/* Mobile - Stack buttons if needed */
@media (max-width: 768px) {
	.arlo_tm_about_wrap .author_wrap {
		flex-direction: column !important;
	}
	
	.arlo_tm_about_wrap .leftbox {
		flex: 0 0 auto !important;
		max-width: 300px !important;
		width: 100% !important;
		margin: 0 auto 30px auto !important;
	}
	
	.arlo_tm_about_wrap .rightbox {
		width: 100% !important;
	}
	
	/* Allow buttons to wrap on very small screens */
	.arlo_tm_about_wrap .buttons_wrap ul {
		flex-wrap: wrap !important;
	}
}

@media (max-width: 480px) {
	/* Stack buttons vertically on very small screens */
	.arlo_tm_about_wrap .buttons_wrap ul {
		flex-direction: column !important;
		align-items: stretch !important;
	}
	
	.arlo_tm_about_wrap .buttons_wrap ul li {
		width: 100% !important;
	}
	
	.arlo_tm_about_wrap .buttons_wrap ul li a {
		display: block !important;
		text-align: center !important;
		width: 100% !important;
	}
}

/* ========================================
   Correct Dimensions for Rashik2
   ======================================== */

/* The leftbox container */
.arlo_tm_about_wrap .leftbox {
	position: relative;
	width: 35%;
	min-height: 450px; /* Will be calculated based on container width */
}

/* Image layer with background */
.arlo_tm_about_wrap .leftbox .image.layer {
	position: absolute !important;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
}

.arlo_tm_about_wrap .leftbox .image.layer .inner {
	position: absolute !important;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-size: cover !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
}

/* Create aspect ratio container using padding trick */
.arlo_tm_about_wrap .leftbox::before {
	content: "";
	display: block;
	width: 100%;
	padding-top: 112.6%; /* 2309/2050 = 1.126 aspect ratio */
}

/* Make layers position absolutely within the container */
.arlo_tm_about_wrap .leftbox .image.layer,
.arlo_tm_about_wrap .leftbox .border.layer {
	position: absolute !important;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* Border layer */
.arlo_tm_about_wrap .leftbox .border.layer {
	z-index: 1;
}

.arlo_tm_about_wrap .leftbox .border.layer .inner {
	position: absolute !important;
	top: 25px !important;
	bottom: -25px !important;
	left: 25px !important;
	right: -25px !important;
	border: 10px solid #041230;
}

/* Desktop - maintain aspect ratio */
@media (min-width: 1200px) {
	.arlo_tm_about_wrap .leftbox {
		width: 35%;
		padding-right: 40px;
	}
}

/* Tablet */
@media (min-width: 769px) and (max-width: 1199px) {
	.arlo_tm_about_wrap .leftbox {
		width: 100%;
		max-width: 400px;
		margin: 0 auto 40px auto;
		padding-right: 0;
	}
}

/* Mobile */
@media (max-width: 768px) {
	.arlo_tm_about_wrap .leftbox {
		width: 100%;
		max-width: 300px;
		margin: 0 auto 30px auto;
		padding-right: 0;
	}
	
	.arlo_tm_about_wrap .leftbox .border.layer .inner {
		top: 15px !important;
		bottom: -15px !important;
		left: 15px !important;
		right: -15px !important;
		border: 6px solid #041230;
	}
}

/* Ensure the author_wrap uses flexbox properly */
.arlo_tm_about_wrap .author_wrap {
	display: flex;
	align-items: flex-start;
	gap: 40px;
}

.arlo_tm_about_wrap .rightbox {
	flex: 1;
	padding-left: 0;
}

@media (max-width: 1199px) {
	.arlo_tm_about_wrap .author_wrap {
		flex-direction: column;
	}
	
	.arlo_tm_about_wrap .rightbox {
		width: 100%;
	}
}

/* ========================================
   MOBILE IMAGE FIX - Works with actual HTML structure
   ======================================== */

/* ========================================
   MOBILE ONLY (768px and below)
   ======================================== */

@media (max-width: 768px) {
	
	/* The leftbox container - set explicit dimensions */
	.arlo_tm_about_wrap .leftbox {
		width: 280px !important;
		height: 315px !important; /* 280 * 1.126 = 315px */
		max-width: 280px !important;
		min-height: 315px !important;
		margin: 0 auto 30px auto !important;
		padding-right: 0 !important;
		position: relative !important;
		display: block !important;
		visibility: visible !important;
		opacity: 1 !important;
	}
	
	/* The image layer - absolute positioning */
	.arlo_tm_about_wrap .leftbox .image.layer {
		position: absolute !important;
		top: 0 !important;
		left: 0 !important;
		width: 100% !important;
		height: 100% !important;
		z-index: 2 !important;
		display: block !important;
	}
	
	/* The inner div with background image */
	.arlo_tm_about_wrap .leftbox .image.layer .inner {
		position: absolute !important;
		top: 0 !important;
		bottom: 0 !important;
		left: 0 !important;
		right: 0 !important;
		width: 100% !important;
		height: 100% !important;
		background-size: cover !important;
		background-position: center !important;
		background-repeat: no-repeat !important;
		display: block !important;
	}
	
	/* Force background image if JavaScript doesn't load it */
	.arlo_tm_about_wrap .leftbox .image.layer .inner[data-img-url*="Rashik2"] {
		background-image: url('../img/about/Rashik2.JPG') !important;
	}
	
	/* Border layer */
	.arlo_tm_about_wrap .leftbox .border.layer {
		position: absolute !important;
		top: 0 !important;
		left: 0 !important;
		width: 100% !important;
		height: 100% !important;
		z-index: 1 !important;
		display: block !important;
	}
	
	.arlo_tm_about_wrap .leftbox .border.layer .inner {
		position: absolute !important;
		top: 15px !important;
		bottom: -15px !important;
		left: 15px !important;
		right: -15px !important;
		border: 6px solid #041230 !important;
		display: block !important;
	}
	
	/* Content area */
	.arlo_tm_about_wrap .rightbox {
		width: 100% !important;
		padding-left: 0 !important;
	}
	
	/* Stack layout */
	.arlo_tm_about_wrap .author_wrap {
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
	}
}

/* ========================================
   VERY SMALL MOBILE (480px and below)
   ======================================== */

@media (max-width: 480px) {
	.arlo_tm_about_wrap .leftbox {
		width: 240px !important;
		height: 270px !important; /* 240 * 1.126 = 270px */
		max-width: 240px !important;
		min-height: 270px !important;
	}
	
	.arlo_tm_about_wrap .leftbox .border.layer .inner {
		top: 12px !important;
		bottom: -12px !important;
		left: 12px !important;
		right: -12px !important;
		border: 5px solid #041230 !important;
	}
}


/* ========================================
   MOBILE DEVICE SPECIFIC FIX - VALIDATED
   No syntax errors, safe for deployment
   ======================================== */

/* Mobile devices - use both max-width and max-device-width */
@media only screen and (max-width: 768px) {
	/* Image container with explicit dimensions */
	.arlo_tm_about_wrap .leftbox {
		width: 280px !important;
		height: 315px !important;
		max-width: 280px !important;
		min-height: 315px !important;
		margin: 0 auto 30px auto !important;
		padding-right: 0 !important;
		position: relative !important;
		display: block !important;
	}
	
	/* Image layer */
	.arlo_tm_about_wrap .leftbox .image.layer {
		position: absolute !important;
		top: 0 !important;
		left: 0 !important;
		width: 100% !important;
		height: 100% !important;
		z-index: 2 !important;
	}
	
	.arlo_tm_about_wrap .leftbox .image.layer .inner {
		position: absolute !important;
		top: 0 !important;
		bottom: 0 !important;
		left: 0 !important;
		right: 0 !important;
		background-size: cover !important;
		background-position: center !important;
		background-repeat: no-repeat !important;
	}
	
	/* Border layer */
	.arlo_tm_about_wrap .leftbox .border.layer {
		position: absolute !important;
		top: 0 !important;
		left: 0 !important;
		width: 100% !important;
		height: 100% !important;
		z-index: 1 !important;
	}
	
	.arlo_tm_about_wrap .leftbox .border.layer .inner {
		position: absolute !important;
		top: 15px !important;
		bottom: -15px !important;
		left: 15px !important;
		right: -15px !important;
		border: 6px solid #041230 !important;
	}
	
	/* Layout */
	.arlo_tm_about_wrap .author_wrap {
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
	}
	
	.arlo_tm_about_wrap .rightbox {
		width: 100% !important;
		padding-left: 0 !important;
	}
	
	/* Buttons */
	.arlo_tm_about_wrap .buttons_wrap ul {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: wrap !important;
		gap: 10px !important;
	}
	
	.arlo_tm_about_wrap .buttons_wrap ul li {
		margin: 0 !important;
		float: none !important;
	}
}

/* Very small devices */
@media only screen and (max-width: 480px) {
	.arlo_tm_about_wrap .leftbox {
		width: 240px !important;
		height: 270px !important;
		max-width: 240px !important;
		min-height: 270px !important;
	}
	
	.arlo_tm_about_wrap .buttons_wrap ul {
		flex-direction: column !important;
	}
	
	.arlo_tm_about_wrap .buttons_wrap ul li {
		width: 100% !important;
	}
	
	.arlo_tm_about_wrap .buttons_wrap ul li a {
		display: block !important;
		text-align: center !important;
	}
}

/* Add class for JavaScript detection */
body.is-mobile-device .arlo_tm_about_wrap .leftbox {
	width: 280px !important;
	height: 315px !important;
	max-width: 280px !important;
	min-height: 315px !important;
	position: relative !important;
}

body.is-mobile-device .arlo_tm_about_wrap .leftbox .image.layer .inner {
	position: absolute !important;
	top: 0 !important;
	bottom: 0 !important;
	left: 0 !important;
	right: 0 !important;
	background-size: cover !important;
	background-position: center !important;
}

/*---------------------------------------------------*/
/*	15) ARLO MEDIA QUERIES (FOR SMALL DEVICES)
/*---------------------------------------------------*/

@media (max-width: 1400px) {
	.arlo_tm_about_wrap .leftbox{padding-right: 0px;}
}
@media (max-width: 1200px) {
	.arlo_tm_services_wrap .list_wrap ul li{width: 50%;}
	#arlo_tm_popup_blog .close{right: 0px;}
	.arlo_tm_list_wrap > ul.total > li{width: 50%;}
	.arlo_tm_about_wrap .leftbox{display: none;}
	.arlo_tm_about_wrap .rightbox{padding-left: 0px;width: 100%;}
	.arlo_tm_contact_wrap_all .leftbox{width: 100%;padding-right: 0px;margin-bottom: 19px;}
	.arlo_tm_contact_wrap_all .rightbox{width: 100%;float: none;}
}
@media (max-width: 1040px) {
	.arlo_tm_about_wrap{flex-direction: column;}
	.arlo_tm_about_wrap .rightpart .info_list ul li{width: 100%;}
	.arlo_tm_about_wrap .leftpart{width: 100%;padding-right: 0px;margin-bottom: 60px;}
	.arlo_tm_about_wrap .rightpart{width: 100%;}
	.arlo_tm_skills_wrap .inner_wrap{flex-direction: column;}
	.arlo_tm_skills_wrap .leftbox{padding-right: 0px;width: 100%;margin-bottom: 60px;}
	.arlo_tm_skills_wrap .rightbox{width: 100%;padding-left: 0px;}
	.arlo_tm_main_demos_list_wrap ul{margin: 0px;}
	.arlo_tm_main_demos_list_wrap ul li{width: 100%;padding: 0px;}
	.arlo_tm_portfolio_single_wrap .details_wrap{flex-direction: column;}
	.arlo_tm_portfolio_single_wrap .details_wrap .leftbox{padding-right: 0px;width: 100%;margin-bottom: 50px;}
	.arlo_tm_portfolio_single_wrap .details_wrap .rightbox{width: 100%;}
	.arlo_tm_mobile_header_wrap{display: block;}
}
@media (max-width: 768px) {
	.arlo_tm_hero_header_wrap .name_holder h3{font-size: 40px;}
	.arlo_tm_hero_header_wrap .text_typing p{font-size: 21px;}
	.arlo_tm_title_holder h3{font-size: 40px;}
	.arlo_tm_title_holder:before{top: -2px;}
	.arlo_tm_services_wrap .list_wrap ul{margin: 0px;}
	.arlo_tm_services_wrap .list_wrap ul li{width: 100%;padding-left: 0px;}
	.arlo_tm_counter_list li{width: 50%;}
	.arlo_tm_counter_list li .inner{padding: 45px 15px 48px 15px;}
	.arlo_tm_portfolio_list > li{width: 50%;}
	.arlo_tm_list_wrap > ul.total{margin: 0px;}
	.arlo_tm_list_wrap > ul.total > li{width: 100%;padding-left: 0px;}
	.arlo_tm_about_wrap .about_short_contact_wrap ul li{width: 100%;}
	.arlo_tm_totop{right: 20px;bottom: 10px;}
	.arlo_tm_totop.opened{bottom: 20px;}
	.arlo_tm_preloader{display: none;}
	.arlo_tm_portfolio_single_wrap .title_holder h3{font-size: 45px;}
}
@media (max-width: 480px) {
	.arlo_tm_hero_header_wrap .name_holder h3{font-size: 30px;}
	.arlo_tm_hero_header_wrap .text_typing p{font-size: 18px;}
	.arlo_tm_title_holder:before{display: none;}
	.arlo_tm_title_holder h3{padding-left: 0px;}
	.arlo_tm_title_holder span{padding-left: 0px;}
	.arlo_tm_counter_list li{width: 100%;}
	.arlo_tm_counter_list li .inner{padding: 0px 0px 35px 0px;}
	.arlo_tm_portfolio_list{margin: 0px;}
	.arlo_tm_portfolio_list > li{width: 100%;padding-left: 0px;}
	.arlo_tm_counter_wrap{padding: 94px 0px 48px 0px;}
}