/* font-famaly-hear */
@import url('https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@400;500;600;700&family=Quicksand:wght@300;400;500;600;700&display=swap');
/* font-famaly-hear-end */

/* root */
:root{
    --crimsonpro: 'Crimson Pro', sans-serif;
    --quicksand: 'Quicksand', serif;;

    --white-color: #fff;
    --black-color: #000;

    --primary: #237782;
    --secondary: #E5917E;

    --body-color: #2F364F;
    --heading-color: #2F364F;
    scroll-behavior: auto;
}
/* root */



/* defaults-css-start */
html,body{
    font-size: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
}
*,
*::before,
*::after{
    box-sizing: border-box;
}
body{
    margin: 0;
    padding: 0;
    line-height: 21px;
    font-family: var(--crimsonpro);
    font-size: 16px;
    font-weight: 400;
}
a,
button{
    transition: all 0.3s ease-out 0s;
    -webkit-transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    -ms-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
}

a:focus,
button:focus,
.btn:focus{
    outline: none;
}
button:focus,
input:focus,
input:focus,
textarea,
textarea:focus {
    outline: 0
}
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--quicksand);
    color: var(--heading-color);
    margin-top: 0px;
    font-style: normal;
    font-weight: 700;
    text-transform: normal;
}
h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
    color: inherit;
}
ul {
    margin: 0px;
    padding: 0px;
    list-style: none;
}
li {
    list-style: none
}
p {
    font-size: 16px;
    font-weight: normal;
    line-height: 21px;
    color: var(--body-color);
    margin-bottom: 15px;
}
label {
    color: var(--body-color);
    cursor: pointer;
    font-size: 16px;
    font-weight: 400;
}
*::-moz-selection {
    background: var(--secondary);
    color: var(--white-color);
    text-shadow: none;
}
::-moz-selection {
    background: var(--secondary);
    color: var(--white-color);
    text-shadow: none;
}
::selection {
    background: var(--secondary);
    color: var(--white-color);
    text-shadow: none;
}
*::-moz-placeholder {
    color: var(--body-color);
    font-size: 16px;
    opacity: 1;
}
*::placeholder {
    color: var(--body-color);
    font-size: 16px;
    opacity: 1;
}
/* defaults-css--end */


/* theme-css */

.text-primary{
    color: var(--primary) !important;
}
.text-secondary{
    color: var(--secondary) !important;
}


.body-bg{
    background-color: #FDD09B;
}
.bg-primary{
    background-color: var(--primary) !important;
}
.bg-secondary{
    background-color: var(--secondary) !important;
}


.btn{
  font-size: 20px;
  line-height: 20px;
  font-family: var(--quicksand);
  font-weight: 700;
  color: #F8F5F3;
  background: var(--primary);
  border: none;
  padding: 15px 25px;
  border-radius: 40px;
  border-top-left-radius: 0px;
}
.btn-primary{
    background-color: var(--primary);
    color: var(--white-color);
}
.btn-primary:hover{
    border-color: var(--secondary);
    background-color: var(--secondary);
    color: var(--white-color);
}



/* theme-css-end */





/* ======== header style start ============ */

.header .navbar {
  max-width: 1320px;
  margin: 0 auto;
  padding: 20px 0px;
}
.header .navbar .navbar-nav li.nav-item a.nav-link {
  font-size: 20px;
  font-family: var(--quicksand);
  font-weight: 700;
  color: var(--primary);
  line-height: 20px;
  display: block;
  border-bottom-right-radius: 22px;
  padding: 5px 22px;
  position: relative;
  overflow: hidden;
  z-index: 1;
}
.header .navbar .navbar-nav li.nav-item a.nav-link::after {
  position: absolute;
  left: 0px;
  top: 100%;
  width: 100%;
  height: 100%;
  content: "";
  background: var(--primary);
  transition: .3s;
  z-index: -1;
  border-radius: 30px;
  border-top-right-radius: 0px;
}
.header .navbar .navbar-nav li.nav-item a.nav-link:hover::after {
  top: 0px;
}
.header .navbar .navbar-nav li.nav-item a.nav-link:hover {
  color: var(--white-color);
}
.header .navbar .navbar-nav {
  gap: 10px;
}
.languages input {
  display: none;
}
.languages label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--quicksand);
  font-weight: 700;
  color: var(--primary);
}
.languages label span.ind {
  position: relative;
  height: 20px;
  width: 38px;
  background: #6EBFBA;
  border-radius: 23px;
}
.languages label span.ind::after {
  height: 14px;
  width: 14px;
  background: #237782;
  content: "";
  position: absolute;left: 3px;
  top: 3px;
  border-radius: 40px;
  transition: .3s;
}
.languages input:checked ~ label span.ind::after {
  left: auto;
  right: 3px;
}
.languages {
  margin-left: 30px !important;
}
/* ======== header style end ============ */


