/**
* webthemez
* custom styles
**/

@font-face { font-family: TonduBeta; src: url('/fonts/Tondu-Beta.ttf'); }

html, body {
	width: 100%;
	overflow-x: hidden;
}
body {
	
	height:100%;	
	font-family: 'Open Sans', sans-serif;
	font-weight: 300;
	padding:0;
	margin:0;
	font-size:16px;
	line-height: 28px;
	color: #EEEEEE; 
	background: #000000;
	overflow-x:hidden;
	position: relative;
} 

.sastha_logo{
	margin-top: 20px;
	padding-top: 100px;
	padding-bottom: 50px;
	width: 100px;
}

h1,h2,h3,h4,h5,h6{
font-family: 'Alegreya Sans', sans-serif;
}
h1 { font-size: 3em; line-height:1.2em; margin:0 0 .8em; }
h2 { font-size: 1.8em; line-height:1.4em; margin:0 0 .8em;  }
h3 { font-size: 1.4em; line-height:1.4em; }
h4 { font-size: 1.25em; line-height:1.4em;}
h5 { font-size: 1.1em; line-height:1.4em; }
h6 { font-size: 1em; line-height:1.2em; }

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
	text-decoration: none; 
}	 
p { 
	padding:0 0 1em;
	margin:0;
}

a {
	color: #9bfff8;
	outline: 0;
	font-weight: bold;
	-webkit-transition: all .8s ease;
	transition: all .8s ease;
} 
a:hover {
	text-decoration: none;
	color: #1f2222;
	-webkit-transition: all .8s ease;
	transition: all .8s ease;
}
.highlight {
	color: #9bfff8;
}
 
.fullscreen {
    width:100%;
    min-height:100%;
	background-repeat:no-repeat;
    background-position:50% 50%;
    background-position:50% 50%\9 !important;
}
.overlay {
	width: 100%;
	height: 100%;
	background-color: #090909;
	background-image: linear-gradient(32deg,rgba(8, 8, 8, 0.74) 30px,transparent);
	background-size: 60px 60px;
	background-position: -5px -5px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
	position: relative;
}

.container {
	width: 100%;
	height: 100%;
	background-color: #111111;
	background-image: linear-gradient(32deg,rgba(8, 8, 8, 0.74) 30px,transparent);
	background-size: 60px 60px;
	background-position: -5px -5px;
	padding-bottom: 0px;
	margin-bottom: 0px;
}
 

.heading{
	background: black;
}

#menu {
  position: fixed;
  top: -100px;  
  width: 100%;
  z-index: 999;
  transition: top 0.4s ease-in-out;
}
.navbar-default {
	background: black;
	padding: 15px 0;
}
.navbar-default .navbar-brand {
    padding: 7px;
}
.navbar-default .navbar-brand .nav-logo {
    height: 25px;
    object-fit: contain;
    display: block;
}

.navbar-default .navbar-nav > li > a {
    color: rgba(255, 255, 255, 0.61);
	
    font-weight: 600;
    font-size: 15px;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    color: #9bfff8;
}

.navbar-default .navbar-nav > .active > a, 
.navbar-default .navbar-nav > .active > a:hover, 
.navbar-default .navbar-nav > .active > a:focus {
	background: transparent;
    
	color: #FFF;
}
.btn-default {
	font-size: 17px;
	margin: 30px 0 10px;
	margin-right: 10px;
	line-height: 20px;
	padding: 15px 35px;
	height: 50px;
	border: 2px solid #9bfff8;
	background: transparent;
	transition: all 0.4s;
	color: #9bfff8;
}
.btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default.active, .open > .dropdown-toggle.btn-default {
	border: 2px solid #9bfff8;
	background: #9bfff8;
	color: rgb(0, 0, 0);
}
.btn-primary {
	font-size: 17px;
	margin: 30px 0 10px;
	margin-right: 10px;
	line-height: 20px;
	padding: 15px 35px;
	height: 50px;
	border: 2px solid #9bfff8;
	background: #9bfff8;
	transition: all 0.4s;
	color: rgb(9, 9, 9);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open > .dropdown-toggle.btn-primary {
	border: 2px solid #9bfff8;
	background: transparent;
	color: #9bfff8;
}
.btn-secondary {
	font-size: 20px;
	font-weight: 300;
	line-height: 20px;
	padding: 20px 50px;
	height: 65px;
	border: none;
	background: #3eb0f7;
	transition: all 0.4s;
	color: white;
	border-radius: 4px;
}
.btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active, .btn-secondary.active, .open > .dropdown-toggle.btn-secondary {
	background: #1f96e0;
	color: white
}
.site-name img{
	width: 20px; 
	height: 20px
}
.logo {
	margin: 80px 0 100px 0;
}
.logo img{
	width: 150px; 
	height: 37px
}
.landing h1{
	font-size: 56px;
	font-weight: 300;
	color: #fff;
	margin: 120px 0 20px 0;
	text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}
.landing p {
	color: #fff;
}
.landing-text {
	margin-bottom: 20px;
}
.landing-text p { 
	padding-bottom: 20px;
}
.more {
	margin-bottom: 100px;
}
.more p {
	font-size: 17px;
}
.head-btn {
	margin-bottom: 120px;
}
.option {
	text-transform: uppercase;
	padding: 5px;
	min-width: 80px;
	margin-right: 5px;
	transition: all 0.4s;
	font-size: 14px;
	color: #fff;
}
.option .fa {
	font-size: 16px;
	margin-right: 10px;
}
.option:hover {
	color: #3eb0f7;
}
.header-phone {
	margin: 50px 0 100px;
}
#intro {
	padding: 80px 0 80px;
}
#intro h2 {
	font-size: 40px;
	font-weight: 300;
	margin: 15px 0 15px 0;
}
.intro-pic {
	margin-top: 20px;
}
.btn-section {
	padding-top: 20px;
}
#services {
	padding: 80px 0;
	width: 100%;
  height: 100%;
  background-color: #111111;
  background-image: linear-gradient(
    32deg,
    rgba(8, 8, 8, 0.74) 30px,
    transparent
  );
  background-size: 60px 60px;
  background-position: -5px -5px;
}

.service_icon{
	padding-right: 10px;
	margin-right: 10px;
	margin-bottom: 10px;
}


#services h2 {
	margin: 15px 0 15px 0;
	font-size: 40px;
	font-weight: 300;
}
#services .services-title p {
	font-size: 18px;
}
.row-feat {
	padding-top: 50px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.ssiet{
	display: flex;
	justify-content: center;
	align-items: center;
}
.ssieth2{
	display: flex;
	justify-content: center;
	align-items: center;
}
.ssietp{
	text-align:center;
}
.feat-list {
	margin-top: 40px;
}
.feat-list i {
	font-size: 48px;
	float: left;
	width: 20%;
	color: #9bfff8;
	height: 100%;
	position: relative;
	opacity: 0.6;
	-webkit-transition: all .8s ease;
	transition: all .8s ease;
	top: 10px;
}
.feat-list:hover i {
	color: #3eb0f7;
	-webkit-transition: all .8s ease;
	transition: all .8s ease;
}
#services .inner {
	display: inline-block;
	width: 80%;
}
#about-us {
	width: 100%;
  	height: 100%;
  	background-color: #111111;
  	background-image: linear-gradient(32deg,rgba(8, 8, 8, 0.74) 30px,transparent);
  	background-size: 60px 60px;
  	background-position: -5px -5px;
  	padding: 100px 0 100px;
}
#about-us h2 {
	font-size: 40px;
	font-weight: 300;
	margin: 15px 0 15px 0;
}
.about-us-pic {
	margin-top: 20px;
}
#past-events {
  padding: 80px 0;
  background: #0f0f0f;
  color: #fff;
}

#past-events h3 {
  margin-top: 0;
  font-weight: 600;

}
#past-events h2{
	font-size: 36px;
    font-weight: 700;
    margin-bottom: 10px;	
}

#past-events ul li {
  margin-bottom: 8px;
  font-size: 16px;
}
.Hackathon-Devriot {
  text-align: center;
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 25px;
  letter-spacing: 1px;
  color: #9bfff8;
}
@media (max-width: 768px) {
  .hackathon-title {
	text-align: center;
    font-size: 26px;
  }
}


