/* 
	
	Styleguide 
	
*/

/*# 01) Fonts #*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;500;600&display=swap');

@font-face {
	font-family: "Stone Sans, Bold";
	src: url("/wp-content/themes/chirag/assets/font/StoneSans_Bold.otf");
}

@font-face {
	font-family: "Stone Sans, SemiBold";
	src: url("/wp-content/themes/chirag/assets/font/StoneSans_Semi_Bold.ttf");
}

@font-face {
	font-family: "Stone Sans, Medium";
	src: url("/wp-content/themes/chirag/assets/font/StoneSans_Medium.otf");
}

@font-face {
	font-family: "Noto Sans, Regular";
	src: url("/wp-content/themes/chirag/assets/font/NotoSans_Regular.ttf");
}

@font-face {
	font-family: "Noto Sans, Medium";
	src: url("/wp-content/themes/chirag/assets/font/NotoSans_Medium.ttf");
}

@font-face {
	font-family: "Noto Sans, Black";
	src: url("/wp-content/themes/chirag/assets/font/NotoSans_Black.ttf");
}

@font-face {
	font-family: "Noto Sans, Bold";
	src: url("/wp-content/themes/chirag/assets/font/NotoSans_Bold.ttf");
}

@font-face {
	font-family: "Noto Sans, Light";
	src: url("/wp-content/themes/chirag/assets/font/NotoSans_Light.ttf");
}


/*# 02) Colors #*/
:root {
	--dark-blue-color: #083248;
	--light-blue-color: #aad3dc;
	--royal-blue-color: #022C7B;
	--red-color: #CF1220;
	--light-red-color: #F01A2A;
	--dark-red-color: #B70002;
	--white-color: #ffffff;
	--main-grey-color: #f2f2f2;
	--light-grey-color: #DDDBDB;
	/* --dark-grey-color: #8A8D8F; */
	--dark-grey-color: #636566;
	--pagination-color: #E6E6E6;
	--footer-color: #111;
	--footer-header-color: #0751A0;
	--light-brown-color: #84754E;
	--light-green-color: #2AA040;
	--section-padding: clamp(5em, 12vh, 10em);
	--container-padding: clamp(2.5em, 6vw, 8em);
	--gap-padding: clamp(1.5em, 4vw, 2.5em);
}

@media screen and (max-width: 1200px) {
	:root {
		--container-padding: 6vw;
	}
	
}

@media screen and (max-width: 720px) {
	:root {
		--section-padding: 12vh;
	}
	
}

@media screen and (max-width: 540px) {
	:root {
		--container-padding: clamp(1.25em, 4vw, 2.5em);
		--section-padding: max(2.5em, 12vh);
	}
	
}


/*# 03) Body #*/
*, *:after, *:before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}


/* Works on Firefox */
* {
	scrollbar-width: thin;
	scrollbar-color: #dddbdb #fff0;
}

/* Works on Chrome, Edge, and Safari */
*::-webkit-scrollbar {
	width: 7px;
}

*::-webkit-scrollbar-track {
	background: #f2f2f2;
	border-radius: 20px;
}

*::-webkit-scrollbar-thumb {
	background: #dddbdb;
	border-radius: 20px;
}


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

/* Specific style for custom dotted list */
.custom-list1 {
  padding-left: 20px; /* Optional: Add indentation */
  list-style: auto;   /* Add dots */
}

body {
	-webkit-font-smoothing: antialiased;
	font-family: "Noto Sans";
	color: var(--dark-blue-color);
	line-height: 1.5rem;
	font-weight: 400;
	font-style: normal;
	/* font-size: 16px;
    font-size: clamp(16px, 1.2vw, 19px); */
	background-color: var(--white-color);
	scroll-behavior: smooth;
	overflow-x: hidden;
}


html, body {
	width: 100%;
	-webkit-font-smoothing: antialiased;
	position: relative;
	overflow-x: clip;
	/*
	overflow-x: hidden;
	background-color: var(--white-color); */
}


/*# 03) Body /a) Selection #*/
::selection {
	background-color: var(--royal-blue-color);
	color: var(--white-color);
	text-shadow: none;
	pointer-events: fill;
}

