/*
Theme Name: SSD
Theme URI: https://superseedstudio.com
Template: hello-elementor
Author: Superseed Digital
Author URI: https://superseedstudio.com
Description: Based on Hello
Version: 1.1655299352
Updated: 2022-06-15 13:22:32

*/

/* INDEX 
 * PADDING
 * GLOBAL STYLES
 * BUTTONS
 * HEADER
 * MENU POPUP
 * TALENT
 * CLIENTS
 * CONTACT
 * LAYER FI EFXS
 * REEL
 * 
 * MEDIA QUERIES
 * 
 * */

:root {
	--color-red: #ff0000;
	--color-white: #ffffff;
	--color-black: #000000;
	--color-grey: #9B9B9B;
	--color-trans-white: rgba(255, 255, 255, 0.08);
	--color-trans-black: rgba(0, 0, 0, 0.8);
	
	--efx: all 350ms ease-in-out;
}
/* 
body {
	overflow-x: hidden;
	overflow-y: hidden;
} */


footer {
	display: none;
}

/* HEADER */

header {
	position: absolute;
	top: 0;
	width: 100%;
}

/* PADDING */

.pad-top {
	padding:6rem 3rem 0 3rem;
}

.pad-bot {
     padding:0 3rem 6rem 3rem;
}

.pad-tb {
    padding:6rem 3rem;
}

.pad-lr {
    padding-left:3rem;
    padding-right:3rem;
}

/* GLOBAL STYLES */

.showpopup:hover line {
	stroke: var(--color-red) !important;
}

.bg-opaque {
	background-color: var(--color-trans-white) !important;
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
}

.color-red {
	color: var(--color-red) !important;
}

.opaque-bg {
	background-color: var(--color-trans-white) !important;
	-webkit-backdrop-filter: blur(5px);
 	backdrop-filter: blur(5px);
}

.opaque-bg-dark {
	background-color: var(--color-trans-black) !important;
	-webkit-backdrop-filter: blur(5px);
 	backdrop-filter: blur(5px);
}

.opaque-bg-black {
	background-color: var(--color-black) !important;
	-webkit-backdrop-filter: blur(5px);
 	backdrop-filter: blur(5px);
}

.info-txt-circle {
	width: 150px !important;
	height: 150px;
	background-color: var(--color-white);
	border-radius: 100px;
	transition: var(--efx);
}

.info-txt-circle h2 {
	transition: var(--efx);
	letter-spacing: 1.2px;
	padding-top: 25px;
	font-weight: 200 !important;
	font-size: 25px !important;
}

.info-circle-trigger-box {
	cursor: pointer;
}

.info-circle-trigger-box:hover .info-txt-circle h2 {
	opacity: 0;
}

.info-txt-circle .elementor-widget-container {
	display: flex;
	align-items: center;
	justify-content: center;
}

.info-txt-circle:before {
	content: url("/wp-content/uploads/2023/10/icon-arrow-right-down-red-1.svg");
	position: absolute;
	left: 0.5rem;
	top: -1.1rem;
	display: inline-block;
	transform: scale(0.3);
	transition: var(--efx);
}

.info-circle-trigger-box:hover .info-txt-circle:before {
	transform: scale(0.5) translate(-10px, -30px);
	top: 1rem;
}

.reveal-continer {
	opacity: 0;
	transition: var(--efx);
	visibility: hidden;
	z-index: 300 !important;
	max-height: 510px !important;
	overflow-y: scroll !important;
	scrollbar-width: auto;
	scrollbar-color: #3b3b3b #000000;
}

.reveal-continer::-webkit-scrollbar {
		width: 16px;
}

.reveal-continer::-webkit-scrollbar-track {
		background: #000000;
}

.reveal-continer::-webkit-scrollbar-thumb {
		background-color: #3b3b3b;
		border-radius: 10px;
		border: 4px solid #000000;
}

.info-circle-trigger-box:hover .reveal-continer  {
	opacity: 1 !important;
	visibility: visible;
	z-index: 300 !important
}

.scroll-overflow .e-con-inner{
	overflow-y: scroll;
	overflow-x: hidden;
/* 	height: 550px; */
	height: calc(80vh - 100px);
	scrollbar-color: #3b3b3b #000000;
	scrollbar-width: auto;
	-webkit-overflow-scrolling: touch;
}

.scroll-overflow .e-con-inner::-webkit-scrollbar {
    width: 5px;
	background: #000000;
}

.scroll-overflow .e-con-inner::-webkit-scrollbar-track {
    background: #000000;
}