.subscribe {
	color: #fff;
}
.letter {
	margin-top: 100px;
	width: 100px;
	height: 100px;
	line-height: 100px;
	font-size: 50px;
	color: #9bfff8;
	border-radius: 5px;
	border: solid 1px #9bfff8;
	border-radius: 50%;
}
.subscribe p {
	margin: 30px auto 30px;
}
.subscribe-form {
	max-width: 400px;
	margin: 50px auto 150px;
	text-align: center;
	overflow: hidden;
}
.subscribe-form form {
	position: relative;
}
.subscribe-form input {
	max-width: 85%;
	position: relative;
	padding: 5px 25px;
}
.subscribe-form .form-control {
	border-radius: 4px 0 0 4px;
	border: none;
	background-color: rgba(255, 255, 255, 0.6);
	color: #333;
	font-size: 1.2em;
	height: 55px;
}
.subscribe-form button {
	border-radius: 0 4px 4px 0;
	background-color: #9bfff8;
	color: #ffffff;
	font-size: 1em;
	line-height: 52px;
	position: absolute;
	top: 0px;
	right: 0px;
	padding: 0 30px;
	margin: 0;
	-webkit-transition: all .8s ease;
	transition: all .8s ease;
	border-radius: 0;
}
.subscribe-form .btn {
	height: 55px;
}
.subscribe-form .btn:hover {
	background-color: #1f96e0;
	color: #fff;
	-webkit-transition: all .8s ease;
	transition: all .8s ease;
}
.subscribe-form .form-control::-webkit-input-placeholder {
	color: #333;
}
.subscribe-form .form-control:-moz-placeholder { 
	color: #333;  
}
.subscribe-form .form-control::-moz-placeholder { 
	color: #333;  
}
.subscribe-form .form-control:-ms-input-placeholder {  
	color: #333;  
}
#portfolios {
	padding-top: 100px;
}
.title-line {
    width: 100px;
    height: 3px;
    margin: 0 auto;
    background: #9bfff8;
}
.portfolio {
    padding-top: 50px;
    padding-bottom: 100px;
}
.portfolio .screen {
    background: #FFFFFF;
    padding: 10px;
    margin: 13px;
    display: block;
}
.portfolio .screen img {
    width: 100%;
	border-radius: 4px;
	
	-webkit-transition: all .8s ease;
	transition: all .8s ease;
}
.portfolio .screen img:hover {
	border: solid 5px #9bfff8;
	-webkit-transition: all .8s ease;
	transition: all .8s ease;
}
.modal-backdrop.in {
    background-color: #000;
}
.ekko-lightbox .modal-content {
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	border-radius: 0;
	border: none;
	background-color: transparent;
}
.ekko-lightbox .modal-header {
	border: 0;
	padding-left: 0;
	padding-right: 0;
}
.ekko-lightbox .modal-header .close {
	-webkit-opacity: 0.7;
	-moz-opacity: 0.7;
	opacity: 0.7;
	color: #fff;
	text-shadow: 0;
	font-weight: 100;
	margin-top: 5px;
}
.ekko-lightbox .modal-header .close:hover {
	-webkit-opacity: 1;
	-moz-opacity: 1;
	opacity: 1;
}
.ekko-lightbox .modal-header h4.modal-title {
	font-weight: 100;
	color: #fff;
	padding: 0;
}
.ekko-lightbox .modal-body {
	padding: 0;
}
.ekko-lightbox .modal-footer {
	-webkit-opacity: 0.9;
	-moz-opacity: 0.9;
	opacity: 0.9;
	border: 0;
	color: #fff;
	font-weight: 100;
	padding: 0;
}
.ekko-lightbox-nav-overlay a {
	-webkit-opacity: 0.9;
	-moz-opacity: 0.9;
	opacity: 0.9;
	text-shadow: none;
}
#client {
	background: #f6f6f6;
	padding: 70px 0 70px;
}
#client img {
	max-height: 50px;
	margin: 0 20px;
	opacity: 1;
	transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
}
#client img:hover {
	opacity: 0.7;
	transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
}
#clients {
	/* padding: 100px 0 100px; */
	background-color: #F6F6F6;
}
.clients-item {
	display: block;
	width: 100%;
	height: auto;
	position: relative;
	margin-top: 30px;
}
.clients-item .box {
	margin-right: 15px;
	margin-left: 15px;
}
.clients-item .box .message {
	padding: 20px;
	font-style: italic;
	line-height: 30px;
	font-weight: 300;
	font-size: 18px;
}
.clients-item .client-pic img {
	width: 100px;
	height: 100px;
	border-radius: 50%;
	max-width: 100%;
}
.clients-item .client-info .client-name {
	margin-top: 10px;
	font-size: 16px;
}
.clients-item .client-info .company {
	font-style: italic;
	color: #9bfff8;
}
.owl-theme .owl-controls .owl-page span{
	background: #9bfff8;
}
.action {
	color: #fff;
}
.action h2 {
	font-size: 40px;
	font-weight: 300;
}
.download-store {
	padding: 50px 0 130px;
}
.download-store li {
	display: inline-block;
	list-style: none;
	margin-left: 10px;
}
.appstorebutton {
	height: 65px;
	width: 195px;
	position: relative;
	border-radius: 4px;
} 
.iphone {
	background: #3eb0f7;
	transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
}
.iphone:hover {
	background-color: #1f96e0;
	transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
}
.android {
	background: #555;
	transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
}
.android:hover {
	background-color: #444;
	transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
}
.appstorebutton a {
	color: white;
	text-decoration: none;
}
.appstorebutton p {
	font-size: 20px;
	font-weight: 300;
	text-align: left;
	color: white;
	padding: 10px 0 0 65px;
	line-height: 1;
}
.appstorebutton p small {
	font-size: 16px;
}
.appstorebutton i {
	position: absolute;
	top: 0;
	left: 0;
	margin: 10px 0 0 17px;
	font-size: 40px;
}
#footer {
	width: 100%;
	height: 100%;
	background-color: #111111;
	background-image: linear-gradient(32deg,rgba(8, 8, 8, 0.74) 30px,transparent);
	background-size: 60px 60px;
	background-position: -5px -5px;
	padding: 0px 0 50px;
}
.foot-container{
	background: transparent;
}
.social ul {
	padding: 0;
	list-style: none;
}
.social li {
	display: inline-block;
	padding-right: .3em;
}
.social li a {
	display: block;
	width: 40px;
	height: 40px;
	line-height: 40px;
	color: #9bfff8;
	border-radius: 5px;
	background: #0e1b1d;
	border: solid 1px #9bfff8;
	-webkit-transition: all .8s ease;
	transition: all .8s ease;
	border-radius: 50%;
}
.social li a:hover {
	color: #fff;
	background: #3eb0f7;
}
.scrollToTop{
	width: 40px; 
	height: 40px;
	padding: 5px;
	font-size: 30px;
	text-align: center; 
	color: rgb(118, 171, 174);
	position: fixed;
	bottom: 20px;
	right: 20px;
	display: none;
}
.scrollToTop:hover{
	color: #9bfff8;
}
.control-group .controls {
	overflow-x: hidden;
}

#pricing {
	padding-top: 100px;
}
.title-line {
    width: 100px;
    height: 3px;
    margin: 0 auto;
    background: #9bfff8;
}
.price-box {
	border: solid 1px #DEDEDE;
}
.pricing-option {
	padding: 50px 0 100px;
}
.pricing-option ul {
	padding: 0;
}
.price-heading h3 {
	margin-top: 0;
	background-color: rgb(222, 222, 222);
	padding: 20px 0;
	font-size: 29px;
}
.price-heading i {
	color: #d1d1d1;
	font-size: 75px;
	margin-top: 20px;
}
.price-group {
	padding: 30px 0 20px;
}
.price-group .dollar {
	font-size: 20px;
	position: relative;
	bottom: 0px;
}
.price-group .price {
	color: #9bfff8;
	font-size: 46px;
	font-weight: 500;
}
.price-group .time {
	font-size: 18px;
}
.price-feature li {
	margin-left: 30px;
	margin-right: 30px;
	list-style: none;
	border-bottom: solid 1px #EEEEEE;
	line-height: 40px;
}
.btn-price {
	margin: 5px 0 15px;
	font-size: 17px;
	padding: 7px 35px;
	height: 40px;
	background: #9bfff8;
	transition: all 0.4s;
	color: white;
	border-radius: 0;	
}
.btn-price:hover {
	background: #1f96e0;
	color: white;
}
#contact {
	width: 100%;
	min-height: 100%;
}


