@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Tenor+Sans&display=swap');


body{font-family: 'Poppins', sans-serif; font-size: 14px; background: #fff;}


/* html, body{} */





@font-face {
  font-family: 'icomoon';
  src:  url('../fonts/icomoon.eot?fvtpk0');
  src:  url('../fonts/icomoon.eot?fvtpk0#iefix') format('embedded-opentype'),
    url('../fonts/icomoon.ttf?fvtpk0') format('truetype'),
    url('../fonts/icomoon.woff?fvtpk0') format('woff'),
    url('../fonts/icomoon.svg?fvtpk0#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-edit:before {
  content: "\e91a";
}
.icon-usern:before {
  content: "\e91b";
}
.icon-sendarw:before {
  content: "\e91c";
}
.icon-chosedt:before {
  content: "\e90e";
}
.icon-menratng:before {
  content: "\e90f";
}
.icon-handshake:before {
  content: "\e910";
}
.icon-yutb:before {
  content: "\e911";
}
.icon-clndr:before {
  content: "\e912";
}
.icon-instag:before {
  content: "\e913";
}
.icon-rarw:before {
  content: "\e914";
}
.icon-scrap-icon:before {
  content: "\e915";
}
.icon-chk .path1:before {
  content: "\e917";
}
.icon-chk .path2:before {
  content: "\e918";
  margin-left: -1em;
}
.icon-rgstr:before {
  content: "\e919";
}
.icon-drp:before {
  content: "\e90d";
}
.icon-fb:before {
  content: "\e903";
}
.icon-insta:before {
  content: "\e905";
}
.icon-join:before {
  content: "\e906";
}
.icon-lftarw:before {
  content: "\e907";
}
.icon-rtarw:before {
  content: "\e908";
}
.icon-srch:before {
  content: "\e909";
}
.icon-sxty:before {
  content: "\e90a";
}
.icon-twtr:before {
  content: "\e90b";
}
.icon-user:before {
  content: "\e90c";
}
.icon-eml:before {
  content: "\e900";
}
.icon-cll:before {
  content: "\e901";
}
.icon-loctn:before {
  content: "\e902";
}
.icon-segment:before {
  content: "\e916";
}
.icon-Star:before {
  content: "\e904";
}
.icon-star-empty:before {
  content: "\e9d7";
}




@-webkit-keyframes stickySlideDown {
from {
transform:translateY(-100%);
}
to {
transform:translateY(0);
}
}
@keyframes stickySlideDown {
from {
transform:translateY(-100%);
}
to {
transform:translateY(0);
}
}
:focus{outline: none !important;}
button:focus{outline: none !important}

img{max-width: 100%}

.wrapper {
	max-width: 1950px;
	position: relative;
	margin: 0 auto;
	height: 100%;
  overflow: hidden;
}
.carrun{
  position: absolute;
  max-width: 184px;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
}
.carrun::before {
	width: 2px;
	background: #CDCDCD;
	content: '';
	height: 100%;
	position: absolute;
	left: 32%;
}
.carpic{width: 100%;text-align: center;}
.carpic img{
    width: auto;
    height: auto;
    max-width: 100%;
    position: relative;
    animation: topToBottom 3s linear infinite;
    margin-bottom: 400px;
  }

  @keyframes topToBottom {
    0% {
      transform: translateY(-100%);
    }
    100% {
      transform: translateY(100%);
    }
  }

.headercontainer{padding: 10px 0px;
  position: absolute;
  width: 100%;
	z-index: 9;
}
.tophead {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.headercontainer .logoouter{ max-width: 271px; width: 100%; padding: 0px 0;position: relative;}
.headercontainer .logoouter .logo{float: left; width: 100%;}
.headercontainer .logoouter .logo img{max-width: 100%; max-height: 100%;}
.headercontainer .topmailbx{float: left; width: 100%; padding-bottom: 20px; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-pack: end; justify-content: flex-end; -ms-flex-align: center; align-items: center;}
.headercontainer .topmailbx a{color: #1E1E1E; font-size: 15px; font-weight: 300; letter-spacing: 1px; text-decoration: none;}
.headercontainer .topmailbx a + a{margin-left: 35px;}
.headercontainer .topmailbx a i{display: inline-block; vertical-align: middle; margin-right: 5px;}
.headercontainer .topmailbx a span{display: inline-block; vertical-align: middle;}
.headercontainer .navigation{width: auto;}
.headercontainer .navigation .navigationbox{float: left;}
.headercontainer .navigation .sf-menu-outer{float: left; width: 100%; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-pack: end; justify-content: flex-end; -ms-flex-align: center; align-items: center;}
.headercontainer .navigationouter{float: left; width: 100%; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-pack: end; justify-content: flex-end; -ms-flex-align: center; align-items: center; position: relative;}

.headercontainer .navigation .sf-menu{float: left; margin: 0px; padding: 0px;}
.headercontainer .navigation .sf-menu > li{float: none; display: inline-block; margin: 0px 20px;}
.headercontainer .navigation .sf-menu > li a{padding-top: 10px; padding-bottom: 10px; position: relative; font-family: "Raleway", sans-serif; color: #175300; text-transform: capitalize; display: inline-flex; align-items: center; font-size: 18px; font-weight: 600; text-decoration: none; -webkit-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out;}


.headercontainer .navigation .sf-menu > li.active a{color: #09B2A9;}
.headercontainer .navigation .sf-menu > li.active a:after{opacity: 1;}
.headercontainer .navigation .sf-menu > li a:hover{color: #09B2A9;}

.headercontainer .loginbtx {margin-right: 10px;}
.headercontainer .loginbtx a {
	padding: 12px 15px 12px 10px;
	border: none;
	border-radius: 10px;
	font-size: 16px;
  	font-weight: 600;
	background: #B87332;
	color: #fff;
	position: relative;
	font-family: "Raleway", sans-serif;
	text-decoration: none;
  
}

.headercontainer .loginbtx a span{margin-right: 4px;}
.headercontainer .loginbtx a:hover{color: #000;}
.headercontainer .loginbtx a i{color: #fff;}
.headercontainer .loginbtx a em{font-style: normal;}
.headercontainer .loginbtx span{color: #fff; padding: 0px 6px;}

.headcl{
	color: #175300;
	font-family: "Raleway", sans-serif;
	font-size: 18px;
	font-style: normal;
	font-weight: 600;
	line-height: 26px;
	text-decoration: none;
	display: flex;
	align-items: center;
	gap: 6px;
}
.headcl em{font-style: normal;}

.headcl i {
	width: 39px;
	height: 39px;
	border-radius: 100%;
	/* background: #fff; */
	border: 1px solid #B6C7AF;
	padding: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 5px;
}
.headcl i::before {
	width: 48px;
	height: 48px;
	border: 1px solid #B6C7AF;
	border-radius: 100%;
	content: '';
	position: absolute;
}
.headcl i span{
	background: #247300;width: 100%;height: 100%;border-radius: 100%;color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
}
.hedrght{display: flex; align-items: center;gap: 30px;}


/* dropdown menu css start */
.headercontainer .navigation ul li ul li{width: 100%;}
.headercontainer .navigation ul li ul li a{width: 100%; font-size: 13px;}
.sf-menu, .sf-menu{ margin: 0; padding: 0; list-style: none; }
.sf-menu li { position: relative; }
.sf-menu ul { position: absolute; top: 100%; right: 0px; z-index: 999; padding: 0px; margin: 0px; }
.sf-menu ul::before {
	content: '';
	position: absolute;
	right: 13px;
	top: -10px;
	background: url('../images/mnuarw.png') no-repeat;
	width: 12px;
	height: 11.5px;
}
.sf-menu > li {float: left;}
.sf-menu a { display: block; position: relative; }
.sf-menu ul ul { top: 0; left: 100%; }
/* DEMO SKIN */
.sf-menu{float: left;}
.sf-menu li ul li a{background: 0 0; color: #B87331; text-align: left; padding: 12px 12px;}
.sf-menu li ul li + li{border-top: 1px solid #eaeaea;}
.sf-menu li ul li a:hover{background: #000; color: #ffffff; }
.sf-menu a{text-decoration: none; zoom: 1; }
.sf-menu a{color: #13a; }
.sf-menu li{-webkit-transition: background .2s; transition: background .2s; }
.sf-menu li:hover, .sf-menu li.sfHover {-webkit-transition: none; transition: none; }
.headercontainer .navigation .sf-menu>li>a:hover{color: #B87332; background: 0 0;}
.headercontainer .navigation .sf-menu>li:hover a{background: transparent; color: #09B2A9;}
.headercontainer .navigation .sf-menu>li ul li:hover a{background: none !important; color: #303030;}
.headercontainer .navigation .sf-menu>li:hover ul li a{color: #000000;}
.headercontainer .navigation .sf-menu>li ul li a{background: none !important; color: #ffffff; -webkit-transition: 0.4s ease-in-out; -moz-transition: 0.4s ease-in-out; -ms-transition: 0.4s ease-in-out; -o-transition: 0.4s ease-in-out; transition: 0.4s ease-in-out;}
.headercontainer .navigation .sf-menu>li ul li a:hover{background: #3498db !important; color: #ffffff;}
.headercontainer .navigation .sf-menu>li ul li.active a{background: #3498db !important; color: #ffffff;}
.headercontainer .navigation .sf-menu>li ul li a{background: none; font-size: 16px; text-transform: capitalize;}
.sf-arrows .sf-with-ul { padding-right: 30px !important; }
/*.sf-arrows .sf-with-ul:after { content: '\f107'; position: absolute; font-family: 'FontAwesome'; right: 20px; height: 0; width: 0; }
.sf-arrows > li > .sf-with-ul { padding-right: 30px !important; }
.sf-arrows > li > .sf-with-ul:focus:after, .sf-arrows > li:hover > .sf-with-ul:after, .sf-arrows > .sfHover > .sf-with-ul:after { }
.sf-arrows ul .sf-with-ul:after { content: '\f105'; }
.sf-arrows ul li > .sf-with-ul:focus:after, .sf-arrows ul li:hover > .sf-with-ul:after, .sf-arrows ul .sfHover > .sf-with-ul:after { }

*/


/* Dropdown Nav */
.headercontainer .navigation .sf-menu > li{position: relative;}
/*.headercontainer .navigation ul li.parent > a:after{right: 1px;}*/

/*.headercontainer .navigation .sf-menu > li ul{background: #C70B0A; -webkit-border-radius: 0px; border-radius: 0px;}*/
.headercontainer .navigation .sf-menu > li ul li{list-style: none;}
.headercontainer .navigation .sf-menu > li ul li a{color: #28374E;}
.headercontainer .navigation .sf-menu>li:hover ul li a{color:#28374E;}
.headercontainer .navigation .sf-menu > li ul li + li{border-color: #E4E4E4}
.headercontainer .navigation .sf-menu>li ul li a:hover{background: #fff !important; color:#09B2A9;}

.headercontainer .navigation ul li.parent > a::after {
	font-family: 'icomoon';
	content: "\e90d";
	pointer-events: none;
	position: static;
	right: 0;
	bottom: -15px;
	color: #28374E;
	line-height: 100%;
	font-size: 5px;
	left: 0;
	margin-left: 5px;
	text-align: center;
}
.headercontainer .navigation .sf-menu > li:hover ul li a::before{
	content: '';
	width: 8px;
	height: 8px;
	border-radius: 100%;
	background: #09B2A9;
	position: relative;
	margin-right: 8px;
}


.sub-menu-toggle{
    display:none;
}




.banner-sec{
	width: 100%;
	position: relative;
}
.banner-sec .owl-dots{
    display:none;
}

.banner-caption{
	width: 100%;
	position: absolute;
	left: 0;
	bottom: 50px;
}

.banner-caption h2{
	 font-family: "Tenor Sans", sans-serif;
	 color: #fff;
	font-size:50px;
	font-weight: 400;
	line-height: 60px;
	letter-spacing: -0.02em;
	content: #fff;
	max-width: 664px;
}


.about-sec{
	width: 100%;
	padding: 50px 0;
	background: url(../images/abutbg.jpg) no-repeat;
	background-size: cover;
}

.about-sec h3{
font-family: "Tenor Sans", sans-serif;
font-size: 50px;
font-weight: 400;
line-height: 60px;
letter-spacing: -0.04em;
color: #fff;
}
.about-sec h6{
font-size: 22px;
font-weight: 600;
line-height: 40px;
letter-spacing: -0.02em;
color: #fff;
}
.about-sec p{
font-size: 22px;
font-weight: 400;
line-height: 40px;
letter-spacing: -0.02em;
color: #fff;
}

.abut-pic{
	text-align: center;
}

.abut-pic img{
	max-width: 476px;
	margin: 0 auto;
	width: 100%;
	border-radius: 230px;
	padding: 15px;
	border: 1px dashed #fff;
}


.vision-sec{
	padding: 50px 0;
}

.vision-sec h2{
  font-family: "Tenor Sans", sans-serif;
	font-size: 50px;
	font-weight: 400;
	line-height: 60px;
	letter-spacing: -0.04em;
	text-align: left;
	color: #28374E;
}
.vision-sec p{
font-size: 22px;
font-weight: 400;
line-height: 40px;
letter-spacing: -0.02em;
color: #28374E;
}
.vision-pic img{
	border-radius: 40px;
}
.visntxt{
	padding-right: 40px;
	margin-bottom:15px;
}









.ditintive-sec{
	padding:100px 0 80px 0;
	position: relative;
}
.distinlogo {
	position: absolute;
	right: 200px;
	top: 50px;
	max-width: 150px;
}


.distin-pic h2{
 font-family: "Tenor Sans", sans-serif;
font-size: 50px;
font-weight: 400;
line-height: 60px;
letter-spacing: -0.04em;
text-align: left;
color: #28374E;
margin-bottom: 20px;
}
.distin-pic img{
	border-radius: 40px;
}
.disticdetls {
	padding-top: 70px;
}

.disticdetls strong{
font-size: 22px;
font-weight: 600;
line-height: 40px;
letter-spacing: -0.02em;
color: #28374E;
display: block;
margin-bottom: 12px;
}
.disticdetls p{
font-size: 22px;
font-weight: 400;
line-height: 40px;
letter-spacing: -0.02em;
}



.sailing-sec{
	width: 100%;
	padding: 120px 0;
	background: url(../images/seabg.png) no-repeat;
	background-size: cover;
	position: relative;
}
.sailingtxt{
	max-width: 1070px;
	margin: 0 auto;
}

.sailing-sec h2 {
	font-family: "Tenor Sans", sans-serif;
	font-size: 50px;
	font-weight: 400;
	line-height: 60px;
	letter-spacing: -0.04em;
	text-align: center;
	color: #fff;
	max-width: 80%;
	margin: 0 auto;
}
.sailing-sec p{
	font-size: 22px;
	font-weight: 400;
	line-height: 40px;
	letter-spacing: -0.02em;
	text-align: center;
	color: #fff;
	margin-top: 12px;
}
.angelwtr{
	position: absolute;
  right: 0;
  top: -294px;
  max-width: 350px;
}




.fleet-sec{
	padding: 50px 0;
	background: #F3F5F7;
}
.fleet-sec h2{
	font-family: "Tenor Sans", sans-serif;
	font-size: 50px;
	font-weight: 400;
	line-height: 60px;
	letter-spacing: -0.04em;
	text-align: center;
	color: #28374E;
}


.fleet-table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0;
            margin: 20px 0;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            border-radius: 15px;
            overflow: hidden;
        }
        .fleet-table thead {
            color: #fff;
        }
        .fleet-table th, .fleet-table td {
            padding: 15px;
            text-align: left;
            border: 1px solid #1C76BB;
        }
        .fleet-table th {
            background-color: #1C76BB;
            border-color: #6ea5cf;
            font-weight: 600;
        }
        /*.fleet-table td {*/
        /*    font-weight: 500;*/
        /*}*/
        .fleet-table tbody tr:nth-child(even) {
            background-color: #F3F5F7;
        }
        .icon-cell {
            display: flex;
            align-items: center;
        }
        .icon-cell img {
            margin-right: 10px;
        }
.shipic {
	width: 60px;
	height: 60px;
	border-radius: 100%;
	background: #09B2A9;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto;
}
.fleet-table tr td:first-child{
	border-right: none;
	max-width: 80px;
	/*text-align: center;*/
}
/*.fleet-table tr:first-child td:first-child{*/
/*	border-radius: 15px 0 0 0;*/
/*}*/
.fleet-table tr:last-child td:first-child{
	border-radius: 0 0 0 15px;
}
.fleet-table tr:last-child td:last-child{
	border-radius: 0 0 15px 0;
}
/*.fleet-table tr td:nth-child(2){*/
/*	border-left: none;*/
/*}*/
/*.fleet-table tr th:first-child{*/
/*	border: none;*/
/*	background: none;*/
/*}*/
/*.fleet-table th:nth-child(2) {*/
/*	border-radius: 15px 0 0 0;*/
/*}*/



.sailing-across{
	padding: 80px 0;
}

.sailing-across h2{
font-family: "Tenor Sans", sans-serif;
font-size: 50px;
font-weight: 400;
line-height: 60px;
letter-spacing: -0.04em;
text-align: left;
color: #28374E;
margin: 100px 0 0;
}

.sailing-across .container .row > div{
    margin-bottom:20px;
}

.grid-wrapper {
	display: flex;
	gap: 30px;
	flex-wrap: wrap;
}
.sailing-across img{
	border-radius: 5px;
}
.image-item {
	width: 100%;
	height: 350px;
}

.image-item img{
    object-fit: cover;
  width: 100%;
  height: 100%;
}







.footer-contact{
	background: url(../images/ftrsea.png) no-repeat;
	padding: 0 0;
	background-size: cover;
}

.contact-info {
	overflow: hidden;
	padding: 60px 174px;
}
.contact-info h3{
	font-family: "Tenor Sans", sans-serif;
	font-size: 50px;
	font-weight: 400;
	line-height: 60px;
	letter-spacing: -0.04em;
	text-align: left;
	color: #fff;
}

.contact-info h5{
font-family: "Tenor Sans", sans-serif;
font-size: 32px;
font-weight: 400;
line-height: 40px;
letter-spacing: -0.04em;
text-align: left;
color: #fff;
margin: 25px 0;
}

.contact-info p{
font-size: 20px;
font-weight: 400;
line-height: 32px;
letter-spacing: -0.02em;
text-align: left;
color: #fff;
}

.contact-from{
	background: rgba(9, 178, 169, 0.5);
	height: 100%;
	width: 100%;
	padding: 50px;
}

.cntctxt{
	color: #fff;
font-size: 20px;
font-weight: 400;
line-height: 28px;
letter-spacing: -0.02em;
text-align: left;
color: #fff;
overflow: hidden;
text-decoration: none;
}
.cntctxt:hover{
    color: #fff;
}

.cntctdetl {
	margin: 15px 0;
	display: block;
	float: left;
	width: 100%;
}

.cntctdetl span:first-child {
	color: #09B2A9;
	margin-right: 10px;
	float: left;
	margin-top: 9px;
}


.contact-from{
	padding: 60px;
	overflow: hidden;
}

.contact-from h3{
	font-family: "Tenor Sans", sans-serif;
	font-size: 50px;
	font-weight: 400;
	line-height: 60px;
	letter-spacing: -0.04em;
	text-align: left;
	color: #fff;	
}

.input-inner{
	position: relative;
	margin: 10px 0;
	overflow: hidden;
}
.input-inner br{
    display:none;
}
.input-inner p {
	margin: 0 !important;
	width: 100%;
}
.input-inner input {
	height: 60px;
	width: 100%;
	background: #fff;
	font-size: 20px;
	font-weight: 400;
	line-height: 20px;
	letter-spacing: -0.02em;
	text-align: left;
	color: #6C6C6C !important;
	border: none !important;
	padding: 0 15px 0 60px !important;
}
.input-inner textarea{
	height: 128px;
	width: 100%;
	background: #fff;
	font-size: 20px;
	font-weight: 400;
	line-height: 20px;
	letter-spacing: -0.02em;
	text-align: left;
	color: #6C6C6C;
	border: none;
	padding: 15px 15px 10px 60px;
}
.input-inner i {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	color: #1D76BC;
	font-size: 20px;
	left: 16px;
	z-index:1;
}
.msgbox i{
	transform: inherit;
	top: 15px;
}
.contact-from p {
	font-size: 20px;
	font-weight: 400;
	line-height: 30px;
	letter-spacing: -0.02em;
	color: #fff;
	margin: 18px 0 20px;
	float: left;
}

.contact-from button{
	background: #013259 !important;
	padding: 10px 6px 10px 29px;
	border-radius: 50px;
	font-size: 20px;
	font-weight: 500;
	line-height: 30px;
	letter-spacing: -0.04em;
	color: #FCFCFC;
	border: none;
	display: inline-flex;
	align-items: center;
	margin-top: 0;
}
.contact-from button input{
	background: none !important;
	padding: 10px 6px 10px 0;
	border-radius: 50px;
	font-size: 20px;
	font-weight: 500;
	line-height: 30px;
	letter-spacing: -0.04em;
	color: #FCFCFC;
	border: none;
	display: inline-flex;
	align-items: center;
	margin-top: 0;
}
.contact-from button span {
	width: 46px;
	height: 46px;
	background: #fff;
	border-radius: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #242424;
	margin-left: 30px;
}
.contact-from button:hover{
	background: #25bbb1 !important;
}
.nopaddLR{
	padding: 0;
}
.copy-right{
	background: #013259;
	padding:22px 0 20px 0;
}
.copy-right p{
font-size: 20px;
font-weight: 400;
letter-spacing: -0.02em;
text-align: center;
color: #fff;
margin: 0;
}
.copy-right p a{
	color: #fff;
	text-decoration: none;
}
.wpcf7 form.sent .wpcf7-response-output {
	width: 100%;
	float: left;
	color: #fff;
}
.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output {
	border-color: #ffb900;
	width: 100%;
	float: left;
	color: #fff;
}
.wpcf7-spinner{
display: none !important;
}

/* Just to show spinner bar in center of body*/
/*.loader{*/
/*  position: fixed;*/
/*  left: 0px;*/
/*  top: 0px;*/
/*  width: 100%;*/
/*  height: 100%;*/
/*  z-index: 9999;*/
/*  background: url('//upload.wikimedia.org/wikipedia/commons/thumb/e/e5/Phi_fenomeni.gif/50px-Phi_fenomeni.gif') */
/*              50% 50% no-repeat rgb(249,249,249);*/
/*}*/
.pageloader {
	width: 100%;
	height: 100vh;
	position: fixed;
	z-index: 99;
	background: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 99999999;
	/*background: rgba(255, 255, 255, 0.8);*/
}

.spinner-square {
    display: flex;
    flex-direction: row;
    width: 90px;
    height: 120px;
}

.spinner-square > .square {
    width: 17px;
    height: 80px;
    margin: auto auto;
    border-radius: 4px;
}

.square-1 {
    animation: square-anim 1200ms cubic-bezier(0.445, 0.05, 0.55, 0.95) 0s infinite;
}

.square-2 {
    animation: square-anim 1200ms cubic-bezier(0.445, 0.05, 0.55, 0.95) 200ms infinite;
}

.square-3 {
    animation: square-anim 1200ms cubic-bezier(0.445, 0.05, 0.55, 0.95) 400ms infinite;
}

@keyframes square-anim {
    0% {
        height: 80px;
        background-color: rgb(111, 163, 240);
    }
    20% {
        height: 80px;
    }
    40% {
        height: 120px;
        background-color: rgb(111, 200, 240);
    }
    80% {
        height: 80px;
    }
    100% {
        height: 80px;
        background-color: rgb(111, 163, 240);
    }
}