@charset "utf-8";

@import "font-awesome.min.css";


.clearlist, .clearlist li {
    list-style: none;
    padding: 0;
    margin: 0;
    background: none;
}

.full-wrapper {
    margin: 0 2%;
}

html{
	overflow-y: scroll;
    -ms-overflow-style: scrollbar;
	scroll-behavior: smooth;

}
html, body{
	height: 100%;
	-webkit-font-smoothing: antialiased;
}
.page{
	/* overflow: hidden; */
	background-color: #f6f7f9;
}

.body-masked{
	display: none;
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	background: #fff url(../images/loader.gif) no-repeat center center;
	z-index: 100000;	
}

.mask-delay{
	-webkit-animation-delay: 0.75s;
	-moz-animation-delay: 0.75s;
	animation-delay: 0.75s;
}
.mask-speed{
	-webkit-animation-duration: 0.25s !important;
	-moz-animation-duration: 0.25s !important;
	animation-duration: 0.25s !important;
} 
iframe{
    border: none;
}
a, b, div, ul, li{
	-webkit-tap-highlight-color: rgba(0,0,0,0); 
	-webkit-tap-highlight-color: transparent; 
	-moz-outline-: none;
}
a:focus,
a:active{
	-moz-outline: none;
	outline: none;
}
img:not([draggable]), embed, object, video {
    max-width: 100%;
    height: auto;
}


/* ==============================
   Page loader
   ============================== */


.page-loader{
 	display:block;
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	background: #dadada;
	z-index: 100000;	
}


/* Scroll down icon */

@-webkit-keyframes scroll-down-anim {
	0%{ top: -7px; }
	50%{ top: 3px; }
	100%{ top: -7px; }
}
@-moz-keyframes scroll-down-anim {
	0%{ top: -7px; }
	50%{ top: 3px; }
	100%{ top: -7px; }
}
@-o-keyframes scroll-down-anim {
	0%{ top: -7px; }
	50%{ top: 3px; }
	100%{ top: -7px; }
}
@keyframes scroll-down-anim {
	0%{ top: -7px; }
	50%{ top: 3px; }
	100%{ top: -7px; }
}

.scroll-down{
	width: 150px;
	height: 43px;
	margin-left: -75px;
	line-height: 43px;
	white-space: nowrap;
	position: absolute;
	bottom: 30px;
	left: 50%;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 3px;
	text-decoration: none;
	text-align: center;
	text-transform: uppercase;
	color: rgba(255,255,255, .5) !important;
	
	-webkit-transition: all 500ms cubic-bezier(0.250, 0.460, 0.450, 0.940); 
    -moz-transition: all 500ms cubic-bezier(0.250, 0.460, 0.450, 0.940); 
    -o-transition: all 500ms cubic-bezier(0.250, 0.460, 0.450, 0.940); 
    transition: all 500ms cubic-bezier(0.250, 0.460, 0.450, 0.940); 

}


.scroll-down:hover,
.scroll-down:focus{
	text-decoration: none;
	letter-spacing: 6px;
	color: rgba(255,255,255, 0) !important;
}
.scroll-down.static,
.scroll-down.static{
	color: rgba(255,255,255, .4) !important;
}
.scroll-down.static:hover,
.scroll-down.static:focus{
	letter-spacing: 3px;
	color: rgba(255,255,255, .85) !important;
}
.scroll-down-icon{
	width: 26px;
	height: 100%;
	margin-left: -13px;
	position: absolute;
	top: 0;
	left: 50%;
	border: 2px solid rgba(255,255,255, .35);
	
	-moz-border-radius: 13px;
	-webkit-border-radius: 13px;
	border-radius: 13px;
	
	-webkit-transition: all 500ms cubic-bezier(0.250, 0.460, 0.450, 0.940); 
    -moz-transition: all 500ms cubic-bezier(0.250, 0.460, 0.450, 0.940); 
    -o-transition: all 500ms cubic-bezier(0.250, 0.460, 0.450, 0.940); 
    transition: all 500ms cubic-bezier(0.250, 0.460, 0.450, 0.940);
	
	-webkit-animation: scroll-down-anim 1s infinite;
    -moz-animation: scroll-down-anim 1s infinite;
    -o-animation: scroll-down-anim 1s infinite;
    animation: scroll-down-anim 1s infinite; 
}