.scroll-overflow .e-con-inner::-webkit-scrollbar-thumb {
    background-color: #3b3b3b;
    border-radius: 10px;
} 


.reveal-content-uppercase-content p {
/* 	text-transform: uppercase !important; */
	font-size: 25px !important;
	line-height: 1.3em !important;
	font-weight: 700 !important;
}

.reveal-content-body-content p {
	font-size: 18px !important;
}

.scroll-overflow h2 {
	font-size: 30px !important;
}

.scrolling-right-side-popup .dialog-message{
	overflow: clip;
}

.body-top-spacers .elementor-spacer {
	height: 90px !important;
}

.page-id-100 .body-top-spacers .elementor-spacer,
.page-id-96 .body-top-spacers .elementor-spacer,
.page-id-94 .body-top-spacers .elementor-spacer, 
.page-id-91 .body-top-spacers .elementor-spacer,
.page-id-98 .body-top-spacers .elementor-spacer,
.page-id-162 .body-top-spacers .elementor-spacer{
	height: 140px !important;
}

.page-id-102 .body-top-spacers .elementor-spacer {
	height: 110px !important;
}

.elementor-lightbox .dialog-close-button {
	content: url("/wp-content/uploads/2023/10/icon-close-white-1.svg");
	display: inline-block;
	transform: scale(0.7);
	top: 1rem;
	right: 2rem;
}
/* 
.page-id-2891 .elementor-lightbox .dialog-close-button {
	top: -8px;
	right: -8px;
} */

.elementor-lightbox .dialog-close-button:hover {
	transform: scale(0.8);
}

#elementor-popup-modal-155 .elementor-divider-separator,
#elementor-popup-modal-613 .elementor-divider-separator{
	display: inline-block;
	border-top: 1px solid var(--color-white);
}

/* .logo-container .slick-track{
	animation-name: smoothSlider;
	animation-duration: 5s;
	animation-timing-function: linear;
	animation-delay: 0s;
	animation-iteration-count: infinite;
	animation-direction: reverse;
	animation-fill-mode: none;
	animation-play-state: running;
}

@keyframes smoothSlider {
	0% {
		transform: translate3d(-90vw, 0px, 0px);
	}
	
	100% {
		transform: translate3d(-100vw, 0px, 0px);
	}
	
} */

.logo-container .slick-initialized .slick-slide {
	  display:flex !important;
 	 height: 70px !important;
  	align-items: center !important;
  	aspect-ratio: 12 / 9 !important;
}

.logo-container .slick-slide img {
	max-width: 70px !important;
}

/* BUTTONS */

.btn-txt-grey a {
	font-size: 30px;
	color: var(--color-grey) !important;
	border-bottom: 1px solid var(--color-grey) !important;
	transition: var(--efx);
}

.btn-txt-grey a:hover {
	color: var(--color-red) !important;
	border-color: var(--color-red) !important;
}

.btn-txt-white-underline a,
.btn-txt-white-underline-no-active a{
	font-size: 30px;
	color: var(--color-white) !important;
	transition: var(--efx);
}

.btn-txt-white-underline .elementor-button-text,
.btn-txt-grey-underline .elementor-button-text,
.btn-txt-white-underline-no-active .elementor-button-text{
	text-align: start;
	text-decoration: underline;
}

.btn-txt-white-underline svg {
	transition: var(--efx) !important;
}

.active-btn-txt-white-underline svg {
	transform: rotate(135deg);
}

.active-btn-txt-white-underline a{
	opacity: 0.5 !important;
}

.btn-txt-grey-underline a {
	font-size: 30px;
	color: var(--color-grey) !important;
	transition: var(--efx);
}

.btn-txt-white a {
	font-size: 20px;
	font-weight: 900 !important;
	color: var(--color-white) !important;
	transition: var(--color-red);
	text-transform: uppercase;
}

.menu-popup-close-btn {
	transition: var(--efx);
}

.menu-popup-close-btn:hover {
	transform: scale(1.1);
}

/* HEADER */

.header-menu ul li:not(.current-menu-item) {
	display: none;
}

/* MENU POPUP */

.content-block strong {
	font-weight: 700 !important;
}

.menu-popup .content-block a,
.page-id-102 .content-block a{
	color: var(--color-white) !important;
	transition: var(--efx);
}

.menu-popup .content-block a:hover,
.page-id-102 .content-block a:hover{
	color: var(--color-red) !important;
}

/* TALENT */
 
.talent-flter .jet-checkboxes-list__label:after{
	content: ",";
	display: inline-block;
} 

.team-img img {
	filter: grayscale(1);
}

.team-designation {
	line-height: 1 !important;
}

/* CLIENTS */

