@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap");
:root {
	/* --blue-color: #211C4C; */
	--blue-color: #140f4b;
	--light-shade: #143c81;
	--peach-color: #d99191;
	--footer-color-bg: #334155;
	--light-slate: transparent;
	--white-color: #fff;
}

* {
	margin: 0px;
	padding: 0px;
	box-sizing: border-box;
}
html {
	scroll-behavior: smooth;
}

html,
body {
	font-family: "Barlow", sans-serif;
	/* font-family: 'TimesNewRoman','Times New Roman','Times','Baskerville','Georgia';  */
	/* font-family: "Bebas Neue", sans-serif;
    font-weight: 100;
    font-style: normal; */
	/* font-family: 'Lora', serif;  */
	/* background: url(../images/bg-popular.png); */
}

/*body a {
    color: #333;
    text-decoration: none;
    transition: 0.5s all;
    -webkit-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -o-transition: 0.5s all;
    -ms-transition: 0.5s all;
}
*/

a:hover {
	text-decoration: none;
}

.about-heading {
	margin-top: 20px;
	margin-bottom: 3px !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin-top: 20px;
	margin-bottom: 10px;
}

h3 {
	color: var(--footer-color-bg);
}

p {
	margin: 0 0 10px;
}

ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

label {
	margin: 0;
}
.navbar-brand img {
	width: 150px;
	margin-top: -20px;
}

@media (max-width: 992px) {
	.navbar-brand img{
		width: 80px;
		margin: -8px 0;
	}
}

hr {
	display: block;
	height: 2px;
	background-color: var(--footer-color-bg);
	margin-top: 0.5em;
	margin-bottom: 1.5em;
	margin-left: 0px;
	margin-right: auto;
	border-style: inset;
	border-width: 1px;
	width: 70px;
}

/*nav*/
/*#header {
background-color: #fff;
}*/
/*nav*/
/*video*/

.video-section {
	height: 100vh;
	position: relative;
}

.video-section-index {
	height: 65vh;
}
.about-video {
	height: 50vh !important;
	position: relative;
	/* margin-top: 70px; */
	margin-left: 20px;
	margin-right: 20px;
}

.video-section-index#working-with-scg{
	background-color: #000;
}

video#video-working-with-scg{
	opacity: 60%;
}

.video-section::before {
	content: "";
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background-color: #00000052;
}

video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

.video-section .video-content {
	position: absolute;
	top: 50%;
	/*left: 100px;*/
	transform: translateY(-50%);
	width: 100%;
	text-align: center;
}
.video-content p a {
	color: #00ffea;
}
.video-section h2 {
	font-size: 36px;
	display: block;
	text-align: center;
	color: #fff;
	font-weight: 400;
	margin: 10px 0px;
}

.video-section p {
	color: #fff;
	font-size: 20px;
	line-height: 30px;
}
/*video*/

.about-area {
	margin-bottom: 70px;
	margin-top: 70px;
}

.about-area .about-section {
	display: flex;
	/*align-items: center!important;
    justify-content: center!important;*/
	flex-wrap: wrap;
}

.video1{
	top:32px;
}
/*.about-img::before {
    content: "";
    left: 0;
    position: absolute;
    background-color: #fff;
    height: 10%;
    bottom: -30px;
    -webkit-transform: skewY(175deg);
    transform: skewY(175deg);
    width: 100%;
    z-index: 1;
}

.about-img::after {
    content: "";
    left: 0;
    position: absolute;
    background-color: #fff;
    height: 10%;
    top: -30px;
    -webkit-transform: skewY(-175deg);
    transform: skewY(-175deg);
    width: 100%;
    z-index: 1;
}
*/

.section-title .sp-title {
	padding-bottom: 22px;
	display: inline-block;
	line-height: 0;
	font-size: 15px;
	color: #f85f0a;
	padding-left: 0;
	position: relative;
	font-weight: 500;
}

.about-content .section-title {
	margin-bottom: 20px;
}
.abbbb img {
	height: 400px;
	object-fit: contain;
}
/* .section-title .sp-title::after {
    content: "";
    position: absolute;
    bottom: 14px;
    left: 0;
    height: 15px;
    width: 10%;
    background-color: #fff;
    -webkit-animation: MOVE-BG 2s linear infinite;
    animation: MOVE-BG 2s linear infinite;
}
*/

.section-title h2 {
	font-size: 40px;
	font-weight: 500;
	margin-top: 0;
	line-height: 1.2;
	color: #00042e;
	margin-bottom: 0;
}
/* @keyframes MOVE-BG {
    from {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
    to {
        -webkit-transform: translateX(88px);
        transform: translateX(88px)
    }
}
*/

.section-title p {
	padding-top: 15px;
	margin-bottom: 0;
	line-height: 30px;
	font-size: 16px;
}

.about-content .default-btn {
	margin-top: 15px;
}

.default-btn {
	padding: 10px 30px;
	color: var(--white-color);
	text-align: center;
	position: relative;
	overflow: hidden;
	z-index: 1;
	text-transform: capitalize;
	background-color: var(--footer-color-bg);
	border: none;
	outline: none;
	/*border-radius: 5px;*/
	margin-top: 20px;
	display: inline-block;
	border-radius: 6px;
}

.default-btn::before {
	content: "";
	position: absolute;
	top: 0;
	width: 0;
	height: 100%;
	background-color: var(--footer-color-bg);
	left: 0;
	right: 0;
	opacity: 0;
	z-index: -1;
	-webkit-transition: 1s;
	transition: 1s;
}

.default-btn:hover {
	background: none;
	color: var(--white-color);
	/*border-radius: 5px;*/
}

.default-btn:hover::before {
	width: 100%;
	opacity: 1;
	color: var(--white-color);
	/*border-radius: 5px;*/
}

.about-content .about-list {
	list-style-type: none;
	padding: 0;
	margin: 0;
}

