@tailwind base;
@tailwind components;
@tailwind utilities;

.mainBanner {
	background-image: url("https://dassets.dsci.in/event-assets/bpm/2024/assets/images/backgrounds/website\ banner.webp");
	background-color: rgb(193, 193, 193);
	background-position: center;
	background-size: cover;

}
@media screen and (min-width:1300px) {
	.swiper-slide {
		width: 300px;
		margin: 15px;
		text-align: center;
	}

	.swiper-slide h5 {
		margin-top: 5px;
		color: white;
		font-weight: 700;
		padding: 0px 10px;
		font-size: 20px;
	}

	.swiper-slide h6 {
		padding: 0px 10px;
		font-size: 12px;
		font-weight: 500;
		color: rgb(154, 154, 154);
	}

	.swiper-slide p {
		padding: 0px 10px;
		font-size: 18px;
		font-weight: 700;
		color: white;
	}

	.swiper-slide img {
		border-radius: 10px;
		width: 100%;
	}

	.swiper-slide h6 {
		color: #fff;
	}
}

.swiper-slide {
	width: 250px;
	margin: 15px;
	text-align: center;
}

.swiper-slide h5 {
	margin-top: 5px;
	color: white;
	font-weight: 700;
	padding: 0px 10px;
	font-size: 20px;
}

.swiper-slide h6 {
	padding: 0px 10px;
	font-size: 12px;
	font-weight: 500;
	color: rgb(154, 154, 154);
}

.swiper-slide p {
	padding: 0px 10px;
	font-size: 18px;
	font-weight: 700;
	color: white;
}

.swiper-slide img {
	border-radius: 10px;
	width: 100%;
}

.swiper-slide h6 {
	color: #fff;
}

.footerBanner {
	background-image: url("https://dassets.dsci.in/event-assets/bpm/2024/assets/images/backgrounds/Rectangle\ 17464.png");
	background-position: center;
	background-size: cover;
	background-color: #000;
}

.aboutBanner {
	background-image: url("https://dassets.dsci.in/event-assets/bpm/2024/assets/images/backgrounds/abt\ bg.png");

	background-color: white;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;

}


@media screen and (max-width:600px) {
	.swiper-slide {
		width: 100%;
		margin: 0px;
		text-align: center;
	}
}

main {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
}

.card .image-box {
	height: 200px;
}

.card .image-box img {
	height: 100%;
}


/*  */
.timeline {
	position: relative;
	max-width: 1200px;
	margin: 0 auto;
}

/* The actual timeline (the vertical ruler) */
.timeline::after {
	content: '';
	position: absolute;
	width: 6px;
	background-color: #fff;
	top: 0;
	bottom: 0;
	left: 50px;
	margin-left: -3px;
}

.container::after {
	content: '';
	position: absolute;
	width: 25px;
	height: 25px;

	background-color: white;
	border: 4px solid #FF9F55;
	top: 15px;
	border-radius: 50%;
	z-index: 1;
}

/*  */

.hyperloopClass {


	background: url("https://dassets.dsci.in/event-assets/bpm/2024/assets/images/backgrounds/SS5.gif");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;

}