::-moz-selection {
	background-color: var(--royal-blue-color);
	color: var(--white-color);
	text-shadow: none;
}

canvas, img, video {
	max-width: 100%;
	height: auto;
	box-sizing: border-box;
}

video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: relative;
}

svg {
	max-width: none;
	height: auto;
	box-sizing: border-box;
}

audio, canvas, iframe, 
img, svg, video {
	vertical-align: middle;
}


/*# 04) Typography #*/
.allUpperCase {
    text-transform: uppercase;
}

h1, h2, h3, h4, h5, h6,
p, a, li, ul, ol,
span, strong, em {
	padding: 0;
	margin: 0;
	font-style: normal;
	font-weight: 450;
	letter-spacing: normal;
}

/*
h1:last-child, h2:last-child, h3:last-child, h4:last-child, 
p:last-child, p.big:last-child, p.small:last-child, 
a:last-child, strong:last-child {
	margin-bottom: 0;
} */

h1 {
	font-size: 5rem; 			/* 80px */
	line-height: 2.5rem; 		/* 40px */
	letter-spacing: 0.375rem; 	/* 6px */
}

h2 {
	font-size: 2.5rem;
	/* 40px */
	line-height: 3.125rem;
	/* 50px */
	letter-spacing: 0.063rem;
	/* 1px */
}

h3 {
	font-size: 1.875rem;
	/* 30px */
	line-height: 2.5rem;
	/* 40px */
	letter-spacing: 0.063rem;
	/* 1px */
}

h4 {
	font-size: 1.125rem;
	/* 18px */
	line-height: 1.563rem;
	/* 25px */
	letter-spacing: 0.063rem;
	/* 1px */
}

h5 {
	font-size: 1rem;
	/* 16px */
	line-height: 1.375rem;
	/* 22px */
	letter-spacing: 0.063rem;
	/* 1px */
}

h6 {
	font-size: 1rem;
	/* 16px */
	line-height: 1.375rem;
	/* 22px */
	letter-spacing: 0.063rem;
	/* 1px */
}

h1, h2, h3 {
	color: var(--dark-blue-color);
	font-family: 'Stone Sans, Bold';
	font-weight: 600;
	text-transform: uppercase;
	margin-top: 0;
	margin-bottom: .5rem;
}

h4, h5, h6 {
	color: var(--white-colorr);
	font-family: 'Stone Sans, SemiBold';
	font-weight: 500;
	text-transform: uppercase;
	margin-top: 0;
	margin-bottom: .5rem;
}

p {
	font-family: "Noto Sans";
	font-weight: 400;
	font-size: 1rem;
	line-height: 1.55rem;
	margin-top: 0;
	margin-bottom: 1rem;
	/*
	font-size: 1.15rem;
	letter-spacing: 1.25px; */
}

p.small {
	font-size: .8rem;
	line-height: 1.75;
	letter-spacing: .015em;
}

p.big {
	font-size: 1.1rem;
	font-family: "Noto Sans";
	font-weight: 400;
	margin-bottom: unset !important;
}

strong {
	font-weight: 800;
}

a {
	color: var(--dark-blue-color);
	text-decoration: none;
	padding: 0;
	margin: 0;
}

.site-header__nav-menu a{
    color: #fff;
}

.site-header__nav-social a{
    color: #fff;
}

.site-header__nav-corporate {
    color: #fff;
}


/*# 05) Main Elements #*/
section {
	display: block;
	padding-top: var(--section-padding);
	padding-bottom: var(--section-padding);
	/* padding-bottom: calc(var(--section-padding) * 1.6); */
	position: relative;
}

section.no-padding {
	padding-top: unset;
	padding-bottom: unset;
}

section.full-height {
	min-height: 100vh;
	display: flex;
	align-items: center;
}

section2 {
	display: block;
	/*padding-top: var(--section-padding);*/
	padding-bottom: var(--section-padding);
	/* padding-bottom: calc(var(--section-padding) * 1.6); */
	position: relative;
}

.container.full-width {
	max-width: 100% !important;
	padding: 0 !important;
}