.about-content .about-list li {
	display: block;
	font-size: 18px;
	color: #000;
	margin-bottom: 10px;
	font-weight: 500;
	-webkit-transition: 0.5s;
	transition: 0.5s;
}

.about-content .about-list li i {
	color: #f85f0a;
	margin-right: 5px;
	position: relative;
	top: 3px;
	-webkit-transition: 0.5s;
	transition: 0.5s;
}

.about-content .about-list li:hover {
	color: #f85f0a;
	letter-spacing: 0.25px;
	margin-left: 2px;
}
/*service*/

.service-area {
	background-color: #eee;
	padding: 50px 0px 0px;
}

.feature-numberd-item {
	position: relative;
	text-align: center;
	margin-top: 20px;
	box-shadow: 2px 5px 15px 0px #b1adad;
}

.service-item:hover {
	-webkit-transform: translateY(-5px);
	-moz-transform: translateY(-5px);
	-ms-transform: translateY(-5px);
	-o-transform: translateY(-5px);
	transform: translateY(-5px);
	transition: all 0.6s linear;
}

.service-item .service__content {
	-webkit-transition: all 0.6s linear;
	-moz-transition: all 0.6s linear;
	-ms-transition: all 0.6s linear;
	-o-transition: all 0.6s linear;
	transition: all 0.6s linear;
	background-color: var(--white-color);
	padding: 50px 40px 50px;
}

.service-item .service__content {
	padding: 20px;
	display: flex;
	flex-direction: row;
}

.service-item .service__icon {
	margin-bottom: 20px;
}

.service__icon img {
	width: 160px !important;
	height: 250px;
	object-fit: cover;
}

.content-area {
	padding-left: 20px;
	text-align: left;
}

.service-item .service__desc {
	margin-bottom: 0;
	min-height: 100px;
}

.service-item .service__title {
	font-size: 26px;
	font-weight: 400;
	margin-bottom: 10px;
	color: var(--footer-color-bg);
	height: 100px;
}

.service-item .btn__link {
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	justify-content: space-between;
	padding-top: 28px;
	margin-top: 28px;
	border-top: 2px solid #eaeaea;
	font-weight: 600;
}

.service-item .btn__link i {
	background-color: var(--white-color);
	color: #222;
}

.service-item .btn__link i {
	width: 22px;
	height: 22px;
	line-height: 22px;
	background-color: #222;
	color: var(--white-color);
	border-radius: 50%;
	display: inline-block;
	-webkit-transition: all 0.5s linear;
	-moz-transition: all 0.5s linear;
	-ms-transition: all 0.5s linear;
	-o-transition: all 0.5s linear;
	transition: all 0.5s linear;
}

.service-item .btn__link:hover i {
	background-color: #ffffff;
	color: var(--footer-color-bg);
}

.feature-numberd-item:hover {
	-webkit-transform: translateY(-5px);
	-moz-transform: translateY(-5px);
	-ms-transform: translateY(-5px);
	-o-transform: translateY(-5px);
	transform: translateY(-5px);
	box-shadow: 2px 5px 15px 0px #b1adad;
}

.feature-numberd-item:hover .service__icon {
	-webkit-animation: slideTopDown 1s infinite alternate;
	-moz-animation: slideTopDown 1s infinite alternate;
	-ms-animation: slideTopDown 1s infinite alternate;
	-o-animation: slideTopDown 1s infinite alternate;
	animation: slideTopDown 1s infinite alternate;
}

.feature-numberd-item .service__overlay {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	text-align: center;
	background-color: rgba(255, 94, 20, 0.9);
	-webkit-transition: all 0.5s linear;
	-moz-transition: all 0.5s linear;
	-ms-transition: all 0.5s linear;
	-o-transition: all 0.5s linear;
	transition: all 0.5s linear;
}

.feature-numberd-item:hover .service__overlay {
	opacity: 1;
}

@keyframes slideTopDown {
	0% {
		-webkit-transform: translateY(0);
		-moz-transform: translateY(0);
		-ms-transform: translateY(0);
		-o-transform: translateY(0);
		transform: translateY(0);
	}
	100% {
		-webkit-transform: translateY(-6px);
		-moz-transform: translateY(-6px);
		-ms-transform: translateY(-6px);
		-o-transform: translateY(-6px);
		transform: translateY(-6px);
	}
}

.feature-numberd-item:hover .service__content {
	background-color: var(--white-color);
}

.feature-numberd-item:hover .btn__link,
.feature-numberd-item:hover .service__desc,
.feature-numberd-item:hover .service__icon i,
.feature-numberd-item:hover .service__title {
	color: var(--footer-color-bg);
}
/*service*/
/*choose*/

.choose-area .section-title {
	margin-bottom: 40px;
}

.section-title h2 {
	font-size: 40px;
	margin-top: 0;
	color: var(--footer-color-bg);
	margin-bottom: 30px;
}

.choose-card {
	margin-bottom: 40px;
	padding: 74px 30px 65px 30px;
	position: relative;
	z-index: 1;
	background-color: transparent;
	margin-right: 10px;
}

.choose-card::before {
	content: "";
	top: 0;
	left: 0;
	right: 0;
	position: absolute;
	background-color: #fbf9f9;
	height: 100%;
	width: 100%;
	-webkit-transform: skewY(165deg);
	transform: skewY(165deg);
	z-index: -1;
	border-radius: 5px;
}

.choose-card h3 {
	margin-bottom: 15px;
}

.choose-card p {
	margin-bottom: 0;
}

.choose-card i {
	font-size: 50px;
	position: absolute;
	top: 52px;
	right: 20px;
	color: #004068;
	line-height: 1;
}
/*choose*/
/*image-section-content*/

.image-section-content {
	width: 60%;
	padding: 30px 40px 0 30px;
	height: 50%;
	background-color: transparent;
	position: absolute;
	/* right: 1 */
	left: 2%;
	top: 33%;
}