#jet-video-lightbox-81525db .dialog-close-button.dialog-lightbox-close-button {
	content: url("/wp-content/uploads/2023/10/icon-close-white-1.svg");
	display: inline-block;
	transform: scale(0.7);
	transition: var(--efx);
}

#jet-video-lightbox-81525db .dialog-close-button.dialog-lightbox-close-button:hover {
	transform: scale(0.9);
}

/* REEL */

.ri-grid .brick {
	background-color:var(--color-black) !important;
}

#ri-grid-2890 .brick {
	width:10% !important;
} 


@media only screen and (max-width: 1024px) {
	#ri-grid-2890 .brick {
	width:16.6% !important;
	} 
}


 @media only screen and (max-width: 767px) {
	#ri-grid-2890 .brick {
	width:25% !important;
	} 

}


/* CONTACT */

::placeholder {
	color: var(--color-white) !important;
	opacity: 1;
}

.contact-form input:not(.button),
.contact-form textarea {
	background-color: transparent;
	border-bottom: 1px solid var(--color-grey);
	border-top: none;
	border-left: none;
	border-right: none;
	border-radius: 0;
	color: var(--color-white);
}

.contact-form textarea {
	height: 100px !important;
}

.iti__country-list {
	background: #efefefef;
	color: var(--color-black) !important;
}

.iti__dial-code {
	color: var(--color-black) !important;
}

.contact-form .button {
	background-color: #ff0000 !important;
    border: none;
    padding: 5px 10px !important;
    width: fit-content;
    font-size: 14px;
}

#gform_fields_2 {
	grid-column-gap: 2rem;
}

#gform_wrapper_2 {
		border: 1px solid var(--color-grey);
		padding: 20px;
		background-color: var(--color-trans-white) !important;
		-webkit-backdrop-filter: blur(5px);
		backdrop-filter: blur(5px);
	}


/* LAYER FI EFXS */ 

.layer-up-down {
	animation-name: updown;
	animation-iteration-count: infinite;
	animation-duration: 5s;
	animation-direction: alternate;
	animation-timing-function: ease-in-out;
}

.layer-up-down-delay {
	animation-name: updown;
	animation-iteration-count: infinite;
	animation-duration: 8s;
	animation-direction: alternate;
	animation-delay: 350ms;
	animation-timing-function: ease-in-out;
}

@keyframes updown {
	0 % {
		transform: translatey(0);	
	}
	
	50% {
		transform: translatey(5px);
	}
	
	100% {
		transform: translatey(-5px);
	}
}

.layer-grow {
	animation-name: grow;
	animation-iteration-count: infinite;
	animation-duration: 8s;
	animation-direction: alternate;
	animation-timing-function: ease-in-out;
}

.layer-grow-delay {
	animation-name: grow, infinate;
	animation-iteration-count: infinite;
	animation-duration: 20s;
	animation-direction: alternate;
	animation-delay: 500ms;
	animation-timing-function: ease-in-out;
}

@keyframes grow {
	0 % {
		transform: scale(1);	
	}
	
	50% {
		transform: scale(1.05);
	}
	
	100% {
		transform: scale(1);
	}
}

.layer-infinate-pattern {
	animation-name: infinate;
	animation-iteration-count: infinite;
	animation-duration: 20s;
	animation-direction: alternate;
	animation-timing-function: ease-in-out;
}

@keyframes infinate {
	0 % {
		transform: translate(10px, -5px);
	}
	
	25% {
		transform: translate(10px, 10px);
	}
	
	50% {
		transform: translate(5px, 5px);	
	}
	
	75% {
		transform: translate(-10px, -5px);
	}
	
	100% {
		transform: translate(0px, 10px);
	}
}

.layer-opacity {
	animation-name: opaqueInOut;
	animation-iteration-count: infinite;
	animation-duration: 5s;
	animation-direction: alternate;
	animation-timing-function: ease-in-out;
}

@keyframes opaqueInOut {
	0%{
		opacity: 0;
	}
	
	25%{
		opacity: 0.25;
	}
	
	50%{
		opacity: 0.50;
	}
	
	75%{
		opacity: 0.75;
	}
	
	100%{
		opacity: 1;
	}
}

.layer-opacity-alt {
	animation-name: fullOpaqueInOut;
	animation-iteration-count: infinite;
	animation-duration: 5s;
	animation-direction: alternate;
	animation-timing-function: ease-in-out;
}

@keyframes fullOpaqueInOut {
	0%{
		opacity: 1;
	}
	
	50%{
		opacity: 0;
	}
	
	100%{
		opacity: 1;
	}
}


