.modal.fade .modal-dialog {
  position: absolute;
  left: 0;
  margin: 0;
  transform: translateX(-100%);
  transition: transform 1s ease; /* slow slide in */
  width: 400px; /* adjust width as needed */
  max-width: 90%;
}

.modal.fade.show .modal-dialog {
  transform: translateX(0);
}

/* Prevent Bootstrap centering */
.modal-dialog {
  margin: 0;
  top: 0;
  /* transform: none !important; */
}

.modal-content {
  border-radius: 0;
  padding: 0;
  width: 100%;
}

#minimizeIcon video {
  display: none;
}
.btn-close{
	padding: 8px;
}
 .typewriter-wrapper {
   /* position: relative; */
  padding: 20px 15px;
  height: 360px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
  overflow: hidden;
}

#bg-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  border-radius: 8px;
}

#typewriter-text {
  font-family: "Montserrat";
  font-size: 22px;
  color: #282e67;
  padding-right: 5px;
  width: 100%;
  max-width: 700px;
  font-weight: 700;
  position: relative;
  z-index: 1;
}

.modal-header a{
	text-decoration: none;
}

#final-content p{
	margin-bottom: 0
}

.text-wrapper {
  font-family: 'Montserrat';
  /* font-size: 20px; */
  color: #001952;
  line-height: 1.6;
}

.cta-button {
  display: inline-block;
  padding: 8px 16px;
  background-color: #1e90ff;
  color: #fff;
  border-radius: 8px;
  font-weight: bold;
  margin-top: 10px;
  font-size: 18px;
}

.feature-row {
  margin-top: 15px;
    display: flex;
    /* gap: 10px; */
    justify-content: space-between;
    width: 100%;
}

.feature-box {
  border: 2px dashed #1e90ff;
  padding: 8px 6px;
  border-radius: 6px;
  background-color: #f8faff;
  font-size: 16px;
  width: calc((100% - 30px) / 3);
  margin-right: 10px;
}

#final-content p{
	font-size: 20px;
}

.full-width {
  width: 100%;
}

 
 body {
            height: 2000px;
        }

        #popup {
            position: fixed;
            width: 80%;
            height: 70vh;
            background: #fff;
            border: 2px solid #000;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 1000;
            padding: 20px;
            /* display: none; */
        }

        #minimizeIcon {
            position: fixed;
            bottom: 0%;
            left: 0px;
            /* width: 50px;
            height: 50px;
            background: #007BFF; */
            color: white;
            font-size: 24px;
            /* display: none; */
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            cursor: pointer;
            z-index: 1001;
        }



        @import url("https://fonts.googleapis.com/css2?family=Neucha:wght@300;400&display=swap");

body {
	/* background: #553; */
}

.modal{
	top:20%;
}
.btn-close{
	position: absolute;
    top: 7%;
    right: 5%;
    color: #fff;
    background-color: #fff;
    border-radius: 0;
}
.modal-header img{
	border-radius: 8px;
	padding: 0;
}
.modal-header {
	padding:0;
	border: none;
}
.notifications-stack {
	position: fixed;
	top: 9rem;
    left: 33%;
}

.notification {
	--line-width: 0.1rem;
	--red: #f003;
	--blue: #00f3;
	--yellow: #dd8;
	user-select: none;
	font-family: "Neucha", cursive;
	letter-spacing: 0.1ch;
	position: absolute;
	min-height: 4rem;
	width: 20rem;
	top: 0;
	left: -50rem;
	rotate: -10deg;
	background-image: linear-gradient(
			transparent 0,
			transparent calc(100% - var(--line-width)),
			var(--blue) calc(100% - var(--line-width)),
			var(--blue) 100%
		),
		linear-gradient(
			to right,
			transparent 0,
			transparent 2rem,
			var(--red) 2rem,
			var(--red) calc(2rem + var(--line-width)),
			transparent calc(2rem + var(--line-width)),
			transparent 100%
		);
	background-size: 100% 1rem;
	background-color: var(--yellow);
	color: #334;
	font-size: 1.3em;
	padding: 0.6rem 3rem;
	display: flex;
	align-items: center;
	border-radius: 0.2rem;
	animation: cubic-bezier(0, 1, 1, 1) slideIn 0.4s forwards;
	text-wrap: pretty;
}

.notification::before {
	content: "";
	position: absolute;
	inset: 0;
	opacity: 1;
	box-shadow: 0 0.5rem 1rem 0.2rem #0003;
	transition: opacity 0.3s ease-in-out;
}