.image-section-content h2 {
	color: #ffffff;
	font-size: 20px;
	font-weight: 700;
	margin: 0px;
}

.image-section-content2 {
	padding-top: 15px;
	margin-bottom: 20px;
}

.image-section-content2 h3 {
	color: #ffffff;
	font-size: 20px;
	font-weight: 700;
	margin: 0px;
}

.image-section-content2 p {
	color: #ffffff;
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	margin-bottom: 0px;
	text-align: justify;
	/* justify-content: right; */
}

.image-content-button {
	position: absolute;
	right: 50px;
	bottom: 33px;
}

.image-content-button a {
	border: solid 1px #ffffff;
	border-radius: 5px;
	color: #ffffff;
	background-color: transparent;
	font-size: 16px;
	font-weight: 700;
	padding: 14px 35px;
	cursor: pointer;
	max-height: 58px;
	text-decoration: none;
	transition: all 0.2s ease-in-out, background-color 0.05s, color 0.05s;
	min-width: 136px;
	text-align: center;
}

.image-content-button:hover a {
	background-color: #fff;
	color: var(--footer-color-bg);
	border: 1px solid var(--footer-color-bg);
	border-radius: 5px;
}
/*image-section-content*/
/*img-flip*/

.tree {
	background: linear-gradient(to bottom, rgb(46 46 46 / 65%), rgb(20 20 20 / 56%)),
		url(../images/SCG/Core-Value-Backdrop.jpeg);
	background-repeat: no-repeat;
	background-size: cover;
}

.img-container {
	perspective: 1000px; /* Adds perspective for 3D effect */
}

.img-flip {
	position: relative;
	transition: transform 0.7s ease; /* Changed transition property */
	transform-style: preserve-3d; /* Ensures child elements maintain 3D position */
	height: inherit;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	min-height: 494px;
	margin-bottom: 30px;
	overflow: hidden;
	width: 100%;
	padding: 35px 35px 10px;
}

.overlay {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100%;
	width: 100%;
	opacity: 0;
	transition: 0.5s ease;
	background-color: var(--footer-color-bg);
	box-shadow: 0 2px 8px var(--footer-color-bg);
}

.text {
	color: var(--footer-color-bg);
	font-size: 20px;
	position: absolute;
	top: 10%;
	left: 10%;
	right: 10%;
	background-color: var(--white-color);
}

.text p {
	font-size: 16px;
}
/*img-flip*/
/*testimonial*/

.testimonial {
	/* border: 1px solid #c9ced3; */
	/* border-top: 3px solid #c9ced3; */
	padding: 60px 30px 100px;
	margin-bottom: 30px;
	margin-bottom: 30px;
	position: relative;
	border-radius: 10px;
	/* box-shadow: 0 2px 8px rgba(51,65,85,0.25); */
	box-shadow: 2px 5px 15px 0px #b1adad;
	/* border: 1px solid var(--footer-color-bg); */
}

.testimonial:after {
	content: "\f10d";
	font-family: "FontAwesome";
	font-weight: 900;
	font-size: 30px;
	color: #004068;
	position: absolute;
	top: 20px;
	left: 25px;
}

.testimonial p {
	font-size: 14px;
	color: #666;
	line-height: 26px;
	min-height: 160px;
}

.testimonial .pic {
	width: 100px;
	height: 100px;
	position: absolute;
	bottom: -30px;
	left: 25px;
}

.testimonial .pic img {
	width: 100%;
	height: 100px;
}

.testimonial .testimonial-title {
	font-size: 20px;
	color: #000;
	position: absolute;
	bottom: 20px;
	left: auto;
}

.testimonial .testimonial-title small {
	display: block;
	font-size: 14px;
	color: #666;
	margin-top: 7px;
}
/*testimonial*/
/*breadcum*/

.page-title {
	position: relative;
	width: 100%;
	padding: 10px 0px;
	background-color: #004068;
}

.page-title h2.title {
	margin: 0 0 25px;
	font-size: 50px;
	color: #fff;
	font-weight: 700;
	line-height: 1.26;
	text-align: center;
}

.image-left {
	position: relative;
	overflow: hidden;
	width: 650px;
	float: left;
	margin-right: 30px;
	margin-bottom: 20px;
	/* background-color: #d1651a; */
}

.breadcrumbs {
	background: #edf7fb;
	padding: 25px 0;
	text-align: center;
}

.breadcrumbs span,
.breadcrumbs a {
	font-size: 15px;
	color: #000;
	font-weight: 700;
	/* text-transform: uppercase*/
}

.breadcrumbs a:hover {
	color: #093eb6;
}

.breadcrumbs i {
	padding-right: 15px;
	color: #000;
}

.breadcrumbs span.parent i {
	padding-right: 5px;
}

.breadcrumbs span {
	padding-right: 15px;
}
/*breadcum*/
/*career*/

.single-job-list-item {
	border: 2px solid #f4f7fc;
	border-radius: 5px;
	margin-bottom: 30px;
	padding: 30px;
	box-shadow: 2px 5px 15px 0px #b1adad;
	transition: 0.5s all ease-in-out;
}

.single-job-list-item img {
	height: 250px;
	margin-bottom: 20px;
}

.single-job-list-item:hover {
	box-shadow: none;
	transition: 0.5s all ease-in-out;
}

.single-job-list-item .job_type {
	background-color: #e0f5d7;
	border-radius: 20px;
	padding: 5px 15px;
	color: #449626;
	text-transform: capitalize;
	font-size: 14px;
	font-weight: 500;
	display: inline-block;
}

.single-job-list-item .title {
	font-size: 26px;
	font-weight: 700;
	line-height: 36px;
	margin-bottom: 15px;
	transition: all 0.3s;
}

.single-job-list-item .company_name,
.single-job-list-item .deadline {
	display: block;
	margin-bottom: 10px;
}