.layer-left-to-right {
	animation-name: leftToRight;
	animation-iteration-count: infinite;
	animation-duration: 25s;
	animation-direction: alternate;
	animation-timing-function: ease-in-out;
}

@keyframes leftToRight {
	0% {
		transform: translatex(-200px) scale(0.5);
	}
	
	100% {
		transform: translatex(0) scale(1);
	}
}

.layer-right-to-left {
	animation-name: rightToLeft;
	animation-iteration-count: infinite;
	animation-duration: 20s;
	animation-timing-function: cubic-bezier(0.1, -0.3, 0.2, 0);
}

@keyframes rightToLeft {
	0% {
		transform: translatex(0) scale(1);
		opacity: 1;
	}
	
	100% {
		transform: translatex(200px) scale(0);
		opacity: 0;
	}
}

.layer-grow-rotate {
	animation-name: growRoate;
	animation-iteration-count: infinite;
	animation-duration: 180s;
	animation-direction: alternate;
}

@keyframes growRoate {
	0% {
		transform: rotatez(-10deg) scale(0.9);
	}
	
	50% {
		transform:rotatez(5deg) scale(0.95);
	}
	
	100% {
		transform: rotatez(0deg) scale(1);
	}
}

.layer-grow-rotate-alt {
	animation-name: growRoateAlt;
	animation-iteration-count: infinite;
	animation-duration: 20s;
	animation-direction: alternate;
	animation-timing-function: ease-in-out;
}

@keyframes growRoateAlt {
	0% {
		transform: rotatez(-15deg) scale(0.8) translatex(20px);
	}
	
	100% {
		transform: rotatez(0deg) scale(1);
	}
}

.layer-grow-rotate-up {
	animation-name: growRoateUp;
	animation-iteration-count: infinite;
	animation-duration: 50s;
	animation-timing-function: cubic-bezier(0.1, -0.1, 0.1, 0);
	transform-origin: top left;
}

@keyframes growRoateUp {
	0% {
		transform: rotatez(0deg) scale(1);
	}
	
	100% {
		transform: rotatez(-5deg) scale(0.3);
		filter: blur(2px);
		opacity: 0;
	}
}


.layer-slow-grow {
	animation-name: slowGrow;
	animation-iteration-count: infinite;
	animation-duration: 20s;
	animation-direction: alternate;
}

@keyframes slowGrow {
	0% {
		transform: scale(0.7);
	}
	
	50% {
		transform: scale(0.85);
	}
	
	75% {
		transform: scale(0.95);
	}
	
	100% {
		transform: scale(1);
	}
}

.layer-z-movement {
	animation-name: zMoveMent;
	animation-iteration-count: infinite;
	animation-duration: 10s;
	animation-direction: alternate;
	animation-timing-function: ease-in-out;
}

@keyframes zMoveMent {
	0% {
		transform: translate(0, 0) rotate(1deg);
		transform-origin: top left;
	}
	
	100% {
		transform: translate(1px, -1px) rotate(-2deg);
		transform-origin: top right;
	}
}

.step-opacity {
	animation-name: stepOp;
	animation-iteration-count: infinite;
	animation-duration: 1s;
	animation-direction: alternate;
	animation-timing-function: steps(7, end);
}

@keyframes stepOp {
	0% {
		opacity: 1;
		transform: translatex(-3px);
	}
	
	100% {
		opacity: 0;
		transform: translatex(3px);
	}
}

.layer-scale-small {
	animation-name: scaleSmall;
	animation-iteration-count: infinite;
	animation-duration: 2.5s;
	animation-direction: alternate;
	animation-timing-function: cubic-bezier(0.1, -0.5, 0.2, 0);
	transform-origin: top right;
}

@keyframes scaleSmall {
	0% {
		transform: scale(1, 0.993);
		opacity: 0.4;
	}
	
	100% {
		transform: scale(1, 1);
		opacity: 1;
	}
}

.layer-scale-small-alt {
	animation-name: scaleSmallAlt;
	animation-iteration-count: infinite;
	animation-duration: 2.5s;
	animation-direction: alternate;
	transform-origin: top right;
}


@keyframes scaleSmallAlt {
	0% {
		opacity: 0.15;
		transform: scale(1, 0.996);
		filter: blur(2px);
	}
	
	100% {
		opacity: 1;
		filter: blur(0);
	}
}

.layer-rotate-side {
	animation-name: rotateSides;
	animation-iteration-count: infinite;
	animation-duration: 2.5s;
	animation-direction: alternate;
	transform-origin: center 50%;
}

@keyframes rotateSides {
	0% {
		transform: rotatez(-2deg);
	}
	
	100% {
		transform: rotatez(2deg);
	}
}