/* ======== hero style start ============ */



.hero-wrapper {
  max-width: 1135px;
  margin: 0 auto;
  display: flex;
  position: relative;
  align-items: flex-start;
}
.hero-content {
  flex: 0 0 auto;
  width: 443px;
}
.hero-content h1 {
  font-size: 44px;
  line-height: 1;
  margin-bottom: 20px;
  letter-spacing: -0.005em;
}
.hero-content p {
  font-size: 26px;
  line-height: 1.2;
  margin-bottom: 30px;
}
.hero-content h4 {
  line-height: 1.2;
  margin-bottom: 18px;
}
.checkbox input {
  display: none;
}
.checkbox label {
  display: flex;
  align-items: center;
  gap: 9px;
}
.checkbox label span.ind {
  height: 18px;
  width: 18px;
  border-radius: 2px;
  border: 1px solid #2F364F;
  position: relative;
  transition: .3s;
}
.checkbox input:checked ~ label span.ind {
    background: #2F364F;
}
.checkbox input:checked ~ label span.ind::after {
    opacity: 1;
    visibility: visible;
}


.checkbox label span.ind::after {
	position: absolute;
	left: 1px;
	top: 3px;
	width: 14px;
	height: 10px;
	background-image: url('../img/checkmark.svg');
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100%;
	content: "";
    opacity: 0;
    visibility: hidden;
}

.hero-content .checkbox {
  margin-bottom: 16px;
}

.hero-form {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 20px;
}
.form-control {
	height: 50px;
	border-radius: 50px;
	border-color: transparent;
	font-size: 18px;
	font-weight: 500;
	font-family: var(--quicksand);
	padding: 0px 20px;
}
.form-control:focus {
  outline: none;
  box-shadow: none;
  border-color: #237782;
}
.form-control:hover {
  box-shadow: 0px 0px 20px #23778266;
}
.hero-form button {
  font-size: 20px;
  line-height: 20px;
  font-family: var(--quicksand);
  font-weight: 700;
  color: #F8F5F3;
  background: var(--primary);
  border: none;
  padding: 15px 25px;
  border-radius: 40px;
  border-top-left-radius: 0px;
}
.hero-form button:hover {
    background-color: var(--secondary);
}
.hero-right {
  height: 610px;
  position: relative;
  flex-grow: 1;
  margin-top: 0px;
}
.hero-phone {
  position: absolute;
  max-height: 100%;
  right: 0px;
  bottom: 0px;
}
.hero-pod {
  max-width: 79%;
  position: absolute;
  right: 15%;
  bottom: 0px;
}
.shape {
  position: absolute;
}
.hero-shape-large {
  right: -70px;
  top: 50%;
  transform: translateY(-50%);
}
.hero-shape-small {
  left: 15%;
  top: 50%;
  transform: translateY(-33%);
}
.hero-launch {
  height: 174px;
  width: 174px;
  border: 3px solid #2F364F;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: absolute;
  left: 24%;
  top: 7%;
  z-index: 5;
}
.hero-launch p {
  font-size: 26px;
  font-family: var(--quicksand);
  font-weight: bold;
  line-height: 28px;
}
.section.hero {
  padding: 142px 0px 120px;
}

/* ======== hero style end ============ */


/* ======== sections style start ============ */