.single-job-list-item .company_name strong,
.single-job-list-item .deadline strong {
	margin-right: 10px;
	font-weight: 600;
}

.single-job-list-item .jobs-meta {
	margin: 0;
	padding: 0;
	list-style: none;
	margin-top: 30px;
}

.single-job-list-item .jobs-meta li {
	display: inline-block;
	border-radius: 25px;
	padding: 5px 10px;
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
	font-weight: 500;
	font-size: 14px;
}

.single-job-list-item .jobs-meta li:nth-child(1) i {
	color: #12b6e8;
}

.single-job-list-item .jobs-meta li i {
	margin-right: 5px;
}

.single-job-list-item .jobs-meta li + li {
	margin-left: 10px;
}

.single-job-list-item .jobs-meta li:nth-child(2) i {
	color: #2a41e8;
}

.single-job-list-item .jobs-meta li:nth-child(3) i {
	color: #dc3139;
}
/*career*/
/*contact-page*/

.section-title .title-header {
	margin-bottom: 25px;
	position: relative;
}

.section-title .title-header h3 {
	font-size: 30px;
	line-height: 35px;
	font-weight: 600;
}

ul.ttm_contact_widget_wrapper li {
	position: relative;
	padding-top: 15px;
	padding-bottom: 15px;
	line-height: 25px;
	border-bottom: 1px solid #eaeaea;
}

ul.ttm_contact_widget_wrapper li h6 {
	font-size: 18px;
	line-height: 24px;
	padding-left: 37px;
	margin: 0px;
}

ul.ttm_contact_widget_wrapper li i {
	position: absolute;
	left: 0;
	top: 15px;
	font-size: 20px;
	font-weight: 400;
}
/*contact-page*/
/*counter*/

.counter {
	margin-bottom: 20px;
}

.counter-num {
	color: var(--footer-color-bg);
	font-size: 3em;
	font-weight: 600;
	letter-spacing: -1.1px;
	margin-bottom: 0px;
}

.counter-icon {
	color: #ffffff;
	font-size: 2em;
	font-weight: 600;
	letter-spacing: -1.1px;
	margin-bottom: 0px;
	background-color: var(--footer-color-bg);
	/* padding: 20px; */
	text-align: center;
	height: 50px;
	width: 50px;
	line-height: 50px;
	border-radius: 100px;
	margin-top: 8px;
}

.counter h3 {
	margin: 0px;
	font-size: 20px;
}
/*footer*/

.footer-area-bg {
	background-color: var(--footer-color-bg);
	/* background-color: var(--blue-color); */
}

.footer-top {
	padding-bottom: 50px;
	padding-top: 50px;
}
.footer-bottom {
	padding-bottom: 0.2em;
	padding-top: 1em;
}

.footer-contact {
	/* background-color: var(--blue-color); */
	padding: 20px 20px 40px 100px;
	position: relative;
	z-index: 1;
	cursor: pointer;
	border-radius: 5px;
	margin-bottom: 30px;
}

.footer-contact .icon {
	position: absolute;
	top: 20px;
	left: 20px;
}

.footer-contact .icon i {
	width: 55px;
	height: 55px;
	line-height: 55px;
	text-align: center;
	background-color: #004068;
	color: #fff;
	font-size: 26px;
	border-radius: 5px;
	display: inline-block;
}

.footer-contact .content h3 {
	font-size: 18px;
	margin-bottom: 5px;
	margin-top: 0px;
}

.footer-contact .content h3 a {
	color: #fff;
	margin-bottom: 0;
}

.footer-contact .content p {
	color: #fff;
	margin: 0;
}

.footer-contact .right {
	font-size: 50px;
	color: #181c3c;
	position: absolute;
	z-index: -1;
	top: 17px;
	right: 20px;
}

.footer-widget {
	margin-bottom: 30px;
}

.footer-widget p {
	margin-bottom: 25px;
	color: #fff;
}

.footer-widget .social-link {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.footer-widget .social-link li {
	display: inline-block;
	margin-right: 10px;
}

.footer-widget .social-link li a i {
	width: 40px;
	height: 40px;
	line-height: 40px;
	background-color: #fff;
	border-radius: 0;
	text-align: center;
	color: #004068;
	font-size: 24px;
	-webkit-transition: 1s;
	transition: 1s;
}

.footer-widget h3 {
	margin-top: 0;
	font-size: 22px;
	margin-bottom: 30px;
	color: #fff;
	line-height: 1.2;
}

.footer-widget .footer-list li {
	display: block;
	margin-bottom: 15px;
}

.footer-widget .footer-list li a {
	color: #fff;
}

.newsletter-area .newsletter-form {
	position: relative;
}

.newsletter-area .newsletter-form .form-control {
	background: #0e1125;
	border-radius: 5px;
	height: 60px;
	line-height: 60px;
	margin: 0;
	border-radius: 5px;
	border: none;
	padding: 0 25px;
	max-width: 100%;
	color: #fff;
}

.newsletter-area .newsletter-form .subscribe-btn {
	position: absolute;
	top: 0;
	right: 0;
	background-color: #fff;
	color: #004068;
	padding: 13px 16px;
	font-size: 24px;
	border: 0;
	border-radius: 0 5px 5px 0;
	text-align: center;
}

.copyright-area {
	border-top: 1px solid #1f1747;
	padding: 15px 0;
}

.copy-right-text p {
	color: #fff;
	margin-bottom: 0;
}

.copy-right-text p a {
	color: #f85f0a;
}
/*footer*/

@media (max-width: 768px) {
	.video-section {
		height: 20vh;
	}
	.video-section .video-content {
		left: 0px;
		width: 100%;
		padding: 10px;
	}
	.video-section h2 {
		font-size: 26px;
		color: #fff;
	}
	.video-section p {
		font-size: 12px;
		line-height: 20px;
	}
	.about-area .about-section {
		display: block;
	}
	.about-img::before,
	.about-img::after {
		display: none;
	}
	.image-section-content {
		width: 100%;
		position: inherit;
	}
	.service-item .service__content {
		display: block;
	}
	.service__icon img {
		width: 100% !important;
	}
	.content-area {
		padding-left: 0px;
	}
	.navbar-brand img {
		width: 110px;
	}
}

button#prev,
button#next {
	border: none;
	cursor: pointer;
	transition: all 0.3s ease-in-out;
}