.scroll-down-icon:after{
	content: " ";
	width: 2px;
	height: 12px;
	position: absolute;
	top: 0;
	left: 50%;
	margin-left: -1px;
	background: rgba(255,255,255, .35);
	
	-webkit-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);  
    -moz-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000); 
    -o-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -ms-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000); 
    transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}
.scroll-down:hover .scroll-down-icon{
	background: rgba(255,255,255, .7);
}

.scroll-down:hover .scroll-down-icon:after{
	background: rgba(0,0,0, .5);
}
.scroll-down.light:hover .scroll-down-icon:after,
.bg-color .scroll-down:hover .scroll-down-icon:after,
.bg-color-alfa .scroll-down:hover .scroll-down-icon:after,
.bg-color-alfa-30 .scroll-down:hover .scroll-down-icon:after,
.bg-color-alfa-50 .scroll-down:hover .scroll-down-icon:after,
.bg-color-alfa-70 .scroll-down:hover .scroll-down-icon:after,
.bg-color-alfa-90 .scroll-down:hover .scroll-down-icon:after{
	background: rgba(255,255,255, .15);
}

.ts-block {
    padding-bottom: 5rem;
    padding-top: 5rem;
    position: relative;
}

.ts-align__vertical {
    /* display: flex; */
    align-items: center;
}

.ts-title {
}

.ts-title h2 {
	font-weight: 700;
    font-size: 3.2rem;
    /* line-height: 1.1rem; */
}

.cardcolor{
	background-color: #f6f7f9;
	padding: 5%;
}
footer{
	/* overflow: hidden; */
    /* position: fixed; */
    bottom: 0;
    width: 100%;
	background-color: #f6f7f9;
	padding:0; margin:0;
    box-sizing: border-box;
    color:black;
	padding: 25px 150px;
	/* flex-wrap: wrap; */
}

.headinglogo{
	color: #f6f7f9;
	font-weight: bolder;
	margin-bottom: 5px;

}
.headinglogofooter{
	color: black;
	font-weight: bolder
}
.centersection{
	display: flex;
	flex-direction: column;

}
.footer-container{
    display: flex;
	flex-direction: row;
    padding: 3rem;
	justify-content: space-evenly;
}

.backgroundimgdiv{
	display: none;
}
.backgroundimg2{
	width: 100%;
}

@media (max-width: 900px) {
	.footer-container {
	  flex-direction: column;
	}
  }
.footer-container .leftsection{
    flex-basis: 50%;
    padding: 0 20px;
}
.ts-page-wrapper {
    /* overflow: hidden; */
}

.aboutussection{
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: white;
	font-family: 'Source Sans Pro', sans-serif;}

.aboutussection h2{
	font-size: 3.0rem;
	margin-bottom: 3%;
	font-family: 'Source Sans Pro', sans-serif;}

.cardtoptext{
	padding-bottom: 4%;
	padding-top: 4%;
	font-weight: 400;
	font-size: 3rem;
	font-family: 'Source Sans Pro', sans-serif;
}

.cardbottomtext{
	padding-top: 4%;
	font-weight: 400;
	font-size: 2.5rem;
	font-family: 'Source Sans Pro', sans-serif;
}

.aboutussection p{
	font-size: 1.5rem;
	font-family: 'Source Sans Pro', sans-serif;}

.inner-nav .icon {
	display: none;
  }

.homesection{
	width: 100%;
    height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
	/* background-image: url("../icons/Homepage.png");
	background-size: 100% 100%; */
	font-family: 'Source Sans Pro', sans-serif;
}

.backgroundimg{
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
    height: 100%;
    
}

.centered-container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;  
}


.homemaindiv{
	display: flex;
}

.gamesectionend{
	background-color: #f6f7f9;
	margin-top: 2%;
	
}

.gamesectionend h2{
	padding-bottom: 5%;
}