#contact  h2{
	color: white;
}
.ul-address a {
	font-weight: normal;
	color: white;
}
.ul-address a:hover {
	color: #9bfff8;
}
.ul-address li {
	padding-right: 20px; 
	margin-bottom: 8px; 
	list-style: none;
	color: white;
}
.ul-address i {
	margin-left: 15px;
	position: absolute; 
	left: 0;
	color: #9bfff8; 
	font-size: 25px;
	line-height: 30px;
}
.contact-row {
	margin: 100px 0 100px;
	display: flex;
    justify-content: center;  /* Centers horizontally */
    align-items: center;
}
#contact-form {
	margin: 0 auto;
}
#contact-form input {
	position: relative;
	padding: 5px 25px;
	width: 100%;
}
#contact-form textarea {
	position: relative;
	padding: 10px 25px;
	width: 100%;
	height: 120px !important;
}
#contact-form .form-control {
	border-radius: 0;
	border: solid 1px #dadada;
	background-color: #fff;
	color: #333;
	font-size: 1.2em;
	height: 55px;
}
#contact-form .btn {
	height: 55px;
	background-color: #9bfff8;
	color: #ffffff;
	font-size: 17px !important;
	line-height: 18px;
	padding: 0 33px;
	border: none;
	border-radius: 0;
	margin: 0;
	-webkit-transition: all .8s ease;
	transition: all .8s ease;
	float: left;
	width: auto;
}
#contact-form .btn:hover {
	background-color: #1f96e0;
	-webkit-transition: all .8s ease;
	transition: all .8s ease;
}
.navbar-default .navbar-toggle {
  border-color: #9bfff8;
}
.navbar-toggle {
  position: relative;
  float: right;
  margin-right: 15px;
  padding: 9px 10px;
  margin-top: 8px;
  margin-bottom: 8px;
  background-color: transparent;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 0;
}
/* iPads (portrait) ----------- */
@media only screen 
and (min-width : 768px) 
and (max-width : 1024px) 
and (orientation : portrait) {
	.more {
		margin-bottom: 50px;
	}
	#intro {
		padding: 30px 0 50px;
	}
	#intro h2, #about-us h2 {
		font-weight: 150;
		text-align: center;
	}
	#intro p, #about-us p {
		text-align: center;
	}
	.btn-section {
		text-align: center;
	}
	#services {
		padding-top: 75px;
	}
	.row-feat {
		padding-top: 40px;
		padding-bottom: 40px;
	}
	#about-us {
		padding: 80px 0 100px;
	}
	.about-us-pic {
		margin-top: 40px;
	}
	#client img {
		margin: 10px 0 10px;
		max-height: 40px;
	}	
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-width : 768px) 
and (max-width : 1024px) 
and (orientation : landscape) {
	.sastha_logo {
		margin: 50px 0 15px 0;
	}
	.landing h1{
		margin: 60px 0 60px 0;
	}	
	.landing-text {
		margin: 60px 0 40px 0;
	}
	.more {
		margin-bottom: 180px;
	}
	.header-phone {
	margin-top: 125px;
	}
	.intro-pic {
		margin-top: 100px;
	}
	.services-img {
		margin-top: 30px;
	}	
	.feat-list {
		margin-top: 10px;
	}
	.feat-list p {
		font-size: 15px;
	}
	.about-us-pic {
		margin-top: 50px;
	}
	#client img {
		max-height: 45px;
	}	
}

/* smart-phone ----------- */
@media (max-width: 767px) {
	.sastha_logo {
		margin: 40px 0 30px 0;
		width: 30px;
	}
	.more {
		margin-bottom: 40px;
	}
	#intro {
		padding: 70px 0 70px;
	}
	#intro h2, #about-us h2 {
		font-weight: 150;
		text-align: center;
	}
	#intro p, #about-us p {
		text-align: center;
	}
	.btn-section {
		text-align: center;
	}
	.feat-list i {
		padding-left: 40px;
	}
	.about-us-pic {
		margin-top: 50px;
	}
	#client img {
		margin: 10px 0 10px;
	}	
}	
/* iPhone 6Plus (landscape) ----------- */
@media (max-width: 736px) {

}

/* iPhone 6 (landscape) ----------- */
@media (max-width: 667px) {
	.sastha_logo {
		width: 200px;
		margin: 30px 0 30px 0;
	}
	.landing h1{
		font-size: 50px;
		margin: 10px 0 25px 0;
	}
	.landing-text {
		margin-top: 20px;
	}
	.letter {
		margin-top: 75px
	}
	.subscribe p {
		margin: 25px auto 15px;
	}
	.subscribe-form {
		margin: 20px auto 100px;
	}
	.action h2 {
		margin-top: 70px;
	}
	.download-store {
		padding: 20px 0 100px;
	}
}

/* iPhone 5 (landscape) ----------- */
@media (max-width: 568px){
	.sastha_logo {
		margin: 15px 0 15px 0;
	}
	.landing h1{
		font-size: 40px;
		margin: 20px 0 10px 0;
	}
	.landing-text p {
		font-size: 16px !important; 
	}
	#intro {
		padding-top: 50px;
	}
	#services {
		padding-top: 50px;
	}
	.feat-list i {
		padding-left: 20px;
	}
	#about-us {
		padding: 50px 0 70px;
	}
	#portfolios {
		padding-top: 70px;
	}	
	.portfolio {
		padding-top: 30px;
		padding-bottom: 70px;
	}
	#clients {
		padding: 70px 0 70px;
	}
	.clients-item .box .message {
		line-height: 25px;
		font-size: 18px;
	}
	.action h2 {
		margin: 50px 0 20px;
	}
	.download-text p {
		line-height: 1.5;	
	}	
	.download-store {
		padding: 10px 0 70px;
	}
}

/* iPhone 4 (landscape) ----------- */
@media (max-width: 480px) {
	.feat-list i {
		padding-left: 5px;
	}
	.action h2 {
		font-size: 30px;
	}
}

/* smart phone width: 360px ----------- */
@media (max-width: 360px) {
	#intro h2, #services h2, #about-us h2 {
		font-size: 30px;
	}
	.sastha_logo {
		margin: 30px 0 20px 0;
	}
	.feat-list i {
		padding-left: 0;
	}
	#services .inner {
		padding-left: 15px;
	}
	.appstorebutton {
		margin-bottom: 15px;
	} 
	.download-store li {
		margin-left: 0;
	}
}

/* iPhone 4/5 (portrait) ----------- */
@media (max-width: 320px) {
	.sastha_logo {
		width: 80px;
		margin: 30px 0 20px 0;
	}
	.landing h1{
		margin: 20px 0 35px 0;
	}
	.more {
		text-align: center;
	}
	.more p {
		font-size: 14px;
	}
	.option {
		padding: 3px;
		min-width: 75px;
		margin-right: 2px;
	}
	.btn-default {
		font-size: 16px;
		margin: 30px 0 10px;
		padding: 15px 30px;
		height: 35px;
		border-radius: 80px;
	}
	.btn-primary {
		font-size: 16px;
		margin: 30px 0 10px;
		margin-right: 15px;
		padding: 15px 30px;
		height: 35px;
		border-radius: 80px;
	}
	.subscribe-form {
		margin: 50px auto 110px;
	}
	.subscribe-form input {
		padding: 5px 15px;
	}
	.subscribe-form button {
		padding: 0 15px;
	}
	.action h2 {
		margin: 70px 0 20px;
	}

}

.team-section {
	width: 100%;
  height: 100%;
  background-color: #111111;
  background-image: linear-gradient(
    32deg,
    rgba(8, 8, 8, 0.74) 30px,
    transparent
  );
  background-size: 60px 60px;
  background-position: -5px -5px;
    text-align: center;
	padding-top:30px ;
}

