/* 
Theme Name: Sovyal
Author: Surajit Kayal
Description: Custom WP Theme (Arabic)
*/

@font-face {
	font-family: 'FontBody';
	src: url('fonts/IBMPlexSansArabic-Regular.ttf?') format('truetype');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'FontHead1';
	src: url('fonts/IBMPlexSansArabic-Bold.ttf?') format('truetype');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'FontHead2';
	src: url('fonts/IBMPlexSansArabic-Medium.ttf?') format('truetype');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'FontLight';
	src: url('fonts/IBMPlexSansArabic-Light.ttf?') format('truetype');
	font-weight: normal;
	font-style: normal;
}

body {
	text-align: right;
	font-size: 17px;
	font-family: 'FontBody';
	direction: rtl;
	text-align: right;
}

p, li {
	line-height: 31px !important;
}
h1, h2, h3 {
	font-family: 'FontHead1';
}
h3, h4, h5, h6 {
	font-family: 'FontHead2';
}
.section-bg-radial-blue {
	background: url('images/bluegrad-ar.png') bottom 30% left no-repeat !important;
	background-size: auto !important;
}
.section-bg-linegrad-blue {
	background-image: url('images/grad1.png'), url('images/blue-line-grad-ar.png');
	background-position: bottom, center;
	background-size: contain, cover;
	background-repeat: repeat-x, no-repeat;
}
.section-bg-linear-radial-blue {
	background-image: url('images/grad2-ar.png'), url('images/bluegrad-ar.png');
	background-position: center top, bottom 30% left;
	background-size: contain, auto;
	background-repeat: no-repeat, no-repeat;
}
.text-right {
	text-align: left;
}
.navbar-nav {
  display: flex;
  justify-content: left;
  width: 100%;
}
.navbar-default .navbar-nav > li > a {
	text-transform: none;
	font-size: 16px;
}
#header #menu-last-ar.navbar-nav > li > a {
	padding: 8px 30px;
	border-radius: 6px !important;
	font-size: 17px;
	background: url(images/arrow-left.svg) center left 20px no-repeat transparent;
	background: none;
	line-height: 32px;
}
#header #menu-last-ar.navbar-nav > li > a:hover  {
	color: #fff;
	background: #B09C7B !important;
}

.wpcf7-form input[type=submit],
.wpcf7-form input[type=submit]:hover {
	text-align: center !important;
}
.btn-global img {
	position: relative;
	left: -20px;
	right: auto;
}

.line {
  margin: 12px auto;
}
.menu-end {
	text-align: left;
	margin-top: 31px;
}
.shrinked .menu-end {
	margin-top: 33px;
}
.menu-end li {
	margin-right: 20px;
	margin-left: 0;
}
.hamburger {
	right: auto;
	left: 15px;
	text-align: left;
	top: 10px;
}
#navbar-last {
  float: left;
  margin-left: -20px !important;
  margin-right: 0 !important;
}
.menu-overlay p,
.menu-overlay h1,
.menu-overlay h2,
.menu-overlay h3 {
	text-align: right;
}
.menu-overlay .closebtn {
  	right: auto;
  	left: 20px;
}
.overlay-content li {
	letter-spacing: 0;
	text-transform: none;
	font-size: 18px;
}

.fixed-menu-block .last li:first-child {
	background: url('images/globe.svg') no-repeat center left;
	min-width: 53px;
	text-align: right;
}

.slick-next::before {
	transform: rotate(0deg);
}
.slick-prev::before {
    transform: rotate(180deg);
}


.wpcf7-form input,
.wpcf7-form textarea,
.wpcf7-form select {
	text-align: right;
}

.checked {
	padding: 0;
	list-style: none;
}

.checked li {
	background: url(images/check-circle.svg) right 5px no-repeat;
	background-size: 20px;
	padding-right: 30px;
	padding-left: 0;
	margin-bottom: 20px;
	line-height: inherit;
}
.checked.invert li {
	background: url(images/check-white.png) right 5px no-repeat;
	background-size: 18px;
	padding-right: 30px;
	padding-left: 0;
	margin-bottom: 15px;
	line-height: inherit;
}

.accordion:after {
  float: left;
  margin-right: 5px;
  margin-left: 0;
}

.wpcf7-form input, .wpcf7-form textarea, .wpcf7-form select {
  text-align: right !important;
  direction: rtl !important;
}
.wpcf7-form select {
  padding-bottom: 15px;
  line-height: 32px;
  padding-top: 13px;
}

.stats li  {
	direction: ltr;
}

.home-hero {
	padding-top: 320px;
	padding-bottom: 20px;
	background-image: url('images/grad1.png'), url('images/hero-bg-ar.png?');
	background-position: bottom, center;
	background-size: contain, cover;
	background-repeat: repeat-x, no-repeat;
}
.page-hero {
	padding-top: 240px;
	padding-bottom:160px;
	background-image: url('images/grad1.png'), url('images/hero-bg-ar.png?');
	background-position: bottom, center;
	background-size: contain, cover;
	background-repeat: repeat-x, no-repeat;
}

.panel-cta {
	background: url('images/section-cta-bg-ar.jpg') center no-repeat;
	background-size: cover;
	box-shadow: 0;
	text-align: center;
	padding: 60px;
	padding-bottom: 40px;
	border-radius: 15px;
	margin-bottom: 30px;
	transition: 0.2s;
}

footer {
	background-position: bottom right 40px, center;
}
footer i {
	margin-right: 0;
	margin-left: 10px;
}

.video-container .video-cover .video-play {
    background-position: left 30px bottom 30px;
}

.panel-work .logo {
	margin-left: 0;
	margin-right: 15px;
}
.panel-home-work .player.odd {
	right: 20px;
	left: auto;
}
.panel-home-work .player.even {
	bottom: 20px;
	right: auto;
	left: 20px;
}
.panel-home-work .content {
	padding: 20px;
	padding-left: 30px;
	padding-right: 120px;
	border: 0 solid red;
	min-height: 560px;
}
.panel-home-work .content {
	padding-left: 120px;
	padding-right: 30px;
}

.stats.aboutus li {
	border-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%) 1;
	border-width: 1px;
	border-style: solid;
	border-top: 0;
	border-bottom: 0;
	border-right: 0;
	padding: 5px;
}
.stats.aboutus li:last-child {
	border-left: 0;
}

/* ############################################### RESPONSIVE VIEW ###################################################### */
@media only screen and (max-width: 768px) {
	body {
		overflow-x: hidden !important;
    	width: 100% !important;
	}
	.video-container .video-cover .video-play {
		background-size: 64px;
		background-position: left 15px bottom 15px;
	}
	.fixed-menu-block .last li:first-child {
	  min-width: 48px;
	  background-size: 16px;
	  font-size: 16px;
	  position: relative;
	  left: -30px;
	  right: auto;
	}
	#header .logo-text {
		position: absolute;
		top: 32px;
		left: auto;
		right: 115px;
	}
	#header .logo-text img {
		display: inline;
		width: 90px;
		height: auto;
	}
	#header.shrinked .logo-text {
		position: absolute;
		top: 30px;
		left: auto;
		right: 95px;
	}
	#header.shrinked .logo-text img {
		display: inline;
		width: 72px;
		height: auto;
	}
	.section-page {
		padding-top: 160px !important;
		padding-bottom: 10px !important;
		background-size: 160% !important;
	}
	.menu-overlay .text-right {
	    text-align: right;
	}

	.panel-home-work .player.odd,
	.panel-home-work .player.even {
		right: auto;
		left: 20px;
	}
}