.speakersBanner {
	background-image: url("https://dassets.dsci.in/event-assets/bpm/2024/assets/images/backgrounds/Frame\ 50-3.png");
	background-color: rgb(193, 193, 193);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

.calloutBanner {
	background-image: url("https://dassets.dsci.in/event-assets/bpm/2024/assets/images/backgrounds/website\ call\ out\ \(2\).png");
	background-color: rgb(193, 193, 193);
	background-position: center;
	background-size: cover;
}

.innertwo .wrappertwo .mainArea .homeImagetwo img {
	max-width: 300px;
	height: 8rem;
	padding: 0 15px;
	object-fit: cover;

}

img:last-of-type {
	padding-left: 0;

}

.innertwo {
	position: relative;
	width: 100%;
	overflow: hidden;
	height: 15rem;
}

.innertwo .wrappertwo {
	position: absolute;
	display: flex;
}

.innertwo .wrappertwo .mainArea {
	display: flex;
	animation: swipe 5000ms linear infinite;
}

.innertwo .wrappertwo .mainAreaTwo {
	display: flex;
	animation: swipeTwo 5000ms linear infinite;
}

@keyframes swipe {
	0% {
		transform: translate(0, 0);
	}

	100% {
		transform: translate(-100%, 0);
	}
}

@keyframes swipeTwo {
	0% {
		transform: translate(0, 0);
	}

	100% {
		transform: translate(-100%, 0);
	}
}

/* .homeImagetwo img {
	max-width: 300px;
	height:rem;
	padding: 0 1px;
	object-fit: contain;

}

img:last-of-type {
	padding-left: 0;
}

.innertwo {
	position: relative;
	width: 100%;
	overflow: hidden;
	height: 10rem;
	border: 1px solid black;
}

.wrappertwo {
	position: absolute;
	display: flex;
}

.mainArea {
	display: flex;
	animation: swipe var(--speed) linear infinite backwards;
}

.mainAreaTwo {
	display: flex;
	animation: swipeTwo var(--speed) linear infinite backwards;
} */

* {
	box-sizing: border-box;
}

body {
	margin: 0;
}

.marquee {
	overflow: hidden;
}

.marquee-content {

	display: flex;
	animation: scrolling 38s linear infinite;
}

.marquee-content .marquee-item img,
.marquee-content2 .marquee-item img {
	width: 300px;

}

@import url("https://dassets.dsci.in/event-assets/bpm/2024/assets/fonts/poppins-faces.css");
@import url("https://dassets.dsci.in/event-assets/bpm/2024/assets/fonts/lato-faces.css");
@import url("https://dassets.dsci.in/event-assets/bpm/2024/assets/fonts/roboto-mono-faces.css");



#carousel-wrapper {
	/* border: 1px solid #ccc; */

	height: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

#carousel-wrapper #menu {
	height: 380px;

	overflow: hidden;
	font-weight: 900;
	/* line-height: 1; */
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	/* vertical-align: ; */
	transition: all 0.6s ease-in-out;
	/* border: 1px solid #ccc; */
}

#carousel-wrapper #menu #current-option {
	position: relative;
	width: 100%;
	height: 100%;
	transform: translate(-25%, 0%);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	overflow: hidden;

}

#carousel-wrapper #menu #current-option #current-option-text1 {
	font-size: 2rem;
	color: #ffffff;
	/* line-height: 3rem; */
	width: 500px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
}

#carousel-wrapper #menu #current-option #current-option-text1::before {
	content: attr(data-next-text);
	position: absolute;
	transform: translate(0%, 380px);
	width: 500px;
	height: 200px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
}

#carousel-wrapper #menu #current-option #current-option-text1::after {
	content: attr(data-previous-text);
	position: absolute;
	transform: translate(0%, -380px);
	width: 500px;
	height: 200px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
}

#carousel-wrapper #menu #current-option #current-option-text2 {
	font-size: 1rem;
	width: 400px;
	margin-top: 20px;
	margin-right: 100px;
	height: 40px;
	color: #ffffff;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
}

#carousel-wrapper #menu #current-option #current-option-text2::before {
	content: attr(data-next-text);
	position: absolute;
	transform: translate(0%, 380px);
	width: 400px;
	height: 40px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
}

#carousel-wrapper #menu #current-option #current-option-text2::after {
	content: attr(data-previous-text);
	position: absolute;
	transform: translate(0%, -380px);
	width: 400px;
	height: 40px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
}

#carousel-wrapper #menu #previous-option {
	width: 2.5rem;
	height: 2.5rem;
	border: none;
	display: block;
	cursor: pointer;
	background: url("https://dassets.dsci.in/event-assets/bpm/2024/assets/images/icons/downArrow.png");
	background-size: cover;
	position: absolute;
	transform: translate(310px, 50px);
}

#carousel-wrapper #menu #next-option {
	width: 2.5rem;
	height: 2.5rem;
	border: none;
	display: block;
	cursor: pointer;
	background: url("https://dassets.dsci.in/event-assets/bpm/2024/assets/images/icons/downArrow.png");
	background-size: cover;
	position: absolute;
	transform: translate(310px, -50px) rotate(180deg);
}

#carousel-wrapper #image {
	height: 450px;
	width: 450px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	border-radius: 10px;
	z-index: 101;
	position: absolute;
	margin-left: 500px;
}

#carousel-wrapper.anim-next {
	pointer-events: none;
}

#carousel-wrapper.anim-next #current-option-text1 {
	animation: next-text 0.65s 0.085s;
}

#carousel-wrapper.anim-next #current-option-text2 {
	animation: next-text 0.65s 0.085s;
}

#carousel-wrapper.anim-next #previous-option {
	animation: next-top-arrow 0.65s 0.085s;
}

#carousel-wrapper.anim-next #next-option {
	animation: next-bottom-arrow 0.65s 0.085s;
}