.full-width-column2 {
	padding: 0 !important;
}

.two-column-wrapper-img-2 {
	position: relative;
	float: right;
	display: flex;
	justify-content: flex-end;
}

.flex-end-section {
	display: flex;
	justify-content: flex-end;
	/* align-items: center; */
	float: right;
	position: relative;
	width: 100%;
}

/* .full-width-column1.column-center {
    justify-content: center;
}

.full-width-column1 .container.large {
	margin: 0;
} */

.default-header {
	padding-top: calc(var(--section-padding) * 1.33);
	padding-bottom: calc(var(--section-padding) * .66);
}

.container {
	margin: 0 auto;
	padding-left: var(--container-padding);
	padding-right: var(--container-padding);
}

.container.large {
	padding-left: calc(var(--gap-padding) / 2);
	padding-right: calc(var(--gap-padding) / 2);
}

.container.medium {
	padding-left: calc(var(--container-padding) * 2);
	padding-right: calc(var(--container-padding) * 2);
}

.container.small {
	padding-left: calc(var(--container-padding) * 3);
	padding-right: calc(var(--container-padding) * 3);
}

.container.no-padding {
	padding-left: unset;
	padding-right: unset;
}

/* Clear floats after the columns */
.row::after {
	content: "";
	clear: both;
	display: block;
}

.column-parent {
	display: -webkit-box; 		/* OLD - iOS 6-, Safari 3.1-6 */
	display: -moz-box; 			/* OLD - Firefox 19- (buggy but mostly works) */
	display: -ms-flexbox; 		/* TWEENER - IE 10 */
	display: -webkit-flex; 		/* NEW - Chrome */
	display: flex; 				/* NEW, Spec - Opera 12.1, Firefox 20+ */
	align-items: center;
	justify-content: center;
	flex-direction: row;
}

@media (max-width: 800px) {
	.column-parent {
		flex-direction: column;
	}
}

.column-center {
	display: grid;
	/* justify-content: center; */
	align-content: center;
}


/* General - Create two equal columns that floats next to each other */
[class*="col-"] {
	float: left;
	padding: 10px;
}


/* For desktop: */
.col-1 {
	width: 8.33%;
}

.col-2 {
	width: 16.66%;
}

.col-3 {
	width: 25%;
}

.col-4 {
	width: 33.33%;
}

.col-5 {
	width: 41.66%;
}

.col-6 {
	width: 50%;
}

.col-7 {
	width: 58.33%;
}

.col-8 {
	width: 66.66%;
}

.col-9 {
	width: 75%;
}

.col-10 {
	width: 83.33%;
}

.col-11 {
	width: 91.66%;
}

.col-12 {
	width: 100%;
}

@media only screen and (max-width: 767px) {
	/* For mobile phones: */
	[class*="col-"] {
		width: 100%;
	}
	
	.flex-end-section {
		flex-direction: column !important;
		width: 100% !important;
		margin: 0 20px;
		justify-content: center;
	}
	
	.left {
		width: 100% !important;
		height: 400px;
	}
	
	.right {
		width: 90% !important;
		margin: 0;
		margin-top: -100px;
	}
	
}


/* ipad/tablet */
@media screen and (min-width: 768px) and (max-width: 1024px) {
	[class*="col-"] {
		width: 100%;
	}
	
}

@media (min-width: 768px) {
	.container {
		max-width: 750px;
	}
}

@media (min-width: 992px) {
	.container {
		max-width: 1100px;
	}
}

@media (min-width: 1200px) {
	.container {
		max-width: 1200px;
	}
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
	.container.full-width {
		max-width: 750px !important;
		padding-left: var(--container-padding) !important;
		padding-right: var(--container-padding) !important;
	}
	
	.two-column-wrapper-img-1 {
		display: block !important;
		text-align: center;
		padding-top: 20px !important;
	}
	
	.two-column-wrapper-img-2 {
		display: none;
	}
	
}


/* for mdpi screen only */
@media (min-width: 1280px) and (max-width: 1280px) {
	.full-width-column1 .container.large {
		padding-left: calc(var(--gap-padding) * 1.8);
	}
}