.gamesectionend p{
	font-family: 'Source Sans Pro', sans-serif;    
	font-size: 1.5rem;
    /* line-height: 2.2rem; */
    font-weight: 400;
}
.section h2{
	margin-bottom: 10px;
    color: #10131b;
	font-family: 'Source Sans Pro', sans-serif;
	font-weight: 700;
    font-size: 1.8rem;
}
.gamesection{
	background-color: white;
	width: 100%;
    display: flex;
	flex-direction: row;
	justify-content: space-between;
    align-items: center;
    /* grid-gap: 136px;
    gap: 136px; */
	font-family: 'Source Sans Pro', sans-serif;
}
.gamesection2 a{
	background-color: white;
	color: #000;
	border-radius: 10px;
	padding: 1%;
	margin-top: 2%;
	margin-left: 1%;
	font-size:20px;
}
.gamesection a{
	background-color: #f6f7f9;
	color: #000;
	border-radius: 10px;
	padding: 1%;
	margin-top: 2%;
	margin-left: 1%;
	font-size:20px;
}
.gamecontent{
	width: 60%;
	padding-left: 12%;

}
.gamecontent h3{
	font-family: 'Source Sans Pro', sans-serif;
	    font-weight: 700;
    font-size: 3.2rem;
    /* line-height: 1.6rem; */
}

.gamesection .gamevideo{
	margin-right: 10%;
	margin-left: 12%;
}

.gamesection2 .gamevideo{
	margin-left: 12%;
}

.gamecontent p{
	font-family: 'Source Sans Pro', sans-serif;
	    font-size: 1.8rem;
    /* line-height: 2.8rem; */
    font-weight: 400;
	padding-top: 5%;
}
.gamesection2{
	background-color: #f6f7f9;
	width: 100%;
    display: flex;
	flex-direction: row;
	justify-content: space-between;
    align-items: center;
    /* grid-gap: 136px;
    gap: 136px; */
	font-family: 'Source Sans Pro', sans-serif;
}
.gamecontent2 {
    width: 60%;
    padding-left: 13%;
    /* padding-top: 5%; */
    padding-right: 10%;}

.gamecontent2 h3{
	font-family: 'Source Sans Pro', sans-serif;
	    font-weight: 700;
    font-size: 3.2rem;
    /* line-height: 1.6rem; */
}