/* Container */
.team-box {
    max-width: 1200px;
    margin: 0 auto;
}

/* Title */
.team-title {
	padding-top: 10px;
    font-size: 36px;
    font-weight: bold;
    margin-bottom: 10px;
}

/* Description */
.team-description {
    font-size: 18px;
    color: #555;
    max-width: 1200px;
    margin: 0 auto 30px;
}

/* Team Members Grid */
.team-members {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

/* Individual Member Card */
.member {
    background-color: rgb(30, 30, 30);
    padding: 20px;
    border-radius: 10px;
    width: 180px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
}

/* Member Image */
.member img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 10px;
}

/* Member Name */
.name {
    font-size: 13px;
    font-weight: bold;
}

/* Member Role */
.role {
    font-size: 13px;
    color: #777;
    transition: color 0.3s ease-in-out; /* Smooth transition */
}

.role:hover {
    color: #9bfff8; /* Change this to any color you like */
}

body {
  overflow: hidden;
}

.rainbow {
  height: 100vh;
  width: 0;
  top: 0;
  position: absolute;
  transform: rotate(10deg);
  transform-origin: top right;
}
.rainbow:nth-child(1) {
  box-shadow: -130px 0 80px 40px white, -50px 0 50px 25px #e879f9, 0 0 50px 25px #60a5fa, 50px 0 50px 25px #5eead4, 130px 0 80px 40px white;
  animation: 44.1s linear infinite slide;
  animation-delay: -1.8s;
}
.rainbow:nth-child(2) {
  box-shadow: -130px 0 80px 40px white, -50px 0 50px 25px #60a5fa, 0 0 50px 25px #5eead4, 50px 0 50px 25px #e879f9, 130px 0 80px 40px white;
  animation: 43.2s linear infinite slide;
  animation-delay: -3.6s;
}
.rainbow:nth-child(3) {
  box-shadow: -130px 0 80px 40px white, -50px 0 50px 25px #e879f9, 0 0 50px 25px #5eead4, 50px 0 50px 25px #60a5fa, 130px 0 80px 40px white;
  animation: 42.3s linear infinite slide;
  animation-delay: -5.4s;
}
.rainbow:nth-child(4) {
  box-shadow: -130px 0 80px 40px white, -50px 0 50px 25px #60a5fa, 0 0 50px 25px #5eead4, 50px 0 50px 25px #e879f9, 130px 0 80px 40px white;
  animation: 41.4s linear infinite slide;
  animation-delay: -7.2s;
}
.rainbow:nth-child(5) {
  box-shadow: -130px 0 80px 40px white, -50px 0 50px 25px #e879f9, 0 0 50px 25px #5eead4, 50px 0 50px 25px #60a5fa, 130px 0 80px 40px white;
  animation: 40.5s linear infinite slide;
  animation-delay: -9s;
}
.rainbow:nth-child(6) {
  box-shadow: -130px 0 80px 40px white, -50px 0 50px 25px #60a5fa, 0 0 50px 25px #e879f9, 50px 0 50px 25px #5eead4, 130px 0 80px 40px white;
  animation: 39.6s linear infinite slide;
  animation-delay: -10.8s;
}
.rainbow:nth-child(7) {
  box-shadow: -130px 0 80px 40px white, -50px 0 50px 25px #5eead4, 0 0 50px 25px #60a5fa, 50px 0 50px 25px #e879f9, 130px 0 80px 40px white;
  animation: 38.7s linear infinite slide;
  animation-delay: -12.6s;
}
.rainbow:nth-child(8) {
  box-shadow: -130px 0 80px 40px white, -50px 0 50px 25px #60a5fa, 0 0 50px 25px #5eead4, 50px 0 50px 25px #e879f9, 130px 0 80px 40px white;
  animation: 37.8s linear infinite slide;
  animation-delay: -14.4s;
}
.rainbow:nth-child(9) {
  box-shadow: -130px 0 80px 40px white, -50px 0 50px 25px #5eead4, 0 0 50px 25px #e879f9, 50px 0 50px 25px #60a5fa, 130px 0 80px 40px white;
  animation: 36.9s linear infinite slide;
  animation-delay: -16.2s;
}
.rainbow:nth-child(10) {
  box-shadow: -130px 0 80px 40px white, -50px 0 50px 25px #e879f9, 0 0 50px 25px #60a5fa, 50px 0 50px 25px #5eead4, 130px 0 80px 40px white;
  animation: 36s linear infinite slide;
  animation-delay: -18s;
}
.rainbow:nth-child(11) {
  box-shadow: -130px 0 80px 40px white, -50px 0 50px 25px #e879f9, 0 0 50px 25px #60a5fa, 50px 0 50px 25px #5eead4, 130px 0 80px 40px white;
  animation: 35.1s linear infinite slide;
  animation-delay: -19.8s;
}
.rainbow:nth-child(12) {
  box-shadow: -130px 0 80px 40px white, -50px 0 50px 25px #60a5fa, 0 0 50px 25px #5eead4, 50px 0 50px 25px #e879f9, 130px 0 80px 40px white;
  animation: 34.2s linear infinite slide;
  animation-delay: -21.6s;
}
.rainbow:nth-child(13) {
  box-shadow: -130px 0 80px 40px white, -50px 0 50px 25px #5eead4, 0 0 50px 25px #e879f9, 50px 0 50px 25px #60a5fa, 130px 0 80px 40px white;
  animation: 33.3s linear infinite slide;
  animation-delay: -23.4s;
}
.rainbow:nth-child(14) {
  box-shadow: -130px 0 80px 40px white, -50px 0 50px 25px #5eead4, 0 0 50px 25px #e879f9, 50px 0 50px 25px #60a5fa, 130px 0 80px 40px white;
  animation: 32.4s linear infinite slide;
  animation-delay: -25.2s;
}
.rainbow:nth-child(15) {
  box-shadow: -130px 0 80px 40px white, -50px 0 50px 25px #5eead4, 0 0 50px 25px #60a5fa, 50px 0 50px 25px #e879f9, 130px 0 80px 40px white;
  animation: 31.5s linear infinite slide;
  animation-delay: -27s;
}
.rainbow:nth-child(16) {
  box-shadow: -130px 0 80px 40px white, -50px 0 50px 25px #5eead4, 0 0 50px 25px #e879f9, 50px 0 50px 25px #60a5fa, 130px 0 80px 40px white;
  animation: 30.6s linear infinite slide;
  animation-delay: -28.8s;
}
.rainbow:nth-child(17) {
  box-shadow: -130px 0 80px 40px white, -50px 0 50px 25px #e879f9, 0 0 50px 25px #60a5fa, 50px 0 50px 25px #5eead4, 130px 0 80px 40px white;
  animation: 29.7s linear infinite slide;
  animation-delay: -30.6s;
}
.rainbow:nth-child(18) {
  box-shadow: -130px 0 80px 40px white, -50px 0 50px 25px #5eead4, 0 0 50px 25px #e879f9, 50px 0 50px 25px #60a5fa, 130px 0 80px 40px white;
  animation: 28.8s linear infinite slide;
  animation-delay: -32.4s;
}
.rainbow:nth-child(19) {
  box-shadow: -130px 0 80px 40px white, -50px 0 50px 25px #5eead4, 0 0 50px 25px #e879f9, 50px 0 50px 25px #60a5fa, 130px 0 80px 40px white;
  animation: 27.9s linear infinite slide;
  animation-delay: -34.2s;
}
.rainbow:nth-child(20) {
  box-shadow: -130px 0 80px 40px white, -50px 0 50px 25px #5eead4, 0 0 50px 25px #e879f9, 50px 0 50px 25px #60a5fa, 130px 0 80px 40px white;
  animation: 27s linear infinite slide;
  animation-delay: -36s;
}
.rainbow:nth-child(21) {
  box-shadow: -130px 0 80px 40px white, -50px 0 50px 25px #60a5fa, 0 0 50px 25px #5eead4, 50px 0 50px 25px #e879f9, 130px 0 80px 40px white;
  animation: 26.1s linear infinite slide;
  animation-delay: -37.8s;
}
.rainbow:nth-child(22) {
  box-shadow: -130px 0 80px 40px white, -50px 0 50px 25px #60a5fa, 0 0 50px 25px #5eead4, 50px 0 50px 25px #e879f9, 130px 0 80px 40px white;
  animation: 25.2s linear infinite slide;
  animation-delay: -39.6s;
}
.rainbow:nth-child(23) {
  box-shadow: -130px 0 80px 40px white, -50px 0 50px 25px #e879f9, 0 0 50px 25px #5eead4, 50px 0 50px 25px #60a5fa, 130px 0 80px 40px white;
  animation: 24.3s linear infinite slide;
  animation-delay: -41.4s;
}
.rainbow:nth-child(24) {
  box-shadow: -130px 0 80px 40px white, -50px 0 50px 25px #5eead4, 0 0 50px 25px #e879f9, 50px 0 50px 25px #60a5fa, 130px 0 80px 40px white;
  animation: 23.4s linear infinite slide;
  animation-delay: -43.2s;
}
.rainbow:nth-child(25) {
  box-shadow: -130px 0 80px 40px white, -50px 0 50px 25px #5eead4, 0 0 50px 25px #60a5fa, 50px 0 50px 25px #e879f9, 130px 0 80px 40px white;
  animation: 22.5s linear infinite slide;
  animation-delay: -45s;
}

