/*
Theme Name: Studio Neptune
Author: Ali Alaa El Dine
Version: 1.0.43
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/


@font-face {
	font-family: 'CircularStd';
	src: url('assets/fonts/CircularStd-Book.eot');
	src: url('assets/fonts/CircularStd-Book.eot?#iefix') format('embedded-opentype'),
		url('assets/fonts/CircularStd-Book.woff2') format('woff2'),
		url('assets/fonts/CircularStd-Book.woff') format('woff'),
		url('assets/fonts/CircularStd-Book.ttf') format('truetype'),
		url('assets/fonts/CircularStd-Book.svg#CircularStd-Book') format('svg');
	font-weight: 300;
	font-stretch: normal;
	font-style: normal;
}

@font-face {
	font-family: 'CircularStd';
	src: url('assets/fonts/CircularStd-Bold.eot');
	src: url('assets/fonts/CircularStd-Bold.eot?#iefix') format('embedded-opentype'),
		url('assets/fonts/CircularStd-Bold.woff2') format('woff2'),
		url('assets/fonts/CircularStd-Bold.woff') format('woff'),
		url('assets/fonts/CircularStd-Bold.ttf') format('truetype'),
		url('assets/fonts/CircularStd-Bold.svg#CircularStd-Bold') format('svg');
	font-weight: 700;
	font-stretch: normal;
	font-style: normal;
}

@font-face {
	font-family: 'GCAmeliePromised';
	src: url('assets/fonts/GCAmeliePromised-Italic.eot');
	src: url('assets/fonts/GCAmeliePromised-Italic.eot?#iefix') format('embedded-opentype'),
		url('assets/fonts/GCAmeliePromised-Italic.woff2') format('woff2'),
		url('assets/fonts/GCAmeliePromised-Italic.woff') format('woff'),
		url('assets/fonts/GCAmeliePromised-Italic.ttf') format('truetype'),
		url('assets/fonts/GCAmeliePromised-Italic.svg#GCAmeliePromised-Italic') format('svg');
	font-weight: 300;
	font-stretch: normal;
	font-style: italic;
}

* {
	-webkit-box-sizing: border-box !important;
	-moz-box-sizing: border-box !important;
	-ms-box-sizing: border-box !important;
	box-sizing: border-box !important;
}

:root {
	/*--main-pad-horiz: 120px;
  --blks-pad-horiz: 30px;
  --blks-margin-fix: -30px;*/
}

/*html{
  scroll-behavior: smooth;
}*/

body {
	padding: 0;
	margin: 0;
	font-size: 20px;
	line-height: normal;
	color: #282828;
	font-family: "CircularStd", sans-serif;
	font-optical-sizing: auto;
	font-weight: 300;
	font-style: normal;
	background-color: #ffffff;
}

p {
	margin: 0;
}

a,
input,
button,
textarea {
	outline: none !important;
}

h1,
h2,
h3,
h4 {
	margin: 0;
	font-weight: 400;
}

.mobile-only {
	display: none;
}

a,
input,
textarea,
button {
	outline: none !important;
}

.first-sec .sec-wrap {
  padding-top: 170px;
	transition: all 400ms ease;
}

.scrolling .first-sec .sec-wrap{
	padding-top: 73px;
}

.pad-horiz {
	padding: 0 60px;
}

.pad-left {
	padding-left: 60px;
}

.pad-horiz-double {
	padding: 0 120px;
}

.pad-horiz-double-left {
	padding-left: 120px;
}

.pad-horiz-double-right {
	padding-right: 120px;
}

.pad-vertical {
	padding: 25px 0 55px;
}

.no-pad-bottom {
	padding-bottom: 0 !important;
}

.no-pad-top {
	padding-top: 0 !important;
}

.extra-pad-top{
	padding-top: 90px !important;
}

.extra-pad-bottom{
	padding-bottom: 90px !important;
}

.maxed-container {
	max-width: 1440px;
}

.centered-container {
	margin: 0 auto;
}

.centered-content {
	text-align: center;
}


header.studio-neptune-header .header-wrapper{
	padding: 40px 0;
	transition: all 400ms ease;
}

