* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: 'Inter', sans-serif;
}
body {
  height: 100vh;
  background: #f2f2f2 !important;
  /*background-image: url("https://www.saralaa.com/public/assets/img/backgroundhome.jpg");*/
  /* background: linear-gradient(-45deg, #000000, #2f2f2f, #000000, #1a1a1a); */
  background-size: 400% 400%;
  /*animation: gradient 15s ease infinite;*/
}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

.typewriter  {
  overflow: hidden; /* Ensures the content is not revealed until the animation */
  border-right: .15em solid rgb(255, 255, 255); /* The typwriter cursor */
  white-space: nowrap; /* Keeps the content on a single line */
  margin: 0 auto; /* Gives that scrolling effect as the typing happens */
  letter-spacing: 0em; /* Adjust as needed */
  animation: 
    typing 5.5s steps(40, end),
    blink-caret .75s step-end infinite;
}

/* The typing effect */
@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

/* The typewriter cursor effect */
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: rgb(255, 255, 255); }
}

.text{
  outline: none;
  text-transform: uppercase;
  background: linear-gradient(135deg, #58aef7 60%, #a5f4de 70%, #ffde89 80%, #fe5c81 90%, #58aef7 100%);
  background-size: 400%;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent; 
  animation: animate 15s linear infinite;
}
@keyframes animate {
  to{
    background-position: 400%;
  }
}

.glossy{
/* From https://css.glass */
background: rgba(255, 255, 255, 0.1);
color: rgb(255, 255, 255);
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(5.2px);
-webkit-backdrop-filter: blur(5.2px);
}

iframe {
  min-height: 100%;
  width: 100%;
  min-height: 500px;
  height: 40vh;
  float: left;
}

/* animatation delays */
.animate__delay-05s {
  --animate-delay: 10s !important;
}
img.imgbtn:hover {
  border : solid 1px white ;
}

a:hover{
color:#fe6f82 !important;}

.bigtext{
font-weight:900;text-transform: uppercase;font-size: 50px;color: white;}

.bgblack {
	background-color: #000000;
}

.btnnew{
  background: transparent;
  color: white;
  border: 1px solid white;
  font-size: 16px;
  padding: 5px 20px;
  cursor: pointer;
  display: inline-block;
  margin: 5px 0px 0px 0px;
  -webkit-transition: all 0.4s;
	-moz-transition: all 0.4s;
	transition: all 0.4s;
}

.btn-1:hover{
  background-color: white;
  color: black;
  -webkit-transition: all 0.4s;
	-moz-transition: all 0.4s;
	transition: all 0.4s;
}
.btncenter {
  	display: flex;
  	justify-content: center;
  	align-items: center;
 }
.country {
	text-decoration:none;
  	color:white;
}
.get-ready{
	font-weight:200;
  	color: white;
  	text-transform: uppercase;
}
.title {
	margin-bottom: 30px;
  	text-align: center;
}
.paragraph {
	font-size: 14px;
  	text-align: center;
}
.mw80 {
	max-width: 80%;
}

@media only screen and (max-width: 600px) {
  .bigtext{
	font-weight:900;
    text-transform: uppercase;
    font-size: 17px;
    color: white;
  }
  .get-ready{
	font-weight:200;
  	color: white;
    font-size: 17px;
  	text-transform: uppercase;
  }
  .mf-15 {
  	font-size:10px !important; 
  }
  .mf-16 {
  	font-size:13px !important; 
  }
  .videomob {
  	border-radius: 20px;
    width: 100%;
    margin-top: 10px;
  }
  .m-10 {
	margin:10px;
  }
  .btn.btn-1 {
    width: 200px;
    height: 40px;
    font-size: 12px;
    margin: 0px 0px 10px 0px;
    padding: 0px 0px 0px 0px;
    align-items: center;
  	display: flex;
    justify-content: center;
    flex-wrap: wrap;
  }
  .btncenter {
  	display: flex;
  	justify-content: center;
  	align-items: center;
    margin-bottom: 50px;
  }
  .mw80 {
	 max-width: 100%;
  }
  .paragraph {
  	font-size: 13px;
  }
  .title {
  	font-size: 22px;
  }
  .maintitle {
  	font-weight:200;
    color: white; 
    text-transform: uppercase;
    text-align: center;
    font-size: 30px;
  }
}