@keyframes slide {
  from {
    right: -25vw;
  }
  to {
    right: 125vw;
  }
}
.h {
  box-shadow: 0 0 50vh 40vh white;
  width: 100vw;
  height: 0;
  bottom: 0;
  left: 0;
  position: absolute;
}

.v {
  box-shadow: 0 0 35vw 25vw white;
  width: 0;
  height: 100vh;
  bottom: 0;
  left: 0;
  position: absolute;
}

.description-container {
  position: absolute;
  bottom: 32px;
  left: 32px;
  text-align: left;
  letter-spacing: 3px;
}
.description-container .title {
  font-size: 19px;
  font-weight: 500;
  color: black;
  text-transform: uppercase;
}
.description-container .subtitle {
  margin-top: 6px;
  font-size: 26px;
  font-weight: 500;
  color: black;
  text-transform: uppercase;
}

.author-container {
  position: absolute;
  width: 50%;
  right: 21px;
  bottom: 21px;
  text-align: right;
}
.author-container .picture {
  position: absolute;
  right: 0;
  top: -42px;
  margin-top: -12px;
  width: 42px;
  height: 42px;
  background-size: 42px;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(https://assets.codepen.io/595576/internal/avatars/users/default.png?format=auto&version=1689877807&width=80&height=80);
}
.author-container .title {
  font-size: 16px;
  letter-spacing: 2px;
  color: black;
}


body {
	overflow: hidden;
  }
  
  .rainbow {
	height: 100vh;
	width: 0;
	top: 0;
	position: absolute;
	transform: rotate(10deg);
	transform-origin: top right;
  }
  .rainbow:nth-child(1) {
	box-shadow: -130px 0 80px 40px black, -50px 0 50px 25px #e879f9, 0 0 50px 25px #60a5fa, 50px 0 50px 25px #5eead4, 130px 0 80px 40px black;
	animation: 44.1s linear infinite slide;
	animation-delay: -1.8s;
  }
  .rainbow:nth-child(2) {
	box-shadow: -130px 0 80px 40px black, -50px 0 50px 25px #60a5fa, 0 0 50px 25px #5eead4, 50px 0 50px 25px #e879f9, 130px 0 80px 40px black;
	animation: 43.2s linear infinite slide;
	animation-delay: -3.6s;
  }
  .rainbow:nth-child(3) {
	box-shadow: -130px 0 80px 40px black, -50px 0 50px 25px #e879f9, 0 0 50px 25px #5eead4, 50px 0 50px 25px #60a5fa, 130px 0 80px 40px black;
	animation: 42.3s linear infinite slide;
	animation-delay: -5.4s;
  }
  .rainbow:nth-child(4) {
	box-shadow: -130px 0 80px 40px black, -50px 0 50px 25px #60a5fa, 0 0 50px 25px #5eead4, 50px 0 50px 25px #e879f9, 130px 0 80px 40px black;
	animation: 41.4s linear infinite slide;
	animation-delay: -7.2s;
  }
  .rainbow:nth-child(5) {
	box-shadow: -130px 0 80px 40px black, -50px 0 50px 25px #e879f9, 0 0 50px 25px #5eead4, 50px 0 50px 25px #60a5fa, 130px 0 80px 40px black;
	animation: 40.5s linear infinite slide;
	animation-delay: -9s;
  }
  .rainbow:nth-child(6) {
	box-shadow: -130px 0 80px 40px black, -50px 0 50px 25px #60a5fa, 0 0 50px 25px #e879f9, 50px 0 50px 25px #5eead4, 130px 0 80px 40px black;
	animation: 39.6s linear infinite slide;
	animation-delay: -10.8s;
  }
  .rainbow:nth-child(7) {
	box-shadow: -130px 0 80px 40px black, -50px 0 50px 25px #5eead4, 0 0 50px 25px #60a5fa, 50px 0 50px 25px #e879f9, 130px 0 80px 40px black;
	animation: 38.7s linear infinite slide;
	animation-delay: -12.6s;
  }
  .rainbow:nth-child(8) {
	box-shadow: -130px 0 80px 40px black, -50px 0 50px 25px #60a5fa, 0 0 50px 25px #5eead4, 50px 0 50px 25px #e879f9, 130px 0 80px 40px black;
	animation: 37.8s linear infinite slide;
	animation-delay: -14.4s;
  }
  .rainbow:nth-child(9) {
	box-shadow: -130px 0 80px 40px black, -50px 0 50px 25px #5eead4, 0 0 50px 25px #e879f9, 50px 0 50px 25px #60a5fa, 130px 0 80px 40px black;
	animation: 36.9s linear infinite slide;
	animation-delay: -16.2s;
  }
  .rainbow:nth-child(10) {
	box-shadow: -130px 0 80px 40px black, -50px 0 50px 25px #e879f9, 0 0 50px 25px #60a5fa, 50px 0 50px 25px #5eead4, 130px 0 80px 40px black;
	animation: 36s linear infinite slide;
	animation-delay: -18s;
  }
  .rainbow:nth-child(11) {
	box-shadow: -130px 0 80px 40px black, -50px 0 50px 25px #e879f9, 0 0 50px 25px #60a5fa, 50px 0 50px 25px #5eead4, 130px 0 80px 40px black;
	animation: 35.1s linear infinite slide;
	animation-delay: -19.8s;
  }
  .rainbow:nth-child(12) {
	box-shadow: -130px 0 80px 40px black, -50px 0 50px 25px #60a5fa, 0 0 50px 25px #5eead4, 50px 0 50px 25px #e879f9, 130px 0 80px 40px black;
	animation: 34.2s linear infinite slide;
	animation-delay: -21.6s;
  }
  .rainbow:nth-child(13) {
	box-shadow: -130px 0 80px 40px black, -50px 0 50px 25px #5eead4, 0 0 50px 25px #e879f9, 50px 0 50px 25px #60a5fa, 130px 0 80px 40px black;
	animation: 33.3s linear infinite slide;
	animation-delay: -23.4s;
  }
  .rainbow:nth-child(14) {
	box-shadow: -130px 0 80px 40px black, -50px 0 50px 25px #5eead4, 0 0 50px 25px #e879f9, 50px 0 50px 25px #60a5fa, 130px 0 80px 40px black;
	animation: 32.4s linear infinite slide;
	animation-delay: -25.2s;
  }
  .rainbow:nth-child(15) {
	box-shadow: -130px 0 80px 40px black, -50px 0 50px 25px #5eead4, 0 0 50px 25px #60a5fa, 50px 0 50px 25px #e879f9, 130px 0 80px 40px black;
	animation: 31.5s linear infinite slide;
	animation-delay: -27s;
  }
  .rainbow:nth-child(16) {
	box-shadow: -130px 0 80px 40px black, -50px 0 50px 25px #5eead4, 0 0 50px 25px #e879f9, 50px 0 50px 25px #60a5fa, 130px 0 80px 40px black;
	animation: 30.6s linear infinite slide;
	animation-delay: -28.8s;
  }
  .rainbow:nth-child(17) {
	box-shadow: -130px 0 80px 40px black, -50px 0 50px 25px #e879f9, 0 0 50px 25px #60a5fa, 50px 0 50px 25px #5eead4, 130px 0 80px 40px black;
	animation: 29.7s linear infinite slide;
	animation-delay: -30.6s;
  }
  .rainbow:nth-child(18) {
	box-shadow: -130px 0 80px 40px black, -50px 0 50px 25px #5eead4, 0 0 50px 25px #e879f9, 50px 0 50px 25px #60a5fa, 130px 0 80px 40px black;
	animation: 28.8s linear infinite slide;
	animation-delay: -32.4s;
  }
  .rainbow:nth-child(19) {
	box-shadow: -130px 0 80px 40px black, -50px 0 50px 25px #5eead4, 0 0 50px 25px #e879f9, 50px 0 50px 25px #60a5fa, 130px 0 80px 40px black;
	animation: 27.9s linear infinite slide;
	animation-delay: -34.2s;
  }
  .rainbow:nth-child(20) {
	box-shadow: -130px 0 80px 40px black, -50px 0 50px 25px #5eead4, 0 0 50px 25px #e879f9, 50px 0 50px 25px #60a5fa, 130px 0 80px 40px black;
	animation: 27s linear infinite slide;
	animation-delay: -36s;
  }
  .rainbow:nth-child(21) {
	box-shadow: -130px 0 80px 40px black, -50px 0 50px 25px #60a5fa, 0 0 50px 25px #5eead4, 50px 0 50px 25px #e879f9, 130px 0 80px 40px black;
	animation: 26.1s linear infinite slide;
	animation-delay: -37.8s;
  }
  .rainbow:nth-child(22) {
	box-shadow: -130px 0 80px 40px black, -50px 0 50px 25px #60a5fa, 0 0 50px 25px #5eead4, 50px 0 50px 25px #e879f9, 130px 0 80px 40px black;
	animation: 25.2s linear infinite slide;
	animation-delay: -39.6s;
  }
  .rainbow:nth-child(23) {
	box-shadow: -130px 0 80px 40px black, -50px 0 50px 25px #e879f9, 0 0 50px 25px #5eead4, 50px 0 50px 25px #60a5fa, 130px 0 80px 40px black;
	animation: 24.3s linear infinite slide;
	animation-delay: -41.4s;
  }
  .rainbow:nth-child(24) {
	box-shadow: -130px 0 80px 40px black, -50px 0 50px 25px #5eead4, 0 0 50px 25px #e879f9, 50px 0 50px 25px #60a5fa, 130px 0 80px 40px black;
	animation: 23.4s linear infinite slide;
	animation-delay: -43.2s;
  }
  .rainbow:nth-child(25) {
	box-shadow: -130px 0 80px 40px black, -50px 0 50px 25px #5eead4, 0 0 50px 25px #60a5fa, 50px 0 50px 25px #e879f9, 130px 0 80px 40px black;
	animation: 22.5s linear infinite slide;
	animation-delay: -45s;
  }
  
  @keyframes slide {
	from {
	  right: -25vw;
	}
	to {
	  right: 125vw;
	}
  }
  .h {
	box-shadow: 0 0 50vh 40vh black;
	width: 100vw;
	height: 0;
	bottom: 0;
	left: 0;
	position: absolute;
  }
  
  .v {
	box-shadow: 0 0 35vw 25vw black;
	width: 0;
	height: 100vh;
	bottom: 0;
	left: 0;
	position: absolute;
  }
  
  .description-container {
	position: absolute;
	bottom: 32px;
	left: 32px;
	text-align: left;
	letter-spacing: 3px;
  }
  .description-container .title {
	font-size: 19px;
	font-weight: 500;
	color: black;
	text-transform: uppercase;
  }
  .description-container .subtitle {
	margin-top: 6px;
	font-size: 26px;
	font-weight: 500;
	color: black;
	text-transform: uppercase;
  }
  
  .author-container {
	position: absolute;
	width: 50%;
	right: 21px;
	bottom: 21px;
	text-align: right;
  }
  .author-container .picture {
	position: absolute;
	right: 0;
	top: -42px;
	margin-top: -12px;
	width: 42px;
	height: 42px;
	background-size: 42px;
	background-position: center;
	background-repeat: no-repeat;
	background-image: url(https://assets.codepen.io/595576/internal/avatars/users/default.png?format=auto&version=1689877807&width=80&height=80);
  }
  .author-container .title {
	font-size: 16px;
	letter-spacing: 2px;
	color: black;
  }


  /* From Uiverse.io by wilsondesouza */ 
ul {
	list-style: none;
  }
  
  .example-2 {
	display: flex;
	justify-content: center;
	align-items: center;
  }
  .example-2 .icon-content {
	margin: 0 10px;
	position: relative;
  }
  .example-2 .icon-content .tooltip {
	position: absolute;
	top: -30px;
	left: 50%;
	transform: translateX(-50%);
	color: #fff;
	padding: 6px 10px;
	border-radius: 5px;
	opacity: 0;
	visibility: hidden;
	font-size: 14px;
	transition: all 0.3s ease;
  }
  .example-2 .icon-content:hover .tooltip {
	opacity: 1;
	visibility: visible;
	top: -50px;
  }
  .example-2 .icon-content a {
	position: relative;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	color: #4d4d4d;
	background-color: #ffffff;
	transition: all 0.3s ease-in-out;
  }
  .example-2 .icon-content a:hover {
	box-shadow: 3px 2px 45px 0px rgb(0 0 0 / 12%);
  }
  .example-2 .icon-content a svg {
	position: relative;
	z-index: 1;
	width: 30px;
	height: 30px;
  }
  .example-2 .icon-content a:hover {
	color: white;
  }
  .example-2 .icon-content a .filled {
	position: absolute;
	top: auto;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 0;
	background-color: #000;
	transition: all 0.3s ease-in-out;
  }
  .example-2 .icon-content a:hover .filled {
	height: 100%;
  }
  
  .example-2 .icon-content a[data-social="linkedin"] .filled,
  .example-2 .icon-content a[data-social="linkedin"] ~ .tooltip {
	background-color: #0274b3;
  }
  
  .example-2 .icon-content a[data-social="github"] .filled,
  .example-2 .icon-content a[data-social="github"] ~ .tooltip {
	background-color: #24262a;
  }
  .example-2 .icon-content a[data-social="instagram"] .filled,
  .example-2 .icon-content a[data-social="instagram"] ~ .tooltip {
	background: linear-gradient(
	  45deg,
	  #405de6,
	  #5b51db,
	  #b33ab4,
	  #c135b4,
	  #e1306c,
	  #fd1f1f
	);
  }
  .example-2 .icon-content a[data-social="facebook"] .filled,
  .example-2 .icon-content a[data-social="facebook"] ~ .tooltip {
	background-color: #1877F2;
  }

  /* Style for the main FAQ container */
.faq-container {
	width: 100%;
  height: 100%;
  background-color: #111111;
  background-image: linear-gradient(
    32deg,
    rgba(8, 8, 8, 0.74) 30px,
    transparent
  );
  background-size: 60px 60px;
  background-position: -5px -5px;
	padding: 20px;
	font-family: 'Arial, sans-serif';
	color: #ffffff; /* Base text color */
  }
  
  /* Style for the main title */
  .faq-container h1 {
	text-align: center;
	margin-bottom: 40px;
	font-size:xx-large;
	color: #9bfff8; /* Dark blue color for the title */
  }
  
  /* Style for each FAQ item */
  .faq-item {
	border-bottom: 1px solid #cbf7f495; /* Light gray border between items */
	overflow: hidden; /* Hide overflowing content */
  }
  
  /* Style for the question buttons */
  .faq-question {
	background-color: #00000000; /* Light gray background */
	width: 100%;
	padding: 20px;
	text-align: left;
	font-size: 18px;
	border: none;
	outline: none;
	cursor: pointer;
	position: relative;
	transition: background-color 0.3s ease; /* Smooth background transition on hover */
  }
  
  /* Hover effect for question buttons */
  .faq-question:hover {
	background-color: #ffffff4d; /* Slightly darker gray on hover */
  }
  
  /* Style for the arrow icon */
  .faq-question .arrow {
	position: absolute;
	right: 20px;
	transition: transform 0.3s ease; /* Smooth rotation transition */
  }
  
  /* Rotate the arrow when the question is active (expanded) */
  .faq-question.active .arrow {
	transform: rotate(180deg); /* Rotate arrow 180 degrees */
  }
  
  /* Style for the answer sections */
  .faq-answer {
	max-height: 0; /* Initially hide the answer */
	overflow: hidden;
	transition: max-height 0.3s ease; /* Smooth transition for expanding */
	background-color: #00000000; /* White background for answers */
  }
  
  /* Style for the answer text */
  .faq-answer p {
	padding: 20px;
	font-size: 16px;
	line-height: 1.5; /* Increase line height for better readability */
	color: #9bfff8; /* Slightly lighter text color for answers */
  }
  .haccor {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 10vmin;
	margin-bottom: 0px;
	overflow: hidden;
	transform: skew(5deg);
  
	.card {
	  flex: 1;
	  transition: all 1s ease-in-out;
	  height: 75vmin;
	  position: relative;
	  .card__head {
		color: black;
		font-family:Georgia, 'Times New Roman', Times, serif;
		background: #9bfff8;
		padding: 0.5em;
		transform: rotate(-90deg);
		transform-origin: 0% 0%;
		transition: all 0.5s ease-in-out;
		min-width: 100%;
		text-align: center;
		position: absolute;
		bottom: 0;
		left: 0;
		font-size: 1em;
		white-space: nowrap;
	  }
  
	  &:hover {
		flex-grow: 10;
		img {
		  filter: grayscale(0);
		}
		.card__head {
		  text-align: center;
		  font-family: 'Arial Black', Gadget, sans-serif;
		  top: calc(100% - 2em);
		  color: white;
		  background: rgba(0, 0, 0, 0.5);
		  font-size: 2em;
		  transform: rotate(0deg) skew(-5deg);
		}
	  }
	  img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		transition: all 1s ease-in-out;
		filter: grayscale(100%) blur(2px);
	  }
	  &:not(:nth-child(5)) {
		margin-right: 1em;
	  }
	}
  }
  



  .tooltip-container {
	position: relative;
	display: inline-block;
  }
  
  .tooltip-trigger {
	cursor: pointer;
	color: #d8d8d8; /* slate-800 */
  }
  
  .tooltip-content {
	position: absolute;
	left: 50%;
	bottom: 100%;
	transform: translateX(-50%) translateY(0.5rem);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.1s ease, transform 0.1s ease;
  }
  
  .tooltip-container:hover .tooltip-content {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
  }
  
  .tooltip-box {
	background-color: #cacaca50; /* slate-800 */
	color: #ffffff;
	width: 30rem;
	height: 20rem;
	max-width: 50rem;
	padding: 1rem;
	border-radius: 0.5rem;
	font-size: 1rem;
  }
  
  .tooltip-title {
	font-weight: bold;
	font-size: 1.125rem;
	margin-bottom: 0.25rem;
  }
  
  .tooltip-message {
	font-size: 0.875rem;
  }
  

  /* Container for the map */
.map-container {
	position: relative;
	width: 100%;          /* Make the map container responsive */
	height: 180px;        /* Set the height of the map */
	max-width: 800px;     /* Optional: Set a max-width for the map */
	margin: 0 auto;       /* Center the map horizontally */
	border-radius: 8px;   /* Optional: Add rounded corners to the map container */
	overflow: hidden;     /* Ensure the map stays within the container */
  }
  
  /* Optional: Styling the iframe (optional border or shadow) */
  .map-container iframe {
	width: 100%;          /* Make the iframe fill the container */
	height: 100%;         /* Ensure the iframe takes the full height */
	border: none;         /* Remove iframe border */
	border-radius: 8px;   /* Optional: Add rounded corners to the iframe */
  }
  

  .tooltip-content {
	position: absolute;
	left: 50%;
	bottom: 100%;
	transform: translateX(-50%) translateY(0.5rem);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease, transform 0.2s ease;
	z-index: 10;
	width: 100%;
  }

.sponsor_page{
	width: 100%;
  height: 100%;
  padding-top: 30px;
  background-color: #111111;
  background-image: linear-gradient(
    32deg,
    rgba(8, 8, 8, 0.74) 30px,
    transparent
  );
  background-size: 60px 60px;
  background-position: -5px -5px;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	padding-top: 20px;
	flex-direction: column;
}
  
.sponsor-title{
	font-size: 36px;
	font-weight: bold;
	padding-top: 30px;
}

.gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: auto;
    grid-auto-flow: dense;
    gap: 6px;
    max-width: 60%;
    margin: 0 auto; /* Centers the gallery */
}