@media screen and (min-width: 1330px) {
	.container {
		max-width: 1300px;
	}
}

@media screen and (min-width: 1500px) {

	.container {
		max-width: 1600px;
	}

	.full-width-col1.column-center {
		padding-left: calc(var(--container-padding) / 1.25);
	}

	.full-width-column1 .container.large {
		padding-left: calc(var(--gap-padding) * 3);
	}

	.two-column-wrapper-img-2 img {
		max-width: 90%;
	}
}

@media screen and (max-width: 540px) {
	.section.full-height {
		min-height: 100vh;
		min-height: calc(var(--vh, 1vh) * 100);
		max-height: 100vh;
	}

	.container.medium, .container.small {
		padding-left: var(--container-padding);
		padding-right: var(--container-padding);
	}
	
}


/*# 06) Buttons #*/
.main-btn {
	position: relative;
	z-index: 2;
}

.default-btn {
	font-family: 'Stone Sans, SemiBold';
	font-size: 1.2rem;
	color: var(--white-color);
	padding: 10px 50px 10px 20px;
	position: relative;
	text-transform: inherit;
	border-radius: 30px;
	outline: 0;
	display: inline-block;
	overflow: visible;
	background-color: #fff;
	box-shadow: -3px 3px 6px #00000029;
	transition: 0.3s ease-in-out all;
}

.default-btn.inner-btn {
	font-size: 1rem;
}

.default-btn::before {
	content: '';
	background-image: url('/SPSetia/media/Revamped-Library/assets/icons/main-btn-red-border.svg');
	width: 25px;
	height: 24px;
	position: absolute;
	display: block;
	background-size: contain;
	right: 18px;
	top: 10px;
	background-repeat: no-repeat;
	background-position: center;
	transition: 0.3s ease-in-out all;
}

.default-btn:hover::before {
	transform: translateX(10px);
}

.btn-label {
	font-weight: bold;
}

.white-btn {
	font-family: 'Stone Sans, SemiBold';
	font-size: 1.1rem;
	padding-right: 45px;
	text-transform: inherit;
}

.white-btn::before {
	width: 35px;
	height: 35px;
	right: 0;
	top: -5px;
}

.red-btn {
	color: var(--light-red-color);
}

.red-btn::before {
	background-image: url('/SPSetia/media/Revamped-Library/assets/icons/main-btn-red-border.svg');
}

.csetia-btn {
	font-family: 'Noto Sans, Medium';
	color: var(--light-red-color);
	font-size: 1.2rem;
	padding-right: 45px;
}

.csetia-btn::before {
	width: 35px;
	height: 35px;
	right: 0;
	top: -5px;
}


/*# 06) Buttons /a) btn inside a card #*/
.custom-main-btn {
	position: absolute;
	bottom: 2vh;
	right: 10px;
}

.cta-card-btn img {
	width: 50px;
	/* transform: rotate(90deg); */
	transition: .3s ease-in-out all;
	display: inline-block;
	/*
	width: 40px;
	filter: drop-shadow(4px 5px 6px #59595961); */
}

.news-hover-top:hover .cta-card-btn img, 
.in-news-box:hover .cta-card-btn img {
	transform: translateX(10px) rotate(90deg);
}


/*# 06) Buttons /b) button reveal more content #*/
.revealButton-wrapper {
	position: relative;
	text-align: center;
}

.moreless-button {
	position: relative;
	width: 50px;
	height: 50px;
	display: inline-block;
	cursor: pointer;
}

.moreless-button::before {
	content: '';
	display: inline-block;
	background-image: url('/SPSetia/media/Revamped-Library/assets/icons/main-btn-white-fill.svg');
	width: 50px;
	height: 50px;
	transition: .3s ease-in-out all;
	background-repeat: no-repeat;
	transform: rotate(180deg);
}


/*# 06) Buttons /c) load more button #*/
.load-more-btn {
	margin: 0 auto;
	text-align: center;
	width: max-content;
	position: relative;
	color: var(--dark-grey-color);
	font-family: 'Stone Sans, SemiBold';
	font-size: 1.2rem;
	font-weight: bold;
}