.gamecontent2 p{
	font-family: 'Source Sans Pro', sans-serif;
	    font-size: 1.8rem;
    /* line-height: 2.8rem; */
    font-weight: 400;
	padding-top: 5%;

}
.gamevideo{
	width: 40%;
	display: flex;
	align-items: center;
	justify-content: space-around;
}
.MultiCarousel { float: left; overflow: hidden; padding: 15px; width: 100%; position:relative; }
.MultiCarousel .MultiCarousel-inner { transition: 1s ease all; float: left;  }
.MultiCarousel .MultiCarousel-inner .item { float: left; width: 20px;}
.MultiCarousel .MultiCarousel-inner .item > div { text-align: center; padding:10px; margin:10px; background:#f1f1f1; color:#666;height: 220px;}
.MultiCarousel .leftLst, .MultiCarousel .rightLst { position:absolute; border-radius:50%;top:calc(50% - 20px); }
.MultiCarousel .leftLst { left:0; }
.MultiCarousel .rightLst { right:0; }
    
.MultiCarousel .leftLst.over, .MultiCarousel .rightLst.over { pointer-events: none; background:#ccc; }

.gamename{
	font-weight: bolder !important;
	color: #000;
	margin-top: 10%;

}
.section p{
	margin-bottom: 16px;
}
.section .content{
	color: #353c4c;
    margin:20px 0 0 0; 
    position: relative;
	font-family: 'Source Sans Pro', sans-serif;
	   font-size: 1.4rem;
    line-height: 1.2rem;
    font-weight: 400;
}

.section .content::before{
    position: absolute;
    content: '';
    top: -10px;
    height: 2px;
    width: 100%;
}

.bottomtext{
	margin-top: 10%;
}
.toptext{
	margin-bottom: 10%;
}

.headingmain{
	display: flex;
    flex-direction: column;
    grid-gap: 32px;
    gap: 0px;
    position: absolute;
	top: 30%;
	left: 20%;
}

.headingmain h1{
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 7.2rem;
    font-weight: 500;
}

.headingmainn h1{
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 7.2rem;
    font-weight: 500;
}
.headingmain h2{
	padding-top: 2%;
}

.left .content .social{
	padding-top: 6%;
	padding-bottom: 15%;
	margin: 20px 0 0 0;
}


.left .content .social a{
    padding: 0 2px;
}


.left .content .social a span{
    height: 35px;
    width: 35px;
    background: white;
    line-height: 35px;
    text-align: center;
    font-size: 18px;
    border-radius: 10px;
    transition: 0.4s;
	color: #000;
}


.left .content .social a span:hover{
    background:  #4CAF50;
}

.center .content .fas{
    font-size: 1.1rem;
    background: transparent;
    height: 45px;
    width: 45px;
    line-height: 45px;
    text-align: center;
    border-radius: 50px;
    transition: 0.3s;
    cursor: pointer;
    border:1px solid #656565;
}

.center .content .fas:hover{
    background: #dd5f24;
    border:1px solid #dd5f24;
}

.center .content p:hover{
    cursor: pointer;
	color: rgb(0, 0, 0);
}

.center .content .phone{
    margin: 15px 0;
}


@media screen and (max-width:800px){
	.MultiCarousel .MultiCarousel-inner .item > div{height: auto;}
	.MultiCarousel .MultiCarousel-inner .item > div img{width: 70%;}
    footer{
        position: relative;
        bottom: 0px;
		padding: 0px 0px;
    }

	.gamecontent{
		width: 80%;
		padding-left: 0%;
		padding-top: 2%;
		padding-right: 0%;
	}

	.gamecontent2{
		width: 80%;
		padding-left: 0%;
		padding-top: 2%;
		padding-right: 0%;
	}

	.gamevideo{
		width: 80%;

	}

    .left .content{
        padding-right:0px;
        padding-bottom: 30px;
    }

    .container{
        /* flex-wrap: wrap; */
        flex-direction: column;
        padding:0.5rem;
    }

    .container .section{
        margin:5px 0;
    }
	a {
		text-decoration: underline; 
		color: black; 
		cursor: pointer;  
	}
	
	a:hover {
		text-decoration: none; 
	}
	.gamesection{
		flex-direction: column;
		grid-gap: 10px;
		gap: 10px;
	}
	.gamesection2{
		flex-direction: column;
		grid-gap: 10px;
		gap: 10px;
	}
	.gamevideo{
		order: 1;
	}
	.gamecontent{
		order: 2;
	}
	.gamecontent2{
		order: 2;
	}

}

@media screen and (max-width:1084px) and (min-width:800px){

	.ts-block {
		padding-top: 0rem;
	}
}

@media screen and (max-width:1050px){

	.MultiCarousel .MultiCarousel-inner .item > div{height: auto;}
	.MultiCarousel .MultiCarousel-inner .item > div img{width: 70%;}
	.homesection{
		height: auto;
	}
	.backgroundimgdiv{
		display: flex;
		flex-direction: column;
	}
	.homemaindiv{
		display: none;
	}

	.headingmain2 h1{
		font-family: 'Source Sans Pro', sans-serif;
		font-size: 7.2rem;
		font-weight: 500;
		padding-top: 2%;
		text-align: center;
	}
	
	.headingmain2 h2{
		padding-top: 2%;
		text-align: center;
	}
	
}
.carousel-dots {
    text-align: center;
    margin-top: 10px;
}

.dot {
    height: 15px;
    width: 15px;
    margin: 0 5px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    cursor: pointer;
}

.active {
    background-color: #717171;
}
.game-item {
    cursor: pointer;
}
 @keyframes glow {
        0% {
            box-shadow: 0 0 10px 0px rgba(255, 255, 255, 0.8);
        }
        50% {
            box-shadow: 0 0 30px 5px rgba(255, 255, 255, 0.8);
        }
        100% {
            box-shadow: 0 0 10px 0px rgba(255, 255, 255, 0.8);
        }
    }

    .nav-logo-wrap .headinglogo img {
        animation: glow 3s infinite;  
    }
 
 
/* ==============================
   Classic menu bar
   ============================== */


/* Logo (in navigation panel)*/

.nav-logo-wrap{

	display: flex; 
    align-items: center;
	width : 100%;
	margin-left: 120px;
}
.nav-logo-wrap .logo{
	padding-top: 10px;
	display: table-cell;
	vertical-align: middle;
	max-width: 100px;
	max-height: 100%;
}
.nav-logo-wrap .logo:before,
.nav-logo-wrap .logo:after{
	display: none;
}
.logo,
a.logo:hover{
	font-size: 18px;
	font-weight: 800;
	text-decoration: none;
	color: rgba(0,0,0, .9);
}
.headinglogo {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.logo-text {
    display: flex;
    flex-direction: column;
    margin-left: 10px; /* Space between logo and text */
    font-family: 'Arial', sans-serif; /* Default font family */
}

.logo-line1 {
    font-size: 22px; /* Adjust font size for "INSPIRED" */
    color: rgb(255, 255, 255); /* Adjust color as needed */
    font-weight: bold; /* Make "INSPIRED" bold */
    width: max-content; /* Ensure the width is set to the content's width */
}

.logo-line2 {
    font-size: 16px; /* Adjust font size for "square fze" */
    color: rgb(255, 255, 255); /* Adjust color as needed */
    font-weight: bold; /* Make "square fze" normal (not bold) */
    width: max-content; /* Ensure the width is set to the content's width */
    align-self: flex-end; /* Align "square fze" to the end of "INSPIRED" */
}



/*
 * Desktop nav
 */

.main-nav{
	width: 100%;
	height: 55px !important;
	position: fixed;
	top: 0;
	left: 0;
	text-align: left;
	display: flex;
	justify-content: baseline;
	align-items: center;
	background-color: #000;
	/* background-color: #000; */
	-webkit-box-shadow: 0 1px 0 rgba(0,0,0,.05);
	-moz-box-shadow: 0 1px 0 rgba(0,0,0,.05);
	box-shadow:  0 1px 0 rgba(0,0,0,.05);
	z-index: 2;
}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
	.inner-nav a:not(:first-child) {display: none;}
	.inner-nav a.icon {
	  float: right;
	  display: block;
	}
  }
  
  /* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
  @media screen and (max-width: 600px) {
	.inner-nav.responsive {position: relative;}
	.inner-nav.responsive a.icon {
	  position: absolute;
	  right: 0;
	  top: 0;
	}
	.inner-nav.responsive a {
	  float: none;
	  display: block;
	  text-align: left;
	}
  }

 
.inner-nav{
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 1.6rem;
	line-height: 2.8rem;
	font-weight: 400;
	color: #f6f7f9;
	display: inline-block;
	position: fixed;
	top: 0;
	right: 0;
	padding-right: 20%;
}
.inner-nav ul{
	color: #f6f7f9;
	margin: auto;
	letter-spacing: 1px;
	text-align: center;
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 1.6rem;
	line-height: 2.8rem;
	font-weight: 400;
	position: fixed;
	top: -5px;
	right: 0;
	padding-right: 10%;
}
.inner-nav ul  li{
	padding-top: 5px;
	color: #f6f7f9;
	float: left;
	margin-left: 40px;
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 1.6rem;
	line-height: 2.8rem;
	font-weight: 400;
}
.inner-nav ul li a{
	color: #f6f7f9;
	display: inline-block;
	-moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
	box-sizing: border-box;
	text-decoration: none;
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 1.6rem;
	font-weight: 400;
}
.inner-nav ul li a:hover{
	cursor: pointer;
	color: rgb(252, 253, 255);
}	
.inner-nav ul > li:first-child > a{

}  

/*
 * Mobile nav
 */
 .mobile-nav{
	display: none;
	float: right;
	vertical-align: middle;
	font-size: 11px;
	font-weight: 400;
	text-transform: uppercase;
	border-left: 1px solid #eee;
	border-right: 1px solid #eee;
	cursor: pointer;
	
	-webkit-user-select: none;  
	-moz-user-select: none;     
	-ms-user-select: none;     
	-o-user-select: none;
	user-select: none;
	-webkit-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);  
    -moz-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000); 
    -o-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -ms-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000); 
    transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
	-webkit-transition-property: background, color;
    -moz-transition-property: background, color;
    -o-transition-property: background, color;
    transition-property:  background, color;
}
.mobile-nav:hover,
.mobile-nav.active{
	background: #fff;
	color: #777;
}
.mobile-nav:active{
	-webkit-box-shadow: 0 0 35px rgba(0,0,0,.05) inset;
	-moz-box-shadow: 0 0 35px rgba(0,0,0,.05) inset;
	box-shadow: 0 0 35px rgba(0,0,0,.05) inset;
}
.no-js .mobile-nav{
	width: 55px;
	height: 55px;
}
.mobile-on .mobile-nav{
	display: table;
}
.mobile-nav .fa{
	height: 100%;
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	font-size: 21px;
}
.mobile-on .desktop-nav{
	display: none;
	width: 100%;
	position: absolute;
	top: 100%;
	left: 0;
	padding: 0 15px;
	z-index: 100;	
}
.mobile-on .full-wrapper .desktop-nav{
    padding: 0;
}