img {
    width: 100%;
    height: 100%;
    object-fit: cover;
	border-radius: 10px;
}

img.four-grid-cells {
    grid-row: span 2 / auto;
    grid-column: span 2 / auto;
}

img.wide-image {
    grid-column: span 2 / auto;
}

/* Responsive adjustments for medium screens */
@media screen and (max-width: 768px) {
    .gallery {
        grid-template-columns: 1fr 1fr; /* 2 columns */
        gap: 10px; /* Larger gap for smaller screens */
    }
}

/* Responsive adjustments for small screens */
@media screen and (max-width: 480px) {
    .gallery {
        grid-template-columns: 1fr; /* Single column */
        gap: 12px; /* Larger gap for mobile */
    }

    /* Resets the grid placement for images that span multiple cells */
    img.four-grid-cells {
        grid-row: auto;
        grid-column: auto;
    }

    img.wide-image {
        grid-column: auto;
    }
}


.reg_details{
	color: #b9f7f3;
	font-family: 'Open Sans', sans-serif;
}

.reg_details:hover{
	color: #5dfef3;
	-webkit-transition: all .8s ease;
	transition: all .8s ease;
}

.contact_no{
	color: #cdcdcd;
}




.parent1 {
    display: flex;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(5, 1fr);
    gap: 8px;
	margin-top: 30px;
	justify-content: center;
}
    