.notification:nth-last-child(-n + 7)::before {
	opacity: 1;
}

.notification::after {
	content: "X";
	display: block;
	position: absolute;
	top: 1rem;
	left: -1rem;
	translate: -50% -50%;
	transition: left 0.2s ease-in-out, opacity 0.1s ease-in-out;
	opacity: 0;
}

.notification:nth-last-child(1) {
	cursor: pointer;
}

.notification:nth-last-child(1):hover::after {
	left: 1rem;
	opacity: 1;
	transition: left 0.2s ease-in-out, opacity 0.1s 0.1s ease-in-out;
}

.notification.remove {
	animation: cubic-bezier(0, 1, 1, 1) slideOut 0.4s forwards;
}

.notification:nth-child(7n) {
	transform: rotate(-7deg) translate(9%, 6%);
}

.notification:nth-child(7n + 1) {
	transform: rotate(2deg) translate(-1%, 4%);
}

.notification:nth-child(7n + 2) {
	transform: rotate(5deg) translate(10%, -3%);
}

.notification:nth-child(7n + 3) {
	transform: rotate(-3deg) translate(5%, 7%);
}

.notification:nth-child(7n + 4) {
	transform: rotate(1deg) translate(-2%, 17%);
}

.notification:nth-child(7n + 5) {
	transform: rotate(3deg) translate(5%, 4%);
}

.notification:nth-child(7n + 6) {
	transform: rotate(-4deg) translate(-4%, -14%);
}

/* Base styles for the hamburger icon */
.hamburger {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 30px;
    height: 24px;
    cursor: pointer;
    z-index: 1002;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 5px;
}

.hamburger span {
    display: block;
    height: 3px;
    width: 100%;
    background-color: #000;
    border-radius: 2px;
    transition: 0.3s ease;
}

/* Animation to transform into "X" */
.hamburger.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.hamburger.active span:nth-child(2) {
    opacity: 0;
}

.hamburger.active span:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
}

.logo-wrapper{
	width: 70px;
    display: block;
}

/* Optional popup style */
/* #popup {
    position: fixed;
    width: 100%;
    height: 60vh;
    background: #553;
    border: 1px solid #000;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
    padding: 20px;
    display: none;
} */


@keyframes slideIn {
	to {
		left: 0;
		rotate: 0deg;
	}
}

@keyframes slideOut {
	from {
		left: 0;
		rotate: 0deg;
	}
	to {
		left: -50rem;
		rotate: -10deg;
	}
}

@media (min-width: 2000px) and (max-width: 2400px) {
    .notifications-stack {
        left: 39%;
    }
	.notification{
		min-height: 16rem;
    	width: 28rem;
		font-size: 2em;
	}
	.hamburger{
		width: 53px;
		top: 30px;
	}
	#minimizeIcon video{
		width: 200px !important;
    	height: 110px;
	}
	.typewriter-wrapper {
	    height: 450px;
	}
.modal-content{
	    width: 130%;
	}
	#typewriter-text p{
	    font-size: 24px;
	}
	 #typewriter-text span{
	    font-size: 22px;
	}
	#typewriter-text{
	    font-size: 26px;
	}
}

@media (min-width: 1699px) and (max-width: 2000px) {
    .notifications-stack {
        left: 39%;
    }
    .hamburger {
        width: 45px;
    }
	.notification{
		min-height: 13rem;
   		width: 23rem;
		font-size: 1.6em;
	}

}

@media (min-width: 1024px) and (max-width: 1199px) {
	.logo-wrapper{
		width: 11%;
    	display: block;
	}
	.hamburger {
		width: 38px;
	}
	#minimizeIcon video{
		width: 200px !important;
    	height: 55%;
	}
}

@media (min-width: 820px) and (max-width: 1023px) {
	.logo-wrapper{
		width: 13%;
    	display: block;
	}
	.hamburger {
		width: 38px;
	}
	.notifications-stack {
		top: 19rem;
		left: 31%;
	}
}

@media (min-width: 320px) and (max-width: 767px) {
	#popup{
		height: 60vh;
		top:30%;
	}
	.hamburger {
        width: 40px;
		top: 25px;
    }
	.notifications-stack {
		left: 2%;
	}
	.notification{
		width: 15rem;
		font-size: 1rem;
	}
	.logo-wrapper {
		width: 55px;
	}
	/* #minimizeIcon video{
		width: 120px !important;
	} */
		.typewriter-wrapper {
	    height: 400px;
	}

}