.scrolling header.studio-neptune-header .header-wrapper{
	padding: 15px 0;
}

header.studio-neptune-header .mobile_menu_cta {
	cursor: pointer;
	height: 22px;
	text-decoration: none;
	width: 22px;
	z-index: 22;
	position: absolute;
	display: block;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	transition: 300ms ease-in-out;
	display: none;
}

/*header.studio-neptune-header .mobile_menu_cta.open{
	right:10px;
}*/

header.studio-neptune-header .mobile_menu_cta span {
	background: #3C3232;
	border-radius: 0;
	display: block;
	height: 1.5px;
	left: 0;
	opacity: 1;
	position: absolute;
	width: 100%;

	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);

	-webkit-transition: .25s ease-in-out;
	-moz-transition: .25s ease-in-out;
	-ms-transition: .25s ease-in-out;
	-o-transition: .25s ease-in-out;
	transition: .25s ease-in-out;
}

header.studio-neptune-header .mobile_menu_cta span:nth-child(1) {
	top: 4px;
}

header.studio-neptune-header .mobile_menu_cta span:nth-child(2),
header.studio-neptune-header .mobile_menu_cta span:nth-child(3) {
	top: 10px;
}

header.studio-neptune-header .mobile_menu_cta span:nth-child(4) {
	top: 16px;
}

header.studio-neptune-header .mobile_menu_cta.open span:nth-child(1) {
	top: 11px;
	width: 0%;
	left: 50%;
}

header.studio-neptune-header .mobile_menu_cta.open span:nth-child(2) {
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
}

header.studio-neptune-header .mobile_menu_cta.open span:nth-child(3) {
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

header.studio-neptune-header .mobile_menu_cta.open span:nth-child(4) {
	top: 11px;
	width: 0%;
	left: 50%;
}

header.studio-neptune-header .menu-logo-wrap {
  display: flex;
  align-items: center;
	gap: 40px;
	position: relative;
}

header.studio-neptune-header .studio-neptune-logo{
	max-width: 240px;
	transition: all 500ms ease;
}

.scrolling header.studio-neptune-header .studio-neptune-logo{
	max-width: 140px;
}

header.studio-neptune-header .studio-neptune-logo a{
	display: block;
	width: 100%;
	height: auto;
	text-decoration: none;
}

header.studio-neptune-header .studio-neptune-logo a svg{
	width: 100%;
	height: auto;
	display: block;
}

header.studio-neptune-header .menu-logo-wrap .studio-neptune-hblk.studio-neptune-menu-blk {
  flex: 1;
  text-align: right;
}

.studio-neptune-menu ul{
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 0;
}

.studio-neptune-menu ul li{
	display: inline-block;
	padding: 0 0 0 70px;
	vertical-align: middle;
}

.studio-neptune-menu ul li a{
	font-size: 20px;
	text-decoration: none;
	display: block;
	position: relative;
	color: #000;
	cursor: pointer;
}

.studio-neptune-menu ul li a:after{
	content: "";
	width: 0;
	height: 2px;
	background-color: #000;
	position: absolute;
	left: 0;
	bottom: 0;
	transition: all 300ms ease;
}

.studio-neptune-menu ul li a:hover:after,
.studio-neptune-menu ul li.current_page_item a:after{
	width: 100%;
}

.studio-neptune-footer {
  background-color: #000;
}

.studio-neptune-footer .footer-wrapper{
	padding: 40px 0;
}

.sn-footer-logo{
	width: 100%;
	height: auto;
}

.sn-footer-logo svg{
	width: 100%;
	height: auto;
	display: block;
}

.studio-neptune-footer .footer-links{
	padding: 0 0 90px;
}

.footer-slogan {
  color: #fff;
  font-size: 26px;
  max-width: 200px;
}

.footer-links .footer-links-flex {
  display: flex;
  align-items: flex-end;
	gap: 40px;
}

.footer-links .footer-links-flex .footer-flx-blk.sm-channels{
	flex: 1;
	text-align: right;
}

.footer-links .sm-channels-list ul{
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 0;
}

.footer-links .sm-channels-list ul li{
	display: inline-block;
	padding: 0 0 0 70px;
	vertical-align: middle;
}

.footer-links .sm-channels-list ul li a{
	font-size: 20px;
	text-decoration: none;
	display: block;
	position: relative;
	color: #fff;
}

.footer-links .sm-channels-list ul li a:after{
	content: "";
	width: 0;
	height: 2px;
	background-color: #fff;
	position: absolute;
	left: 0;
	bottom: 0;
	transition: all 300ms ease;
}

.footer-links .sm-channels-list ul li a:hover:after{
	width: 100%;
}

header.studio-neptune-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #fff;
  z-index: 20;
}