.div1 {
    grid-row: span 2 / span 2;
}

.div2 {
    grid-row: span 2 / span 2;
}
        



/* From Uiverse.io by alexruix */ 
.card1 {
	width: 190px;
	height: 254px;
	border-radius: 20px;
	background: #000000;
	position: relative;
    transition: 0.5s ease-out;
    overflow: visible;
    display: flex;
    justify-content: center;
    align-content: center;
   }
   
   .card-details1 {
	color: black;
	height: 100%;
	gap: .5em;
	display: grid;
	place-content: center;
	overflow: hidden;
   }
   
   .card-button1 {
	transform: translate(-50%, 125%);
	width: 60%;
	border-radius: 1rem;
	border: none;
	background-color: #646464;
	color: #000000;
	font-size: 1rem;
	padding: .5rem 1rem;
	position: absolute;
	left: 50%;
	bottom: 0;
	opacity: 0;
	transition: 0.3s ease-out;
	text-decoration: none;
   }
   
   .text-body1 {
	color: rgb(0, 0, 0);
   }
   
   /*Text*/
   .text-title1 {
	font-size: 15px;
    position: absolute;
	font-family:'Courier New', Courier, monospace;
    bottom: 0px;
    color: #000000;
    padding: 0;
    text-align: center;
   }
   
   /*Hover*/
   .card1:hover {
	border-color: #008bf8;
	box-shadow: 0 4px 18px 0 #c9fffb;
   }
   
   .card1:hover .card-button1 {
	transform: translate(-50%, 50%);
	opacity: 1;
	
   }