.info-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0px 60px;
  max-width: 1440px;
  margin: 0 auto;
}
.info-imges {
  flex: 0 0 auto;
  width: 548px;
  position: relative;
}
.info-title {
  flex: 0 0 auto;
  width: 203px;
}
.info-hub {
  max-width: 425px;
  position: relative;
}
.info-pod {
  max-width: 202px;
  position: absolute;
  right: -98px;
  bottom: -40px;
}
.shape-info-large {
  right: 0px;
  top: 18%;
}
.shape-info-small {
  left: 3%;
  top: -18%;
  max-width: 240px;
}
.info-item {
  max-width: 424px;
}
.info-contents {
  flex-grow: 1;
}
.info-item h3 {
  font-size: 26px;
  line-height: 28px;
  padding-bottom: 10px;
  position: relative;
}
.info-item h3::after {
  position: absolute;
  left: 0px;
  bottom: 0px;
  width: 62px;
  background: var(--secondary);
  content: "";
  height: 3px;
}
.info-item p {
  font-size: 24px;
  line-height: 28px;
  margin-bottom: 0px;
}
.info-item {
  margin-bottom: 50px;
}
.info-item:nth-child(2) {
  margin-left: 110px;
}
.info-item:nth-child(3) {
  margin-left: 252px;
}
.section.info {
	padding-bottom: 55px;
}
/* ======== sections style end ============ */


/* ======== sections style start ============ */

.section.conntect {
	padding: 55px 0px 100px;
}
.conntect-wrapper {
	display: flex;
	align-items: flex-start;
	max-width: 1440px;
	margin: 0 auto;
	position: relative;
	justify-content: space-between;
}
.connect-text h2{
    font-size: 60px;
    line-height: 1;
    letter-spacing: 0.02em;
    color:#2F364F;
  -webkit-text-fill-color: transparent; 
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color:#2F364F;
}
.connect-text span {
	margin-left: 38px;
    display: block;
}
.connect-thumb {
  position: relative;
}
.connect-thumb{
    width: 100%;
    object-fit: cover;
}

.connect-thumb.connect-thumb-1 {
    z-index: 2;
    width: 487px;
    flex: 0 0 auto;
}
.connect-thumb.connect-thumb-2 {
  top: 96px;
  left: -56px;
  z-index: 1;
  flex: 0 0 auto;
  width: 371px;
}
.connect-thumb.connect-thumb-3 {
  z-index: 2;
  width: 563px;
  flex: 0 0 auto;
}
.connect-shape-1 {
	right: 31%;
	bottom: -37px;
}
.connect-shape-2 {
	right: 26%;
	bottom: -40px;
}
.connect-shape-3 {
	left: -100px;
	top: -102px;
	z-index: 3;
}
.connect-text {
	position: absolute;
}
.connect-text.connect-text-1 {
	left: 42%;
	z-index: 3;
	top: -46px;
}
.connect-text.connect-text-2 {
	top: 92%;
	left: 50px;
	z-index: 4;
}
.connect-thumb img {
	max-width: 100%;
	width: 100%;
	object-fit: cover;
	object-position: center;
}

.conntect.fixed {
	position: fixed;
	top: 0;
	left: 0;
  width: 100%;
  pointer-events: none;
  z-index: 2;
}
/* ======== sections style end ============ */


/* ======== sections style start ============ */

.section.touch {
	padding: 20px 0px 0px;
  position: relative;
  z-index: 3;
}
.touch-contents {
	max-width: 538px;
	margin: 0 auto;
}

.touch-header p {
  line-height: 28px;
  margin-bottom: 0px;
}
.touch-header {
  margin-bottom: 40px;
}
.input-box {
  margin-bottom: 30px;
  position: relative;
}

.input-box .form-control::placeholder {
  font-size: 18px;
  color: #2F364F;
  font-family: var(--quicksand);
  line-height: 18px;
}
.input-box textarea.form-control {
  width: 100%;
  resize: none;
  height: 112px;
  border-radius: 20px;
  padding-top: 15px;
  padding-bottom: 10px;
}
.label-float input:focus::placeholder{
    opacity: 0;
    visibility: hidden;
}