.prev-btn,
.next-btn {
	background: white;
	border: none;
	cursor: pointer;
}

.carousel-view {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	/* padding: 44px 0; */
	transition: all 0.25s ease-in;
}

.carousel-view .item-list {
	max-width: 950px;
	width: 70vw;
	padding: 50px 10px;
	display: flex;
	gap: 48px;
	scroll-behavior: smooth;
	transition: all 0.25s ease-in;
	-ms-overflow-style: none; /* IE and Edge */
	scrollbar-width: none; /* Firefox */
	overflow: auto;
	scroll-snap-type: x mandatory;
}

.item-slider {
	display: flex;
	flex-direction: column;
	flex: 0 0 350px;
	height: 450px;

	align-items: center;

	padding: 56px 18px;
	gap: 36px;

	border-radius: 15px;
	box-sizing: border-box;

	color: black;
	background-color: hsl(245, 67%, 18%, 5%);

	border: solid 2px transparent;
	/* box-shadow: 0 1px 7px var(--footer-color-bg); */
	box-shadow: 6px 0 5px -2px #888;
	scroll-snap-align: center;
	cursor: pointer;

	transition: 0.75s cubic-bezier(0.175, 0.885, 0.32, 1.275);

	.img-box {
		height: 200px;
		width: 200px;

		img {
			object-fit: fill;
			border-radius: 50%;
			scale: 1.2;
		}
	}

	.txt-box {
		height: inherit;
		font-weight: 500;
	}

	.txt-box p {
		font-size: 18px;
		font-style: normal;
	}
}

.item-slider:hover {
	border: var(--royal-blue) 2px solid;
}

.lora-uniquifier {
	/* font-family: "Lora", serif!important; */
	font-optical-sizing: auto !important;
	font-weight: 400 !important;
}
.navbar {
	box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 10px -21px !important;
	/* box-shadow: 0 2px 4px 1px rgba(0,0,0,0.25); */
}

.e1 {
	background-color: #221f1f;
	color: #fff;
	height: 100%;
	display: block;
}
.e2 {
	margin: auto 0px;
}

.career-img {
	width: 100%;
	/* height: 50%; */
	object-fit: cover;
}

#career-btn {
	padding: 10px 30px;
	color: var(--white-color);
	text-align: center;
	position: relative;
	z-index: 1;
	text-transform: capitalize;
	outline: none;
	/*border-radius: 5px;*/
	margin-top: 20px;
	display: inline-block;
	border-radius: 6px;
	background-color: #fff;
	color: #e50914;
	border: 1px solid #e50914;
	border-radius: 0px !important;
}

.container-services {
	max-width: 90%;
	margin: auto;
}

#our-services{
	.hero{
		display: flex;
		height: 516px;
		padding: 42px 96px;
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
		gap: 32px;
		align-self: stretch;

		background: linear-gradient(0deg, rgba(0, 0, 0, 0.60) 0%, rgba(0, 0, 0, 0.60) 100%), url('../images/services/banner-img.webp') lightgray 50% / cover no-repeat;

		#group{
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: flex-start;
			gap: 16px;
			
			#title{
				color: #FFF;
				text-align: center;
				font-family: Barlow;
				font-size: 64px;
				font-style: normal;
				font-weight: 700;
				line-height: normal;
				text-shadow: 0px 8px 10px rgba(0, 0, 0, 0.50);

			}
			#subtitle{
				width: 724px;				
				color: #FFF;
				font-family: Barlow;
				font-size: 27px;
				font-style: normal;
				font-weight: 600;
				line-height: normal;		
				text-shadow: 0px 8px 10px rgba(0, 0, 0, 0.50);
		
			}
		}
		.call-to-action{
			display: flex;
			padding: 18px;
			align-items: center;
			gap: 13px;
			border-radius: 7.8px;
			background: #334155;
			box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
					
			#text{
				color: #FFF;
				text-align: center;
				font-family: Barlow;
				font-size: 23.8px;
				font-style: normal;
				font-weight: 600;
				line-height: normal;
				letter-spacing: 0.714px;	
			}
		}
	}

	.section#our-impact{
		display: flex;
		
		padding: 36px;
		align-items: flex-start;
		gap: 48px;
		align-self: stretch;

		background: #FFF;

		#column1{
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			gap: 2rem;

			div#header{
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				gap: 7px;

				p#title{
					color: #B20710;
					text-align: center;
					font-family: Barlow;
					font-size: 37px;
					font-style: normal;
					font-weight: 600;
					line-height: normal;
				}
				p#subtitle{
					color: #140F4B;
					font-family: Barlow;
					font-size: 27px;
					font-style: normal;
					font-weight: 600;
					line-height: normal;
				}
			}

			p#description{
				color: #1E1E1E;
				font-family: Barlow;
				font-size: 21px;
				font-style: normal;
				font-weight: 300;
				line-height: normal;
			}

			div#links{
				display: flex;
				align-items: flex-start;
				gap: 16px;

				.link{
					display: flex;
					align-items: center;
					gap: 4px;

					a{
						color: #000;
						font-family: Montserrat;
						font-size: 13px;
						font-style: normal;
						font-weight: 600;
						line-height: normal;
					}
				}
			}
		}
		
		img{
			min-width: 427px;
			align-self: stretch;
			background: url('../images/services/our-impact.jpg') lightgray 50% / cover no-repeat;
			border-radius: 9px;
		}
	}

	.section#our-services-section{
		display: flex;
		padding: 35px 39px;
		padding-top: 0px;
		flex-direction: column;
		align-items: flex-start;
		gap: 48px;
		background: #fff;
		.header{
			h2{
				color: #B20710;
				text-align: center;
				font-family: Barlow;
				font-size: 40px;
				font-style: normal;
				font-weight: 600;
				line-height: normal;
			}
		}
	}
	.services-list{
		/* box-sizing: border-box; */
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		align-self: stretch;
		
		.service{
			display: flex;
			height: 380px;
			padding: 0px 10px;
			align-items: flex-start;
			align-self: stretch;
			cursor: pointer;
			
			img{
				flex: 1 0 0;
				align-self: stretch;
				object-fit: cover;
				border-radius: 4px;
				background: url('../images/services/card-img.webp') lightgray 50% / cover no-repeat;
			}
			
			.text-container{
				display: flex;
				padding: 0px 48px;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				gap: 10px;
				flex: 1 0 0;
				align-self: stretch;

				h3 {
					align-self: stretch;
					color: #140F4B;
					text-align: center;
					font-family: Barlow;
					font-size: 32px !important;
					font-style: normal;
					font-weight: 600;
					line-height: normal;
				}
				
				p {
					align-self: stretch;
					color: #000;
					text-align: center;
					font-family: Barlow;
					font-size: 18px !important;
					font-style: normal;
					font-weight: 300;
					line-height: normal;
				}
			}
		}
	}

	#talk-to-us {
		padding: 72px 0px;
		align-items: center;
		gap: 10px;
		align-self: stretch;

		.container {
			.content {
				display: flex;
				flex-direction: column;
				align-items: center;
				gap: 32px;

				.title {
					color: #b20710;
					text-align: center;
					font-family: Barlow;
					font-size: 40px;
					font-style: normal;
					font-weight: 600;
					line-height: normal;
				}
				.subtitle {
					width: 959px;

					color: #140f4b;
					text-align: center;
					font-family: Barlow;
					font-size: 25px;
					font-style: normal;
					font-weight: 500;
					line-height: normal;
				}
				.btn {
					display: flex;
					padding: 10px;
					align-items: center;
					gap: 10px;

					border-radius: 6px;
					background: #334155;

					color: #fff;

					text-align: center;
					font-family: Barlow;
					font-size: 16px;
					font-style: normal;
					font-weight: 600;
					line-height: normal;
					letter-spacing: 0.48px;
				}
			}
		}
	}
}