/* REEL */

.reel-video .jet-video-html5-player {
	aspect-ratio: 16 / 8;
	object-fit: cover;
}


/* MEDIA QUERIES */

@media only screen and (max-height: 900px) {
	.reveal-continer {
		height: 450px !important;
		overflow-y: scroll !important;
		scrollbar-width: auto;
    	scrollbar-color: #3b3b3b #000000;
	}
	
	.reveal-continer::-webkit-scrollbar {
		width: 16px;
	}

	.reveal-continer::-webkit-scrollbar-track {
		background: #000000;
	}

	.reveal-continer::-webkit-scrollbar-thumb {
		background-color: #3b3b3b;
		border-radius: 10px;
		border: 4px solid #000000;
	}
	
	.main-header {
		background-color: transparent !important;
  		background-image: linear-gradient(180deg, var( --e-global-color-7980f01 ) 40%, transparent 100%) !important;
	}

}

@media only screen and (min-width: 320px) and (max-width: 810px) {
	.pad-lr {
		padding-left: 1rem;
		padding-right: 1rem;
	}
}

@media only screen and (min-width: 320px) and (max-width: 425px) {
	.btn-txt-grey a {
		font-size: 20px;
	}
	
	.btn-txt-white-underline a,
	.btn-txt-white-underline-no-active a {
		font-size: 20px !important;
	}
	
	.btn-txt-grey-underline a {
		font-size: 20px !important;
	}
	
	.info-txt-circle {
		width: 120px !important;
		height: 120px !important;
	}
	
	.info-txt-circle h2 {
		font-size: 18px !important;
		padding-top: 20px;
	}
	
	.info-txt-circle:before {
		left: -10px;
		top: -30px;
		transform: scale(0.3);
	}

	.info-circle-trigger-box:hover .info-txt-circle:before {
		transform: scale(0.3) translate(-6px, -50px);
		left: 0;
		top: 0;
	}
	
	.reveal-continer {
		z-index: 300 !important; 
	}
	
	.reveal-content-uppercase-content p {
		font-size: 18px !important;
	}
	
	.reveal-content-body-content p{
		font-size: 16px !important;
	}
	
	.btn-txt-white a {
		font-size: 18px !important;
	}
	
	.scroll-overflow h2 {
		font-size: 25px !important;
	}
	
	.scroll-overflow .e-con-inner{
		height: 490px;
	}
	
	.page-id-100 .body-top-spacers .elementor-spacer, 
	.page-id-96 .body-top-spacers .elementor-spacer, 
	.page-id-94 .body-top-spacers .elementor-spacer, 
	.page-id-91 .body-top-spacers .elementor-spacer, 
	.page-id-98 .body-top-spacers .elementor-spacer, 
	.page-id-162 .body-top-spacers .elementor-spacer {
		height: 55px !important;
	}
	
	.reveal-continer {
		max-height: 390px !important;
		overflow-y: scroll !important;
		top: 60px !important;
	}
	
	#gform_wrapper_2 {
		border: 1px solid var(--color-grey);
		padding: 10px;
		background-color: var(--color-trans-white) !important;
		-webkit-backdrop-filter: blur(5px);
		backdrop-filter: blur(5px);
	}
	
	#gform_2 {
		overflow: hidden;
	}
	
	.contact-form .button {
		width: 100% !important;
	}
	
	.header-menu a {
		font-size: 15px !important;
	}
	
	.logo-container .slick-initialized .slick-slide {
		aspect-ratio: 10 / 9 !important;
	}
	
	#address a {
		font-size: 13px !important;
	}
	
	.reel-video .jet-video-html5-player {
		aspect-ratio: 16 / 16;
	}
	
	.break-em a {
		word-break: break-all !important;
	}
	
}

@media only screen and (min-height: 700px) and (max-height: 768px) {
	.reveal-content-uppercase-content p {
		font-size: 23px !important;
	}
	
	.reveal-content-body-content p {
		font-size: 16px !important;
	} 
	
	h1 {
		font-size: 55px !important;
	}
	
	.info-circle-trigger-box {
		transform: scale(0.9) !important;
	}
	
	.page-id-100 .body-top-spacers .elementor-spacer,
	.page-id-96 .body-top-spacers .elementor-spacer,
	.page-id-94 .body-top-spacers .elementor-spacer, 
	.page-id-91 .body-top-spacers .elementor-spacer,
	.page-id-98 .body-top-spacers .elementor-spacer,
	.page-id-162 .body-top-spacers .elementor-spacer{
		height: 100px !important;
	}
}