.shine {
	margin: auto;
    width: 50%;
    padding: 10px;
	padding-top: 60px;
	text-align: center;
	font-size: 1.85em;
	font-weight: 900;
	color: rgba(255, 255, 255, 0.3);
	background: #222 -webkit-gradient(
		linear,
		left top,
		right top,
		from(#222),
		to(#222),
		color-stop(0.5, #fff)
	  ) 0 0 no-repeat;
	background-image: -webkit-linear-gradient(
	  -40deg,
	  transparent 0%,
	  transparent 40%,
	  #fff 50%,
	  transparent 60%,
	  transparent 100%
	);
  -webkit-background-clip: text;
  background-clip: text;
  background-size: 50px;
  -webkit-background-size: 50px;
  -webkit-animation: zezzz;
  animation: zezzz;
  -webkit-animation-duration: 5s;
  animation-duration: 5s; /* Standard property for compatibility */
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  }
  @keyframes zezzz {
  0%,
  10% {
    background-position: -200px;
  }
  20% {
    background-position: top left;
  }
  100% {
    background-position: 400px;
  }
  }

  @-webkit-keyframes zezzz {
  0%,
  10% {
    background-position: -200px;
  }
  20% {
    background-position: top left;
  }
  100% {
    background-position: 400px;
  }
  }
  
  .guest{
	width: 100%;
	height: 100%;
	background-color: #111111;
	background-image: linear-gradient(32deg,rgba(8, 8, 8, 0.74) 30px,transparent);
	background-size: 60px 60px;
	background-position: -5px -5px;
	padding-bottom: 0px;
	margin-bottom: 0px;
}
  

.crimg1{
	background-image:url("/images/456064021_8003626626381513_4960590551454923630_n.jpg");
	background-size: 210px;
    border-radius: 14px;
	width: 100%;
    background-position: -20px;
	display: flex;
}
.crimg2{
	background-image:url("/images/navaneethan.jpg");
	background-size: 300px;
    border-radius: 14px;
	width: 100%;
    background-position: -60px;
	display: flex;
}
.crimg3{
	background-image:url("/images/ganeshmanoharan.png");
	background-size: 300px;
    border-radius: 14px;
	width: 100%;
    background-position: -60px;
	display: flex;
}

.colorbg{
	background-color: #ffffff;
	width: 100%;
	height: 35px;
	position:relative;
	top:220px ;
}

.theme{
	color: #9bfff8;
	font-size:15px;
	font-family: 'Courier New', Courier, monospace;
}








.judge-section {
	width: 100%;
  height: 100%;
  background-color: #111111;
  background-image: linear-gradient(
    32deg,
    rgba(8, 8, 8, 0.74) 30px,
    transparent
  );
  background-size: 60px 60px;
  background-position: -5px -5px;
    text-align: center;
	padding-top:30px ;
}

/* Container */
.judge-box {
    max-width: 1200px;
    margin: 0 auto;
}

/* Title */
.judge-title {
    font-size: 36px;
    font-weight: bold;
    margin-bottom: 10px;
}

/* Description */
.judge-description {
    font-size: 18px;
    color: #555;
    max-width: 1200px;
    margin: 0 auto 30px;
}

/* Team Members Grid */
.judge-members {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

/* Individual Member Card */
.judge {
    background-color: rgb(30, 30, 30);
    padding: 20px;
    border-radius: 10px;
    width: 180px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
}

/* Member Image */
.judge img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 10px;
}

/* Member Name */
.name {
    font-size: 11px;
    font-weight: bold;
}





.space-y-2 {
	margin-top: 20px;
	justify-content: center;
    margin-bottom: 0.5rem;
	display: grid;
    place-items: center;
}

.p-4 {
    padding: 1rem;
}

/* Alert Styles */
.alert {
    display: flex;
	max-width: 500px;
	width: 500px;
    align-items: center;
    padding: 0.5rem;
    border-left: 4px solid;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    transition: all 0.3s ease-in-out;
}

.alert svg {
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.5rem;
    flex-shrink: 0;
}

.text {
    font-weight: 600;
}

/* Hover Effect */
.alert:hover {
    transform: scale(1.05);
}

.alert:hover .bg {
    opacity: 0.8;
}

/* Success Alert */
.success {
    background-color: #c7f7f4;
    border-color: #5d9d99;
    color: #000000;
}

.success:hover {
    background-color: #c6f9f6;
}

.success .icon {
    fill: #9bfff8;
}

/* Info Alert */
.info {
    background-color: #cce5ff;
    border-color: #3182ce;
    color: #2b6cb0;
}

.info:hover {
    background-color: #a7d8f7;
}

.info .icon {
    fill: #3182ce;
}

/* Warning Alert */
.warning {
    background-color: #fff3cd;
    border-color: #f6ad55;
    color: #d69e2e;
}

.warning:hover {
    background-color: #ffe4a1;
}

.warning .icon {
    fill: #f6ad55;
}

/* Error Alert */
.error {
    background-color: #f8d7da;
    border-color: #e53e3e;
    color: #e53e3e;
}

.error:hover {
    background-color: #f5c6cb;
}

.error .icon {
    fill: #e53e3e;
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    body {
        width: 100%;
  height: 100%;
  background-color: #111111;
  background-image: linear-gradient(
    32deg,
    rgba(8, 8, 8, 0.74) 30px,
    transparent
  );
  background-size: 60px 60px;
  background-position: -5px -5px;
}

    .success {
        background-color: #9bfff8;
        border-color: #5d9d99;
        color: #000000;
		font-family:Verdana, Geneva, Tahoma, sans-serif;
		font-weight:bolder;
		font-size:10px;
    }

    .info {
        background-color: #2b6cb0;
        border-color: #3182ce;
        color: #f7fafc;
    }

    .warning {
        background-color: #d69e2e;
        border-color: #f6ad55;
        color: #f7fafc;
    }

    .error {
        background-color: #e53e3e;
        border-color: #f56565;
        color: #f7fafc;
    }
}



/* General Responsive Styles */
@media (max-width: 768px) {
    .space-y-2 {
        padding: 0 10px; /* Add horizontal padding */
        grid-template-columns: 1fr; /* Stack items vertically */
    }

    .alert {
        max-width: 100%; /* Make alerts take full width */
        width: 100%; /* Ensure full width */
        flex-direction: column; /* Stack icon and text vertically */
        text-align: center; /* Center text */
        padding: 1rem; /* Add more padding for better spacing */
    }

    .alert svg {
        margin: 0 0 0.5rem 0; /* Add space below the icon */
    }

    .text {
        font-size: 1rem; /* Slightly larger text for readability */
    }
}

/* For very small devices (e.g., phones in portrait mode) */
@media (max-width: 480px) {
    .alert {
        font-size: 0.9rem; /* Adjust font size for small screens */
        padding: 0.75rem; /* Adjust padding */
    }

    .alert svg {
        width: 1rem; /* Reduce icon size slightly */
        height: 1rem;
    }
}

/* Keep the original dark mode adjustments */
@media (prefers-color-scheme: dark) {
    body {
        width: 100%;
        height: 100%;
        background-color: #111111;
        background-image: linear-gradient(
            32deg,
            rgba(8, 8, 8, 0.74) 30px,
            transparent
        );
        background-size: 60px 60px;
        background-position: -5px -5px;
    }

    .success {
        background-color: #9bfff8;
        border-color: #5d9d99;
        color: #000000;
        font-family: Verdana, Geneva, Tahoma, sans-serif;
        font-weight: bolder;
        font-size: 10px;
    }

    .info {
        background-color: #2b6cb0;
        border-color: #3182ce;
        color: #f7fafc;
    }

    .warning {
        background-color: #d69e2e;
        border-color: #f6ad55;
        color: #f7fafc;
    }

    .error {
        background-color: #e53e3e;
        border-color: #f56565;
        color: #f7fafc;
    }
}


.laptop{
	font-size: small;
	color: #fff756;
}


/* Responsive Adjustments */
@media (max-width: 768px) {
    .head-btn {
        display: flex;
        flex-direction: column; /* Stack buttons vertically */
        align-items: center; /* Center the buttons */
        gap: 10px; /* Add space between buttons */
        margin-bottom: 20px; /* Adjust bottom margin for smaller screens */
    }

    .btn-primary,
    .btn-default {
        width: 80%; /* Make buttons wider on smaller screens */
        padding: 12px 25px; /* Adjust padding for smaller screens */
        font-size: 16px; /* Slightly smaller font size */
        height: auto; /* Allow height to adjust based on content */
    }
}

@media (max-width: 480px) {
    .btn-primary,
    .btn-default {
        font-size: 14px; /* Adjust font size for very small screens */
        padding: 10px 20px; /* Reduce padding for better fit */
        height: 45px; /* Adjust button height */
    }
}