.service-page {
	width: inherit;
	box-sizing: border-box;

	.banner {
		display: flex;

		height: 420px;
		padding: 42px;

		flex-direction: column;
		justify-content: center;
		align-items: flex-start;

		gap: 34px;

		align-self: stretch;

		background: linear-gradient(
				0deg,
				rgba(0, 0, 0, 0.60) 0%,
				rgba(0, 0, 0, 0.60) 100%
			),
			url("../images/services/banner-img.webp") lightgray 50% / cover no-repeat;

		background-size: cover;
		background-repeat: no-repeat;

		.title {
			color: #fff;
			text-align: center;
			font-family: Barlow;
			font-size: 48px;
			font-style: normal;
			font-weight: 700;
			line-height: normal;
		}

		.subtitle {
			width: 724px;

			color: #fff;
			font-family: Barlow;
			font-size: 27px;
			font-style: normal;
			font-weight: 600;
			line-height: normal;
		}
	}

	#our-impact {
		display: flex;
		padding: 32px 32px;
		align-items: flex-start;
		gap: 48px;
		align-self: stretch;

		#column1 {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			gap: 32px;

			#header {
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				gap: 7px;
	
				#title {
					color: #b20710;
					text-align: center;
					font-family: Barlow;
					font-size: 37px;
					font-style: normal;
					font-weight: 600;
					line-height: normal;
				}
				#subtitle {
					color: #140f4b;
					font-family: Barlow;
					font-size: 32px;
					font-style: normal;
					font-weight: 600;
					line-height: normal;
				}
			}

			p#description {
				color: #1e1e1e;
				font-family: Barlow;
				font-size: 24px;
				font-style: normal;
				font-weight: 300;
				line-height: normal;
			}
			#links {
				display: flex;
				align-items: flex-start;
				gap: 36px;
				.link {
					display: flex;
					align-items: center;
					gap: 4px;
	
					a {
						color: #000;
						font-family: Montserrat;
						font-size: 18px;
						font-style: normal;
						font-weight: 600;
						line-height: normal;
					}
				}
			}
		}

		img{
			margin-top: auto;
			margin-bottom: auto;
			max-width: 550px;
		}

	}

	.sub-services{
		display: flex;
		padding: 35px 39px;
		flex-direction: column;
		align-items: flex-start;
		gap: 48px;
		align-self: stretch;

		.header{
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			gap: 7px;
			align-self: stretch;

			p.title{
				color: #B20710;
				text-align: center;
				font-family: Barlow;
				font-size: 40px;
				font-style: normal;
				font-weight: 600;
				line-height: normal;
			}
			p.subtitle{
				max-width: 620px;

				color: #140F4B;
				font-family: Barlow;
				font-size: 30px;
				font-style: normal;
				font-weight: 600;
				line-height: normal;
			}
		}

		.sub-service-cards {
			display: grid;
			width: 100%;
			grid-template-columns: repeat(
				auto-fit,
				minmax(320px, 1fr)
				); /* Adjust columns and size as needed */
			grid-auto-flow: column;
			height: 400px;
			box-sizing: content-box;
			overflow-x: scroll;

			.card {
				display: grid;
				height: 360px;
				width: 316px;

				grid-template-rows: 52px auto 32px;

				padding: 16px;

				border-radius: 8px;
				border: 1px solid #334155;
				background: #fff;

				cursor: pointer;

				/* transition: ease 0.75s; */
				overflow: hidden;

				img {
					display: none;
					object-position: right top;
					overflow: hidden;
					opacity: 0;
					transition: 1s linear;
					transition-delay: 1s;
					/* scale: 0; */
				}

				p.sub-service-title {
					align-self: stretch;

					color: #140f4b;
					font-family: Barlow;
					font-size: 20px;
					font-style: normal;
					font-weight: 600;
					line-height: normal;
					/* transition: 1s ease; */
				}

				.content{
					overflow: hidden;
					padding: 4px 0 4px 0;
				}

				.content.expanded {
					margin: -18px 0 0 0;
					display: none;
					opacity: 0;
					transition-property: opacity;
					animation: reveal linear 1s;
					transition-delay: 1s;
					padding: 0;
				}

				.body-text {
					color: #000;
					font-family: "Montserrat", sans-serif;
					font-size: 16px;
					font-style: normal;
					font-weight: 400;
					line-height: normal;
				}

				.link {
					display: flex;
					align-items: center;

					a.short {
						display: inline-block;
					}
					a.expanded {
						display: none;
					}
				}
			}

			.card.expanded {
				display: grid;
				height: 360px;
				width: 100%;

				grid-template-columns: 300px auto;

				gap: 16px;
				animation: expand .75s ease-in-out ;

				img {
					height: 100%;
					width: 100%;
					display: block;
					grid-area: 1 / 1 / span 3;
					object-fit: cover;

					overflow: hidden;
					opacity: 100%;
					transition-delay: 1s;
					animation: scale .5s ease-in-out ;
				}

				p.sub-service-title {
					width: fit-content;
				}

				.content {
					display: none;
					transition-delay: 0.4s;
				}
				.content.expanded {
					opacity: 100;
					overflow: hidden;
					transition-delay: 1.5s;
					transition: opacity 2s ease-in;
					display: block;
				}
				.link {
					display: hidden;

					a.short {
						display: none;
					}
					a.expanded {
						display: block;
					}
				}
			}

			/* Hide the cards which are not selected or active*/
			.hidden {
				display: none;
			}
		}
	}
	}

	#talk-to-us {
		padding: 72px 0px;
		align-items: center;
		gap: 10px;
		align-self: stretch;

		.container {
			.content {
				display: flex;
				flex-direction: column;
				align-items: center;
				gap: 32px;

				.title {
					color: #b20710;
					text-align: center;
					font-family: Barlow;
					font-size: 40px;
					font-style: normal;
					font-weight: 600;
					line-height: normal;
				}
				.subtitle {
					width: 959px;

					color: #140f4b;
					text-align: center;
					font-family: Barlow;
					font-size: 25px;
					font-style: normal;
					font-weight: 500;
					line-height: normal;
				}
				.btn {
					display: flex;
					padding: 10px;
					align-items: center;
					gap: 10px;

					border-radius: 6px;
					background: #334155;

					color: #fff;

					text-align: center;
					font-family: Barlow;
					font-size: 16px;
					font-style: normal;
					font-weight: 600;
					line-height: normal;
					letter-spacing: 0.48px;
				}
			}
		}
	}