#carousel-wrapper.anim-next #image {
	animation: next-image 0.65s 0.085s;
}

#carousel-wrapper.anim-previous {
	pointer-events: none;
}

#carousel-wrapper.anim-previous #current-option-text1 {
	animation: previous-text 0.65s 0.085s;
}

#carousel-wrapper.anim-previous #current-option-text2 {
	animation: previous-text 0.65s 0.085s;
}

#carousel-wrapper.anim-previous #previous-option {
	animation: previous-top-arrow 0.65s 0.085s;
}

#carousel-wrapper.anim-previous #next-option {
	animation: previous-bottom-arrow 0.65s 0.085s;
}

#carousel-wrapper.anim-previous #image {
	animation: previous-image 0.65s 0.085s;
}

@keyframes previous-text {

	50%,
	55% {
		transform: translate(0%, 390px);
	}

	to {
		transform: translate(0%, 380px);
	}
}

@keyframes previous-top-arrow {
	50% {
		transform: translate(310px, 53px);
	}
}

@keyframes previous-bottom-arrow {
	50% {
		transform: translate(310px, -47px) rotate(180deg);
	}
}

@keyframes previous-image {
	0% {
		transform: scale(1);
		opacity: 1;
	}

	70% {
		transform: scale(1.1);
		opacity: 0;
	}

	100% {
		transform: scale(1);
		opacity: 1;
	}
}

@keyframes next-text {

	50%,
	55% {
		transform: translate(0%, -390px);
	}

	to {
		transform: translate(0%, -380px);
	}
}

@keyframes next-top-arrow {
	50% {
		transform: translate(310px, 47px);
	}
}

@keyframes next-bottom-arrow {
	50% {
		transform: translate(310px, -53px) rotate(180deg);
	}
}

@keyframes next-image {
	0% {
		transform: scale(1);
		opacity: 1;
	}

	70% {
		transform: scale(1.1);
		opacity: 0;
	}

	100% {
		transform: scale(1);
		opacity: 1;
	}
}

/* @media only screen and (max-width: 1024px) {
	.after\:h-\[40px\]::after {
		content: var(--tw-content);
		height: 40px;
	}

	.after\:w-\[40px\]::after {
		content: var(--tw-content);
		width: 40px;
	}
} */

/* ... existing styles ... */


/* Res */

/* Global Styles */




/* Media query for screen size 450px */
@media only screen and (max-width: 450px) {

	.pcShedule {
		display: none;
	}

	.tablink {
		display: flex;
		justify-content: center;
		align-items: center;
		border: none;
		width: 25%;
		height: 250px;
		font-weight: bold;
		border: 1px solid #fff;
		padding: 5px 5px;
	}

	.tabcontent {
		color: white;
		display: none;
		padding: 0px 0px;
	}

	.marquee {
		width: 100%;
		height: auto;
		padding: 0 5px
	}

	.marquee-item {
		flex: 0 0 16vw;
		margin: 0 1vw;
		/*   flex: 0 0 20vw; */
		/*   margin: 0 2vw; */
	}

	.marquee-content .marquee-item img,
	.marquee-content2 .marquee-item img {
		display: flex;
		justify-content: start;
		align-items: start;
		width: 100%;
		height: 100%;
		object-fit: contain;
	}

	.marquee-content {
		height: 12rem;
		display: flex;
		animation: scrolling 38s linear infinite;
	}

	@keyframes scrolling {
		0% {
			transform: translateX(-100%);
		}

		100% {
			transform: translateX(0);
		}
	}

	@keyframes scrolling2 {
		0% {
			transform: translateX(0);
		}

		100% {
			transform: translate(-100%);
		}
	}

	.innertwo {
		position: relative;
		width: 100%;
		overflow: hidden;
		height: 5rem;
	}

	.innertwo .wrappertwo {
		position: absolute;
		display: flex;
	}

	.innertwo .wrappertwo .mainArea {
		display: flex;
		animation: swipe 5000ms linear infinite backwards;
	}

	.innertwo .wrappertwo .mainAreaTwo {
		display: flex;
		animation: swipeTwo 5000ms linear infinite backwards;
	}

	@keyframes swipe {
		0% {
			transform: translate(0);
		}

		100% {
			transform: translate(-100%);
		}
	}

	@keyframes swipeTwo {
		0% {
			transform: translate(-100%);
		}

		100% {
			transform: translate(0);
		}
	}

}



@import url("https://dassets.dsci.in/event-assets/bpm/2024/assets/fonts/montserrat-faces.css");