.hero-sec .sn-hero-banner {
  position: relative;
	background-color: #000;
}

.hero-sec .sn-hero-banner .sn-hero-bg-img{
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	z-index: 1;
}

.hero-sec .sn-hero-banner .sn-hero-bg-vid{
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	z-index: 2;
}

.hero-sec .sn-hero-banner .sn-hero-bg-vid video{
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	object-position: center center;
}

.hero-sec .sn-hero-banner .hero-texts{
	position: relative;
	z-index: 3;
}

.hero-sec .sn-hero-banner .hero-texts .here-texts-flex{
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 60vh;
	padding: 70px 0;
}

.sn-pillars-list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  color: #fff;
	padding: 0 0 35px;
}

.sn-pillars-list .sn-pillar{
	position: relative;
	font-size: 16px;
	line-height: 18px;
}

.sn-pillars-list .sn-pillar:after{
	width: 2px;
	height: 100%;
	right: -9px;
	content: "";
	position: absolute;
	top: 0;
	background-color: #fff;
}

.sn-pillars-list .sn-pillar:last-child::after{
	display: none;
}

.sn-hero-text{
	max-width: 700px;
	color: #fff;
	font-size: 24px;
}

.sn-txt-flex{
	display: flex;
	gap: 40px;
}

.sn-txt-flex .sn-flx-blk{
	flex: 1;
}

.sn-desc p{
	padding: 0 0 20px;
}

.sn-desc p:last-child{
	padding: 0;
}

.story-desc .story-long-par{
	padding: 20px 0 0;
	display: none;
}

.sn-flx-blk.title .sn-flx-title{
	position: sticky;
	top: 100px;
}

.sn-sec-title h1 {
  font-size: 22px;
  font-weight: 700;
}

.story-btn span{
	display: inline-block;
	vertical-align: middle;
	position: relative;
}

.story-btn span.icn{
	padding: 5px 0 0 10px;
}

.story-btn span.icn span.plus{
	display: block;
	width: 20px;
	height: 20px;
	background-color: #000;
	border-radius: 50%;
	position: relative;
}

.story-btn span.icn span.plus:after,
.story-btn span.icn span.plus:before{
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 10px;
	height: 1px;
	background-color: #fff;
	display: block;
	transition: all 300ms ease;
}

.story-btn span.icn span.plus:before{
	transform: translate(-50%, -50%) rotate(90deg);
}

.story-btn.open span.icn span.plus:before{
	transform: translate(-50%, -50%) rotate(0deg);
}

.story-img{
	padding: 40px 0 0;
}

.story-img img{
	width: 100%;
	height: auto;
	display: block;
}

.studio-neptune-sec{
	position: relative;
}

.sn-sec-border{
	width: 100%;
}

.sn-sec-border .sec-border-inner{
	width: 100%;
	height: 1px;
	background-color: #000;
}

.process-blk,
.process-blk-sub,
.process-blk-sub p{
	display: inline;
}

.process-blk-sub.prc-num {
  color: #326CDA;
  font-weight: 700;
  position: relative;
}

.process-blk-sub.prc-num::after {
  content: "—";
  padding: 0 0 0 5px;
}

.process-blk-sub.prc-name{
	font-weight: 700;
}

.contact-info-wrap .cinf-lbl, 
.contact-info-wrap .cinf-val, 
.contact-info-wrap .cinf-name {
  display: inline;
}

.contact-info-wrap .cinf-lbl{
  color: #326CDA;
  font-weight: 700;
  position: relative;
}

.contact-info-wrap .cinf-lbl::after {
  content: "—";
  padding: 0 0 0 5px;
	color: #000;
}