.load-more-btn h5 {
	color: var(--light-red-color);
	font-family: 'Stone Sans, SemiBold';
	font-size: 1.2rem;
	font-weight: bold;
	cursor: pointer;
	text-underline-offset: 5px;
	letter-spacing: 0;
	text-decoration-line: underline;
	-webkit-text-decoration-line: underline;
	text-decoration-color: var(--light-red-color);
	-webkit-text-decoration-color: var(--light-red-color);
	text-transform: inherit;
}


/*# 06) Buttons /d) big cta button #*/
.cta-big-button-wrapper a {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 2rem;
	justify-content: center;
}

.cta-big-button img {
	width: 60px;
	display: block;
	margin: 0 auto;
	/*transform: rotate(90deg);*/
	transition: .3s ease-in-out all;
}

.cta-text-button p {
	font-family: 'Stone Sans, SemiBold';
	font-size: 1.2rem;
	font-weight: bold;
	color: var(--white-color);
	cursor: pointer;
	width: max-content;
	text-align: center;
	margin: 0 auto;
	letter-spacing: 1.75px;
}


/*# 06) Buttons /e) pointer arrow not rotate on card #*/
.cta-pointer-button img {
	width: 60px;
	display: block;
	margin: 0 auto;
	transition: .3s ease-in-out all;
}

.cta-pointer-button::before {
	content: '';
	display: inline-block;
	background-image: url('/SPSetia/media/Revamped-Library/assets/icons/main-btn-white-fill.svg');
	width: 55px;
	height: 55px;
	transition: .3s ease-in-out all;
}

.moreless-text {
	color: var(--light-red-color);
	font-family: 'Stone Sans, SemiBold';
	font-size: 1rem;
	font-weight: bold;
	cursor: pointer;
	text-underline-offset: 5px;
	letter-spacing: 0;
	text-decoration-line: underline;
	-webkit-text-decoration-line: underline;
	text-decoration-color: var(--light-red-color);
	-webkit-text-decoration-color: var(--light-red-color);
	text-transform: inherit;
}


/*# 06) Buttons /f) responsive buttons #*/
@media (max-width: 767px) {
	.cta-big-button-wrapper a {
		gap: 1rem !important;
	}
	
	.cta-big-button img {
		width: 40px !important;
	}
	
	.cta-card-btn img {
		width: 35px !important;
	}
	
	.default-btn {
		font-size: .9rem !important;
		padding: 5px 40px 5px 15px !important;
	}
	
	.default-btn:hover::before {
		transform: translateX(5px) !important;
	}
	
	.default-btn .btn-label {
		font-size: .9rem !important;
		letter-spacing: 0.44px;
	}
	
	.big.cta-text .default-btn {
		font-size: .9rem !important;
	}
	
	.default-btn::before {
		width: 20px !important;
		height: 20px !important;
		right: 10px !important;
		top: 7px !important;
	}
	
	.default-btn.custom-height-btn::before {
		top: 19px !important;
	}
	
	.custom-main-btn {
		bottom: 0vh !important;
	}
	
	.moreless-button, .moreless-button:before {
		width: 35px !important;
		height: 35px !important;
	}
	
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
	.cta-big-button img {
		width: 50px !important;
	}
	
	.default-btn {
		font-size: .9rem !important;
		padding: 5px 50px 5px 20px !important;
	}
	
	.default-btn::before {
		width: 23px !important;
		height: 23px !important;
		right: 15px !important;
		top: 5px !important;
	}
	
	.our-b-wrapper {
		bottom: 19px !important;
	}
	
	.custom-main-btn {
		position: absolute;
		bottom: 1.2vh !important;
	}
	
	.cta-card-btn img {
		width: 35px !important;
	}
	
	.moreless-button, .moreless-button:before {
		width: 40px !important;
		height: 40px !important;
	}
	
}


/*# 07) New Styles #*/
.projBG {
  background-size: cover;
}

.btn.hidden-accessible {
    width: 0;
    height: 0;
    display: block;
    position: absolute;
    clip: rect(0,0,0,0);
    opacity: 0
}
/*# x18) YouTube Embed Responsive #*/
  .YouTube-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
}