.speakerContainer {
	background-image: url("https://dassets.dsci.in/event-assets/bpm/2024/assets/images/backgrounds/Frame\ 50-3.png");
	background-color: rgb(193, 193, 193);
	background-position: center;
	background-size: cover;

}

.speakerContainer .page-indicator {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 3rem;

}

.speakerContainer .arrowButton {
	color: #999999;
	font-size: 1.5rem;
	cursor: pointer;
}

.speakerContainer .dots {
	display: flex;
	align-items: center;
	margin: 0 20px;
}

.speakerContainer .dot {
	width: .71rem;
	height: .71rem;
	border-radius: 50%;
	margin: 0 5px;
	background-color: #999999;
	cursor: pointer;
}

.speakerContainer .dot.active {
	background-color: #ffffff;
	width: 1rem;
	height: 1rem;

}

.speakerContainer .dot:hover {
	background-color: #ffffff;
}

.swiper-slide.swiper-slide-active,
.swiper-slide.swiper-slide-duplicate-active {
	transform: scale(1) !important;
}

@layer base {
	.font-outline-2 {
		-webkit-text-stroke: 2px rgb(255, 255, 255);
	}

	.font-outline-4 {
		-webkit-text-stroke: 4px black;
	}
}

@font-face {
	font-family: "NeueBold";
	src: local("NeueBold"),
		url("https://dassets.dsci.in/event-assets/bpm/2024/assets/fonts/LexendDeca-Bold.ttf") format("truetype");
	font-weight: bold;
}

@font-face {
	font-family: "NeueMedium";
	src: local("NeueMedium"),
		url("https://dassets.dsci.in/event-assets/bpm/2024/assets/fonts/LexendDeca-Medium.ttf") format("truetype");
	font-weight: bold;
}

@font-face {
	font-family: "NeueRegular";
	src: local("NeueRegular"),
		url("https://dassets.dsci.in/event-assets/bpm/2024/assets/fonts/LexendDeca-Regular.ttf") format("truetype");
	font-weight: bold;
}

@font-face {
	font-family: "NeueBlack";
	src: local("NeueBlack"),
		url("https://dassets.dsci.in/event-assets/bpm/2024/assets/fonts/LexendDeca-Black.ttf") format("truetype");
	font-weight: bold;
}

@font-face {
	font-family: "NeueLight";
	src: local("NeueLight"),
		url("https://dassets.dsci.in/event-assets/bpm/2024/assets/fonts/LexendDeca-Light.ttf") format("truetype");
	font-weight: bold;
}

@font-face {
	font-family: "NeueThin";
	src: local("NeueThin"),
		url("https://dassets.dsci.in/event-assets/bpm/2024/assets/fonts/LexendDeca-Thin.ttf") format("truetype");
	font-weight: bold;
}


.marquee .marquee-content2 {
	height: 10rem;
	display: flex;
	animation: scrolling2 45s linear infinite reverse;
}

.marquee-item {
	flex: 0 0 16vw;
	margin: 0 1vw;
	/*   flex: 0 0 20vw; */
	/*   margin: 0 2vw; */
}

.marquee-item img {
	display: block;
	width: 50%;
	height: 8rem;
	/*   padding: 0 20px; */
}

@keyframes scrolling {
	0% {
		transform: translateX(-100%);
	}

	100% {
		transform: translateX(0);
	}
}

@keyframes scrolling2 {
	0% {
		transform: translateX(0);
	}

	100% {
		transform: translate(-100%);
	}
}

.highlighted-text:before {
	content: attr(data-text);
	display: inline-block;
	opacity: 0.8;
	color: white;
}

.highlighted-text {
	color: white;
	width: 100%;
	height: 100%;
	background: "linear-gradient(to right, #ee0979 0%, #ff6a00 100%)";


	left: 0;
	z-index: 0;
	transition: clip-path 0.1s ease;

}

.icon {
	display: inline-block;
	width: 70px;
	height: 90px;
	background-size: contain;
	margin-top: 20px;
	background-repeat: no-repeat;
}