.label-float label {
	pointer-events: none;
	position: absolute;
	top: calc(50% - 15px);
	left: 21px;
	transition: all .2s linear;
	-webkit-transition: all .2s linear;
	-moz-transition: all .2s linear;
	padding: 0px;
	box-sizing: border-box;
  opacity: 0;
  font-size: 12px;
  color: #2F364F;
  text-transform: uppercase;
  font-family: var(--quicksand);
  visibility: hidden;
}
.label-float input:focus + label,
.label-float input:not(:placeholder-shown) + label{
  font-size: 13px;
  top: calc(50% - 45px);
  color: #3951b2;
  opacity: 1;
  transition: .2s;
  visibility: visible;
}
.label-float textarea:focus + label,
.label-float textarea:not(:placeholder-shown) + label{
  font-size: 13px;
  top: calc(50% - 74px);
  color: #3951b2;
  opacity: 1;
  transition: .2s;
  visibility: visible;
}



.touch-contents .checkbox {
  margin-bottom: 20px;
}
.sent-message-text {
  opacity: 0;
  visibility: hidden;
  display: none;
}

.sent-message .input-box textarea::placeholder {
	opacity: 0;
}
.sent-message .input-box span.sent-message-text {
  opacity: 1;
  visibility: visible;
	position: absolute;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	line-height: 28px;
	font-weight: bold;
	font-family: var(--quicksand);
}
.form-submit .btn{
  min-width: 190px;
}
.sent-message .btn span.icon-success {
	opacity: 1;
	visibility: visible;
	display: block;
}
.sent-message .btn{
  background: #2F364F;
  padding: 6px 0px;
}
.btn span.icon-success {
	opacity: 0;
	visibility: hidden;
	display: none;
}
.sent-message .btn span.txt {
	opacity: 0;
	visibility: hidden;
	display: none;
}

.notValid .input-box :invalid~label{
  font-size: 14px;
  top: -18px;
  opacity: 1;
  visibility: visible;
}
.notValid .input-box textarea:invalid::placeholder,
.notValid .input-box input:invalid::placeholder {
opacity: 0;
}