.mobile-on .desktop-nav ul{
	width: 100%;
    float: none;
	background: rgba(18,18,18, .97);
    position: relative;
    overflow-x: hidden;
}
.mobile-on .desktop-nav > ul{
    overflow-y: auto;
}
.mobile-on .desktop-nav ul li{
	display: block;
	float: none !important;
    overflow: hidden;
}
.mobile-on .desktop-nav ul li ul{
	padding: 0;
    border-bottom: 1px solid rgba(255,255,255, .1);
}
.mobile-on .desktop-nav ul li a{
	display: block;
	width: 100%;
	height: 38px !important;
	line-height: 38px !important;
	position: relative;
    -webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding: 0 10px;
	text-align: left;
	border-left: none;
	border-right: none;
	border-bottom: 1px solid rgba(255,255,255, .065);
	color: #999;
	cursor: pointer;
}
.mobile-on .desktop-nav ul li a:hover,
.mobile-on .desktop-nav ul li a.active{
	background: rgba(255,255,255, .03);
	color: #ddd;
}


/* Data Deletion Form Styles */
#DeletionForm {
    background-color: #fff;
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
    margin-top: 20px;
}

#DeletionForm h2 {
    text-align: center;
    margin-bottom: 10px;
    color: #333;
}

#userForm {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