.iconOne {
	background-image: url(https://dassets.dsci.in/event-assets/bpm/2024/assets/images/broad-icons/1.svg);
}


.iconOne:hover {
	background-image: url(https://dassets.dsci.in/event-assets/bpm/2024/assets/images/broad-icons/1hover.svg);
}

.iconTwo {
	background-image: url(https://dassets.dsci.in/event-assets/bpm/2024/assets/images/broad-icons/2.svg);
}

.iconTwo:hover {
	background-image: url(https://dassets.dsci.in/event-assets/bpm/2024/assets/images/broad-icons/2hover.svg);
}

.iconThree {
	background-image: url(https://dassets.dsci.in/event-assets/bpm/2024/assets/images/broad-icons/Digital\ Fraud.svg);
}

.iconThree:hover {
	background-image: url(https://dassets.dsci.in/event-assets/bpm/2024/assets/images/broad-icons/Digital\ Fraudhover.svg);
}

.iconFour {
	background-image: url(https://dassets.dsci.in/event-assets/bpm/2024/assets/images/broad-icons/4.svg);
}

.iconFour:hover {
	background-image: url(https://dassets.dsci.in/event-assets/bpm/2024/assets/images/broad-icons/3hover.svg);
}

.iconFive {
	background-image: url(https://dassets.dsci.in/event-assets/bpm/2024/assets/images/broad-icons/5.svg);
}

.iconFive:hover {
	background-image: url(https://dassets.dsci.in/event-assets/bpm/2024/assets/images/broad-icons/5hover.svg);
}

.iconSix {
	background-image: url(https://dassets.dsci.in/event-assets/bpm/2024/assets/images/broad-icons/7.svg);
}

.iconSix:hover {
	background-image: url(https://dassets.dsci.in/event-assets/bpm/2024/assets/images/broad-icons/7hover.svg);
}

.iconSeven {
	background-image: url(https://dassets.dsci.in/event-assets/bpm/2024/assets/images/broad-icons/8.svg);
}

.iconSeven:hover {
	background-image: url(https://dassets.dsci.in/event-assets/bpm/2024/assets/images/broad-icons/8hover.svg);
}

.iconEight {
	background-image: url(https://dassets.dsci.in/event-assets/bpm/2024/assets/images/broad-icons/9.svg);
}

.iconEight:hover {
	background-image: url(https://dassets.dsci.in/event-assets/bpm/2024/assets/images/broad-icons/9hover.svg);
}

.iconNine {
	background-image: url(https://dassets.dsci.in/event-assets/bpm/2024/assets/images/broad-icons/Product\ Security.svg);
}

.iconNine:hover {
	background-image: url(https://dassets.dsci.in/event-assets/bpm/2024/assets/images/broad-icons/Product\ Securityhover.svg);
}

.iconTen {
	background-image: url(https://dassets.dsci.in/event-assets/bpm/2024/assets/images/broad-icons/Resiliency\ Of.svg);
}

.iconTen:hover {
	background-image: url(https://dassets.dsci.in/event-assets/bpm/2024/assets/images/broad-icons/Resiliency\ Ofhover.svg);
}

@media screen and (max-width:450px) {
	.aboutBanner {
		background-image: url("https://dassets.dsci.in/event-assets/bpm/2024/assets/images/backgrounds/Untitled\ design\ \(83\).png");
		opacity: 1;

		background-position: top;
		background-size: cover;
		background-repeat: no-repeat;

	}




	.hyperloopClass {
		background-image: url("https://dassets.dsci.in/event-assets/bpm/2024/assets/images/backgrounds/SS5\ Mobile.gif");
		margin-top: 10px;
		background-color: white;
		background-position: center;
		background-size: fill;
		background-repeat: no-repeat;
	}

	.calloutBanner {
		background-image: url("https://dassets.dsci.in/event-assets/bpm/2024/assets/images/backgrounds/mobile\ call\ out\ \(1\).png");
		background-color: rgb(193, 193, 193);
		background-position: center;
		background-size: cover;
	}

	.mainBanner {
		background-image: url("https://dassets.dsci.in/event-assets/bpm/2024/assets/images/backgrounds/mobile\ banner.webp");
		background-color: rgb(193, 193, 193);
		background-position: center;
		background-size: cover;

	}

	.homeImagetwo>img {
		max-width: 250px;
		height: 5rem;
		padding: 0 15px;
		object-fit: cover;

	}

	img:last-of-type {
		padding-left: 0;

	}

	.innertwo {
		position: relative;
		width: 100%;
		overflow: hidden;
		height: 5rem;
	}

	.wrappertwo {
		position: absolute;
		display: flex;
	}
}

@keyframes swipe {
	0% {
		transform: translate(0);
	}

	100% {
		transform: translate(-100%);
	}
}

@keyframes swipeTwo {
	0% {
		transform: translate(-100%);
	}

	100% {
		transform: translate(0);
	}
}