.notValid-text {
	position: absolute;
	left: 16px;
	top: 17px;
	display: none;
	align-items: center;
	gap: 4px;
	font-size: 14px;
	font-family: var(--quicksand);
	color: #A71111;
	line-height: 1;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.input-box textarea:focus ~ .notValid-text,
.input-box textarea:not(:placeholder-shown) ~ .notValid-text,
.input-box input:focus ~ .notValid-text,
.input-box input:not(:placeholder-shown) ~ .notValid-text{
  opacity: 0;
  visibility: hidden;
}

input:focus{
  border-color: #237782;
  filter: drop-shadow(0px 0px 15px rgba(35, 119, 130, 0.7));
}

.notValid :invalid~.notValid-text  {
  opacity: 1;
  visibility: visible;
  display: flex;
}


.notValid .checkbox :invalid~label span.ind{
  border-color: #A71111;
}
.notValid .checkbox input:checked ~ :invalid~label span.ind{
  background-color: #A71111;
}

.notValid .checkbox :invalid~label span.text{
  color: #A71111;
}


.sent-message .label-float input::placeholder{
  opacity: 0;
  visibility: hidden;
}

.sent-message .label-float input ~ label{
  top: calc(50% - 45px);
  opacity: 1;
  visibility: visible;
}

.success-text {
	font-size: 18px;
	font-family: var(--quicksand);
	font-weight: 700;
	line-height: 1;
	position: absolute;
	left: 18px;
	top: 15px;
}


/* ======== sections style end ============ */





/* ======== footer style start ============ */

.footer{
  position: relative;
  z-index: 4;
}
.footer-wrapper {
  max-width: 1380px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  padding: 40px 50px;
  margin-bottom: 35px;
  margin-top: -92px;
  position: relative;
}
.footer-links ul {
  column-count: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.footer-social {
  display: flex;
  align-items: center;
  gap: 14px;
}
.footer-social a {
  display: block;
  transition: .3s;
}
.footer-social a:hover {
  transform: translateY(-5px);
}

.footer-links {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 690px;
  width: 100%;
}
.links-item a {
  display: block;
}
.footer-links a {
  display: block;
  text-decoration: none;
  font-size: 16px;
  line-height: 21px;
}

/* ======== footer style end ============ */


/* update-css-20-04-2023 */
.animate-arrow {
	position: absolute;
	left: -100px;
	bottom: 0px;
}
.scroll {
	 position: relative;
	 margin: auto;
	 text-align: center;
	 height: 44px;
	 overflow: hidden;
}
 .scroll__line {
	 position: absolute;
	 top: 0;
	 left: 46%;
	 display: block;
	 width: 3px;
	 height: 100%;
	 z-index: 10;
	 background-color: #237782;
	 animation: scroll 2.4s infinite normal;
}
 .scroll__arrow {
	 display: block;
	 position: relative;
	 z-index: 111;
	 padding-left: 1px;
	 top: -14px;
}
 @keyframes scroll {
	 0% {
		 transform: translate3d(0, -100%, 0);
	}
	 15% {
		 transform: translate3d(0, -95%, 0);
	}
	 85% {
		 transform: translate3d(0, 95%, 0);
	}
	 100% {
		 transform: translate3d(0, 100%, 0);
	}
}




/* offcavas-menu */

.offcanvas-wrapper {
  position: fixed;
  top: 0px;
  width: 100%;
  height: 100%;
  background: #fff;
  z-index: 111;
  padding: 32px 20px;
  transition: .3s;
  left: 100%;
}
.offcanvas-wrapper.active{
  left: 0px;
}

.offcanvas-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 86px;
}
.offcanvas-logo a img {
  max-width: 83px;
}
.offcanvas-close .close {
  display: block;
  cursor: pointer;
}
.offcanvas-nav ul li a {
  display: block;
  text-decoration: none;
  font-size: 36px;
  line-height: 38px;
  color: #237782;
  letter-spacing: -0.005em;
  font-family: var(--quicksand);
  font-weight: 700;
  padding: 13px 0px;
}
.offcanvas-nav .languages {
  margin-left: 0px !important;
  margin-top: 30px;
}
.offcanvas-nav {
	margin-bottom: 34px;
}
.offcanvas-meta-link a {
  display: block;
  color: #237782;
  font-size: 18px;
  line-height: 25px;
  margin-bottom: 5px;
  text-decoration: none;
  font-weight: 600;
}
.offcanvas-meta-link {
  margin-bottom: 10px;
}
.offcanvas-social {
  display: flex;
  align-items: center;
  gap: 9px;
}
.offcanvas-shap {
	position: absolute;
	bottom: 0px;
	right: 38px;
}
/* offcavas-menu-end */
 

/* subscribe-box */


.subscribe-box {
  max-width: 598px;
  background: #E8E3E0;
  position: fixed;
  right: -548px;
  /* right: 0px; */
  bottom: -1px;
  z-index: 111;
  padding: 54px 67px 51px 111px;
  overflow: hidden;
  transition: .5s ease;
	transform: translate(3em);
	opacity: 0;
	pointer-events: none;
  border-top-left-radius: 30px;
}

.subscribe-box.show {
	transform: translate(0);
	opacity: 1;
	pointer-events: all;
  animation: jumpLittle .5s ease .1s;
}
@keyframes jumpLittle {
  0%, 100%{
    transform: translate(0);
  }
  50%{
    transform: translate(-1em);
  }
}

.subscribe-box.active {
  right: 0px;
}
.subscribe-box-toggle {
	height: 50px;
	display: flex;
	align-items: center;
	padding: 17px;
	background: #2F364F;
	font-size: 20px;
	line-height: 1;
	color: #F8F5F3;
	font-family: var(--quicksand);
	font-weight: 700;
	position: absolute;
	left: -274px;
	transform: rotate(270deg);
	width: 100%;
	top: -17px;
  /* cursor: pointer; */
}


.subscripbe-form .checkbox {
	margin-bottom: 20px;
}
.subscribe-content h3 {
	font-size: 26px;
	line-height: 28px;
	margin-bottom: 28px;
}
.subscrib-close {
	position: absolute;
	right: 68px;
	top: 17px;
}

/* subscribe-box-end */


/* update-css-20-04-2023-end */



/* preloader */
.pages-wrapper{
  overflow: hidden;
}
.preloader {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: .5s ease;
  overflow: hidden;
}
.preloader {
  transition: 1s ease;
}
body.loaded .pages{
  animation: slideUpPage 1s ease forwards;
}
@keyframes slideUpPage {
  from{
    transform: translate(0, 100vh);
  }
  to{
    transform: translate(0, 0);
  }
}
body.loaded .preloader {
	transform: translate(0, -100vh);
  opacity: 0;
}
.preloader .cubes {
  display: flex;
  gap: 2em;
}
.preloader .cubes div {
  height: 12em;
  width: 12em;
  border-radius: 6em 6em 6em 0;
  transition: .3s ease;
}



.preloader .cubes div:nth-child(1) {
  position: relative;
  transform: translate(14em);
  background-color: #FCBC70;
  animation: littleUp 6s ease infinite;
}
@keyframes littleUp {
  0%{
    top: 10em;
    opacity: 0;
  }
  15%{
    top: 0vh;
    opacity: 1;    
    transform: translate(14em);
  }
  30%{
    transform: translate(0em) rotate(90deg);
  }
  45%{
    transform: translate(0em) rotate(180deg);
  }
  60%{
    transform: translate(0em) rotate(270deg);
  }
  75%{
    transform: translate(0em) rotate(360deg);
  }
  100%{
    transform: translate(0em, 4em) rotate(450deg);
  }
}

.preloader .cubes div:nth-child(2) {
  position: relative;
  transform: translate(14em, 6em) rotate(-90deg);
  background-color: #E5917E;
  animation: littleUp2 6s ease infinite;
}
@keyframes littleUp2 {
  0%{
    top: 10em;
    opacity: 0;
  }
  15%{
    top: 0vh;
    opacity: 1;    
    transform: translate(14em) rotate(-90deg);
  }
  30%{
    transform: translate(0em) rotate(90deg);
  }
  45%{
    transform: translate(0em) rotate(180deg);
  }
  60%{
    transform: translate(0em) rotate(270deg);
  }
  75%{
    transform: translate(0em) rotate(360deg);
  }
  100%{
    transform: translate(0em, 4em) rotate(450deg);
  }
}

.preloader .cubes div:nth-child(3) {
  transform: translate(-14em, 20em);
  border-radius: 0 6em 6em 6em;
  background-color: #FCBC70;
  position: relative;
  animation: littleUp3 6s ease infinite;
}
.preloader .cubes div:nth-child(3)::after {
  animation: littleUp3Sub 1s ease forwards 1s;
}
@keyframes littleUp3 {
  0%{
    top: 10em;
    opacity: 0;
  }
  15%{
    top: 0vh;
    opacity: 1;    
    transform: translate(-14em, 14em);
  }
  30%{
    transform: translate(0em);
  }
  45%{
    transform: translate(0em) rotate(90deg);
  }
  60%{
    transform: translate(0em) rotate(180deg);
  }
  75%{
    transform: translate(0em) rotate(270deg);
  }
  100%{
    transform: translate(0em, 4em) rotate(360deg);
    background-color: #2F364F;
  }
}
@keyframes littleUp3Sub {
  100%{
    height: 0;
    opacity: 0;
  }
}

.preloader .cubes div:nth-child(4) {
  border-radius: 6em 0 6em 6em;
  transform: translate(-14em, 24em);
  background-color: #E5917E;
  position: relative;
  animation: littleUp4 6s ease infinite;
}
.preloader .cubes div:nth-child(4)::after {
  animation: littleUp4Sub 1s ease forwards 1s;
}
@keyframes littleUp4 {
  0%{
    top: 10em;
    opacity: 0;
  }
  15%{
    top: 0vh;
    opacity: 1;    
    transform: translate(-14em, 14em);
  }
  30%{
    transform: translate(0em) rotate(-90deg);
  }
  45%{
    transform: translate(0em) rotate(0deg);
  }
  60%{
    transform: translate(0em) rotate(90deg);
  }
  75%{
    transform: translate(0em) rotate(180deg);
  }
  100%{
    transform: translate(0em, 4em) rotate(270deg);
    background-color: #237782;
  }
}
@keyframes littleUp4Sub {
  100%{
    height: 0;
    opacity: 0;
  }
}


.preloader .cubes div:nth-child(3)::after,
.preloader .cubes div:nth-child(4)::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 52vh;
  background-color: inherit;
  transition: inherit;
  border-radius: 6em;
}