#userForm h {
    display: block;
    font-size: 1rem;
    margin-bottom: 5px;
    color: #555;
}

#userForm .input-container {
    position: relative;
}

#userForm select, #userForm input[type="text"] {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1rem;
    transition: border-color 0.3s;
}

#userForm select:focus, #userForm input[type="text"]:focus {
    border-color: #007bff;
}

#userForm .required {
    position: absolute;
    top: 0;
    right: 10px;
    color: red;
    font-size: 1.2rem;
    line-height: 1;
}

#userForm .info-icon {
    position: relative;
    display: inline-block;
    cursor: pointer;
    color: #007bff;
    margin-left: 2px;
}

#userForm .info-icon .popup-text {
    visibility: hidden;
    width: 330px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 5px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%; /* Position the tooltip above the icon */
    left: 50%;
    margin-left: -35px;
    opacity: 0;
    transition: opacity 0.3s;
}

#userForm .info-icon:hover .popup-text {
    visibility: visible;
    opacity: 1;
}

#userForm input[type="submit"] {
    width: 100%;
    padding: 10px;
    background-color: #007bff;
    border: none;
    border-radius: 5px;
    color: #fff;
    font-size: 1.2rem;
    cursor: pointer;
    transition: background-color 0.3s;
}

#userForm input[type="submit"]:hover {
    background-color: #0056b3;
}
input:invalid {
    border: 1px solid red;  
}

.required {
    color: red;  
    margin-left: -1px; 
    font-size: 1.2em;  
}
::placeholder {
    font-weight: bold;  
    
}
.swal2-custom-size {
    width: 370px;  
    height: auto; 
    font-size: 16px;  
    border: 2px solid red;
    border-radius: 10px;
    animation: anticlockwise 5s infinite alternate;
    box-shadow: 0 0 10px red;
}

.swal2-custom-size-last {
    width: 370px;  
    height: auto;  
    font-size: 16px;  
    border: 2px solid #4CAF50;
    border-radius: 10px;
    animation: anticlockwise 5s infinite alternate;
    box-shadow: 0 0 20px #4CAF50;
}


@keyframes anticlockwise {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(-360deg);
    }
}