/* Career page section  */

/* career page section */

.career-page{

	.e1 {
		background-color: rgb(13,33,48);
		color: var(--white-color);
		height: 100%;
		display: block;
		/* box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 10px -21px; */
		box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
		margin-top: 25px;
	}
	
	.e1 .col-md-5 {
		padding: 0px;
	}
	.e2 {
		/* margin: auto 0px; */
		padding: 3rem;
		text-align: left;
	}
	
	.e2 h1 {
		font-size: 40px;
		margin-bottom: 30px;
	}
	.e2 p {
		font-size: 16px;
		margin: 0px;
	}
	
	.career-img {
		width: 100%;
		/* height: 50%; */
		object-fit: contain;
		/* object-fit: fit-content; */
		padding-right: 0px!important;
	}
	
	#career-btn {
		padding: 10px 30px;
		color: var(--white-color);
		text-align: center;
		position: relative;
		z-index: 1;
		text-transform: capitalize;
		outline: none;
		/*border-radius: 5px;*/
		margin-top: 20px;
		display: inline-block;
		border-radius: 6px;
		background-color: #E50914;
		/* color: #E50914; */
		border: 1px solid #E50914;
		border-radius: 0px!important;
		margin-left: 20px;
	}
	
	
	
	.career-text h1 {
		margin: 8rem 40%;
	}
	
	.s0123 {
		display: block;
		max-width: 1200px;
		margin: 7rem auto;
		background-color: var(--white-color);
		/* box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 10px -21px; */
		box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
	
	}
	
	.s0123-padding {
		padding: 1rem 0px;
	}
	.s0123-margin {
		margin-bottom: 3rem!important;
	}
	
	.s0123 h1, p {
		margin-left: 3rem;
		margin-right: 3rem;
	}
	.s0123 p {
		margin-top: 1rem;
		text-align: justify;
		font-size: 16px;
	
	}
	.s0123 h1 {
		font-size: 3.1rem;
		font-weight: 600;
		margin-top: 5rem;
	}
	
	 
	/* This is for the back-color */
	.back-color-container {
	  
		max-width: 80%;
		height: 100%;
		/* background-color:; */
		text-align: center;
		margin: 30px auto;
		/* box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 10px -21px; */
	}
	
	.career-head {
		width: 70vw;
		font-size: 54px;
		line-height: 1.2;
		color:  rgb(13,33,48);
		/* vertical-align: baseline; */
		margin:auto;
		padding: 70px;
	
	}
	/* Starting for the career flex section  */
	.Band__content  { 
		-webkit-align-items: center; 
		-webkit-box-align: center; 
		-ms-flex-align: center; 
		align-items: center; 
		display: -webkit-box; 
		display: -webkit-flex; 
		display: -ms-flexbox; 
		display: flex; 
		-webkit-flex-direction: column; 
		-ms-flex-direction: column; 
		flex-direction: column; 
		padding: 3.5vw min(2vw, 26px); 
		width: 100%;
	} 
	.Band.jsx-2388852221 .BandHeadline {
		color: #37373c;
		margin: 0 0 24px;
		max-width: 900px;
	}
	.TitleTag.jsx-880272370 {
		color: #0b0d0e;
		display: block;
		font-size: 54px;
		font-weight: 400;
		line-height: 1.25;
		margin-bottom: 24px;
		text-align: center;
	}
	
	.BandHeadline  { 
		color: #000; 
		margin: 0 0 24px; 
		max-width: 900px;
	} 
	.BandBody  { 
		color: #000;
		max-width: 780px; 
		text-align: center; 
		width: 100%; 
		font-synthesis: none; 
		font-weight: 400; 
		font-size: 18px; 
		line-height: 1.5; 
		margin-bottom: 36px;
	} 
	.jsx-4044270707 {
		text-align: center;
	}
	
	.css-da33m7 { 
		border: 2px solid rgb(229, 9, 20); 
		color: rgb(229, 9, 20); 
		font-weight: 500; 
		font-size: 0.88rem; 
		padding: 13px 45px 13px 22px; 
		cursor: pointer; 
		width: 100%;
	} 
	
	@media (min-width: 768px){ 
	  .css-da33m7 { 
		width: 10.25rem;
	  } 
	}     
	
	/* Career section flex */
	.Bricks__content{
		margin: 5rem 0px;
	}
	
	.Bricks__content.jsx-3196304952  { 
		-webkit-align-items: flex-start; 
		-webkit-box-align: flex-start; 
		-ms-flex-align: flex-start; 
		align-items: flex-start; 
		display: -webkit-box; 
		display: -webkit-flex; 
		display: -ms-flexbox; 
		display: flex; 
		-webkit-flex-flow: row wrap; 
		-ms-flex-flow: row wrap; 
		flex-flow: row wrap; 
		-webkit-box-pack: space-evenly; 
		-webkit-justify-content: space-evenly; 
		-ms-flex-pack: space-evenly; 
		justify-content: space-evenly; 
		margin: 0 auto;
		margin-top: 10rem; 
		max-width: 1200px; 
		width: 100%;
	} 
	
	
	.Brick.jsx-1447933138 { 
		margin: 25px 0;
	} 
	
	.Brick  { 
		-webkit-flex: 0 1 calc(100% / 3); 
		-ms-flex: 0 1 calc(100% / 3); 
		flex: 0 1 calc(100% / 3); 
		max-width: 355px; 
		min-width: 400px; 
		padding: 0 45px; 
		text-align: center;
	} 
	
	.Brick__media  { 
		max-width: 100%; 
		width: 100%; 
		margin-bottom: 18px;	
	} 
	
	 
	
	.TitleTag.jsx-2901825650 { 
		color: #0b0d0e; 
		display: block; 
	
		font-size: 24px; 
		font-weight: normal; 
		line-height: 1.33; 
		margin-bottom: 18px;
	} 
	
	.Brick .Brick__headline  { 
		margin: 15px 0;
	} 
	
	.Brick .Brick__headline  { 
		color: inherit;
	} 
	
	
	
	.TextCopy.jsx-1411904857 { 
		color: currentColor; 
		display: block;
	} 
	
	.TextCopy.jsx-1411904857 { 
		font-synthesis: none; 
		font-weight: 400; 
		font-size: 16px; 
		line-height: 1.5; 
		margin-bottom: 24px;
	} 
	
	.Brick .Brick__description  { 
		color: inherit; 
		margin: 15px auto 25px; 
		max-width: 425px; 
		text-align: undefined !important;
	} 
	
	.BrickCta__image.jsx-4044270707 { 
		border-radius: 100px; 
		display: -webkit-box; 
		display: -webkit-flex; 
		display: -ms-flexbox; 
		display: flex; 
		height: 150px; 
		-webkit-box-pack: center; 
		-webkit-justify-content: center; 
		-ms-flex-pack: center; 
		justify-content: center; 
		margin: 0 auto; 
		width: 250px;
	} 
	
	.TextCopy.jsx-1411904857 > *  { 
		font-family: Inter, Helvetica, Arial, sans-serif; 
		font-synthesis: none; 
		font-weight: 400; 
		font-size: 16px; 
		line-height: 1.5; 
		margin-bottom: 24px;
	} 
	
	.Brick__description a:not(.AnchorButton)  { 
		color: #58b7fe; 
		padding-bottom: 1px; 
		-webkit-text-decoration: none; 
		text-decoration: none;
	} 
	
	.Bricks.jsx-3196304952 .Brick__description a:hover { 
		color: rgba(88, 183, 254, 0.8000); 
		-webkit-text-decoration: underline; 
		text-decoration: underline;
	} 
	
	img:not(.cover) { 
		max-width: 100%; 
		height: auto;
	} 
	
	.Brick.jsx-1447933138 .Brick__media img  { 
		max-width: 100%;
	} 
	
	.Brick .Brick__media img  { 
		max-height: undefinedpx; 
		max-width: 100% !important; 
		width: auto;
	} 
}


@keyframes expand {
    0% {
        width: 316px;
    }
    100% {
		width: 100%;

    }
}
@keyframes unexpand {
    0% {
		width: 100%;

    }
    100% {
        width: 316px;
	}
}
@keyframes scale {
    0% {
		width: 0;

    }
    100% {
        width: 1;
	}
}

@keyframes reveal {
    0% {
        opacity: 0
    }
    40% {
        opacity: 0
    }
    60% {
        opacity: 30
    }
    100% {
		opacity: 100;

    }
}