.contact-info-wrap .cinf-val a{
	color: #000;
	text-decoration: none;
	transition: all 300ms ease;
}

.contact-info-wrap .cinf-val a:hover{
	color: #326CDA;
}

.sn-services-list .sn-service .serv-name{
	font-weight: 700;
}

.sn-services-list .sn-service{
	padding: 0 0 20px;
}

.services-intro{
	padding: 0 0 40px;
}

.proj-list .proj-flex {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.proj-list .proj-flex .project-card {
  width: calc(50% - 7px);
}

.proj-list .proj-flex .project-card .project-thumb{
	width: 100%;
	height: auto;
	display: block;
	position: relative;
	z-index: 1;
}

.proj-list .proj-flex .project-card .project-thumb img{
	width: 100%;
	display: block;
	aspect-ratio: 800/600;
}

.proj-list .proj-flex .project-card .project-cont{
	position: relative;
}

.project-card .proj-txts{
	position: absolute;
	z-index: 2;
	background-color: rgba(0,0,0,0.5);
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 300ms ease;
	opacity: 0;
}

.project-card .proj-txts .particle-title {
  color: #fff;
  font-size: 24px;
  font-weight: 500;
  position: relative;
  transition: all 300ms ease;
  top: 40px;
}

.project-card:hover .proj-txts{
	opacity: 1;
}

.project-card:hover .proj-txts .particle-title{
	top: 0;
}

.project-card .proj-link{
	position: absolute;
	z-index: 3;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
}

.sn-txt-flex .sn-flx-blk .sn-img img{
	width: 100%;
	height: auto;
	display: block;
}

.proj-det-row{
	padding: 0 0 55px;
	position: relative;
}

.proj-det-row:last-child{
	padding: 0;
}

.proj-det-row.proj-info .sn-sec-border {
  padding-bottom: 25px;
}

.sn-hero-text em,
.sn-desc em,
.sn-process em {
  font-family: 'GCAmeliePromised', serif;
	font-style: italic;
}

.sn-hero-text strong,
.sn-desc strong,
.sn-process strong {
  font-weight: 700;
}

.hero-icon {
  padding: 35px 0 0;
  text-align: left;
}

.hero-icon img{
	width: 50px;
	height: 50px;
	display: inline-block;
	border-radius: 50%;
	object-fit: cover;
	object-position: center center;
}

.studio-neptune-hblk.studio-neptune-logo-wrap {
  position: relative;
  z-index: 11;
}

.hero-texts-wrap{
	padding: 0 20px;
}

.proj-second-img,
.proj-second-desc{
	padding: 25px 0 0;
}

.proj-gallery .project-gallery-row{
	display: flex;
	gap: 40px;
	padding: 0 0 40px;
}

.proj-gallery .project-gallery-row:last-child{
	padding: 0;
}

.proj-gallery .project-gallery-row .gal-img{
	flex: 1;
}

.proj-gallery .project-gallery-row .gal-img a{
	display: block;
	text-decoration: none;
	position: relative;
	transition: all 300ms ease;
}

.proj-gallery .project-gallery-row .gal-img a:hover{
	opacity: 0.9;
}

.proj-gallery .project-gallery-row .gal-img img{
	width: 100%;
	height: auto;
	display: block;
	position: relative;
	z-index: 1;
}

.proj-gallery .project-gallery-row .gal-img a svg{
	width: 60px;
	height: auto;
	display: block;
	position: absolute;
	z-index: 2;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	opacity: 1;
	transition: all 300ms ease;
}

.proj-gallery .project-gallery-row .gal-img a svg path{
	fill: #fff;
}

.proj-gallery .project-gallery-row .gal-img a:hover{
	opacity: 0.85;
}

.proj-gallery .img-txt{
	padding: 25px 0 0;
}

.proj-gallery .img-txt .img-txt-flex {
  gap: 40px;
  display: flex;
}

.proj-gallery .img-txt .img-txt-flex .img-txt-col{
	flex: 1;
}

.proj-gallery .project-gallery-row.two_images .img-txt .img-txt-flex .img-txt-col.empty-col{
	display: none;
}

.proj-second-desc,
.proj-gallery .img-txt{
	font-size: 18px;
}