/*======================= web fonts ==========================*/
@font-face {
	font-family: 'MarkPro';
	src: url(../webfonts/MarkPro-Heavy.ttf);
	font-weight: 900;
}

@font-face {
	font-family: 'MarkPro';
	src: url(../webfonts/MarkPro-Bold.ttf);
	font-weight: 700;
}

@font-face {
	font-family: 'MarkPro';
	src: url(../webfonts/MarkPro-Medium.ttf);
	font-weight: 500;
}

@font-face {
	font-family: 'MarkPro';
	src: url(../webfonts/MarkPro-Regular.ttf);
	font-weight: 400;
}

/*====================== Basic css ========================*/
html {
	font-size: 0.521vw;
}

:root {
	scroll-behavior: unset;
}

html,
body,
header,
footer,
main,
nav,
section,
div,
menu,
span,
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
strong,
i,
ol,
ul,
li,
form,
label,
button {
	margin: 0;
	padding: 0;
}

ol,
ul {
	list-style: none;
}

button:focus,
a:focus,
input:focus,
textarea:focus,
select:focus {
    outline: none;
}

a {
    text-decoration: none;
    color: inherit;
    transition: 0.2s all ease;
    -webkit-transition: 0.2s all ease;
    -moz-transition: 0.2s all ease;
}

a:visited,
a:hover,
a:active {
    text-decoration: none;
}

/* body */
body {
	font-family: 'MarkPro';
	font-size: 1.6rem;
	font-weight: 400;
	background: #FFFFFF;
	color: #082239;
}

/*====================== header_area start ========================*/
.header_area {
	background: #082239;
	width: 100%;
	display: block;
	padding: 3.2rem 3.2rem 3.2rem 15rem;
	filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.05));
	position: sticky;
	top: 0;
	z-index: 1024;
}

.header_main {
	display: flex;
	align-content: center;
	justify-content: space-between;
} 

.header_logo img {
	width: 23.3rem;
}
.main_content {padding: 50px 0;max-width: 995px;margin: 0 auto;}
/*ofcanvas menu*/
.ofcavas-menu {
	width: 42rem;
	background: #082239;
	padding: 0.6rem 0;
	border-radius: 0rem 0rem 2rem 2rem;
	z-index: -1;
	position: absolute;
	right: 2.5rem;
	top: 9.5rem;
	display: none;
}

.ofcavas-menu.current {
	display: block;
}

.ofcavas-menu ul li {
	padding: 3rem 4rem;
}

.ofcavas-menu ul li a {
	font-size: 2.2rem;
	font-style: normal;
	font-weight: 500;
	line-height: normal;
	letter-spacing: 0.11rem;
	text-transform: uppercase;
	color: #FFF;
	transition: 0.2s all ease;
}

.ofcavas-menu ul li a:hover {
	color: #FBA834;
}

/*Hamburger menu*/
.hamburger-menu {
	cursor: pointer;
	position: relative;
	z-index: 999;
}

.hamburger-menu span {
	background: #FBA834;
	width: 3rem;
	height: .3rem;
	display: block;
	margin: .5rem 0;
	border-radius: 2rem;
}

.hamburger-menu .line-top.current {
	-webkit-transform: translateY(200%) rotate(135deg);
	-ms-transform: translateY(200%) rotate(135deg);
	transform: translateY(200%) rotate(135deg);
}

.hamburger-menu .line-center.current {
	opacity: 0;
}

.hamburger-menu .line-bottom.current {
	-webkit-transform: translateY(-325%) rotate(-135deg);
	-ms-transform: translateY(-325%) rotate(-135deg);
	transform: translateY(-325%) rotate(-135deg);
}

.hamburger-menu:hover span {
	background: #FFF;
}

/*===================== hero_area start =======================*/
.hero_area {
	background-image: url(../images/hero-bg.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

.hero_overlay {
	background: linear-gradient(270deg, rgba(8, 34, 57, 0.50) 23.52%, rgba(8, 34, 57, 0.00) 58.25%);
	padding-top: 16rem;
	padding-right: 8.5rem;
	padding-left: 3rem;
}

.hero_overlay.current {
	position: relative;

	
}

.hero_overlay.current:after {
	content: "";
	display: block;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 999;
	background: url("../images/hero-overlay.png");
	background-size: cover;
	background-position: center;
}

.hero_main {
	display: flex;
	align-items: flex-start;
	justify-content: flex-end;
}

.hero_left img {
	width: 91.2rem;
	margin-top: 0.5rem;
}

.hero_left p {
	font-size: 3.7rem;
	font-style: normal;
	font-weight: 900;
	line-height: normal;
	text-transform: uppercase;
	color: #FFF;
	max-width: 62rem;
	width: 100%;
	margin-left: auto;
	margin-bottom: 0;
	margin-top: 1.6rem;
}

.hero_right {
	display: flex;
	align-items: flex-start;
	margin-left: 2.5rem;
}

.hero_cnt {
	margin-top: -2.2rem;
}

.hero_cnt img {
	width: 32.6rem;
}

.hero_inner {
	max-width: 25rem;
	width: 100%;
	margin-top: 3.5rem;
	margin-left: auto;
}

.hero_inner h4 {
	font-size: 1.8rem;
	font-style: normal;
	font-weight: 900;
	line-height: normal;
	color: #FFF;
	margin: 0;
}

.hero_inner  p {
	font-size: 1.8rem;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
	color: #FFF;
	margin: 0;
}

.hero_line img {
	width: 0.7rem;
	margin-left: 5rem;
}

/*======================= story_area start =========================*/
.story_area {
	background: #FFFFFF;
}

.story_main {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.story_left {
	width: 55%;
	background: #50C4ED;
	padding: 7rem 14rem 8.6rem 16rem;
}

.story_left h2 {
	font-size: 4rem;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
	text-transform: uppercase;
	color: #FFF;
}

.story_left p {
	font-size: 1.8rem;
	font-style: normal;
	font-weight: 700;
	line-height: 136%;
	color: #FFF;
	margin-top: 1.7rem;
}

.story_right img {
	width: 20.7rem;
}

.story_right {
	width: 45%;
	padding: 4rem 3rem 5.6rem;
} 

.story_cnt {
	max-width: 47.7rem;
	width: 100%;
	margin: 0 auto;
}

.story_cnt p {
	font-size: 1.8rem;
	font-style: normal;
	font-weight: 700;
	line-height: 135%;
	color: #082239;
	margin-top: 1.6rem;
	margin-bottom: 0;
}

.story_cnt a {
	font-size: 1.6rem;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
	color: #082239;
	text-align: center;
	border: 1px solid #082239;
	display: inline-block;
	padding: 1rem 2.8rem;
	border-radius: 6rem;
	transition: 0.2s all ease;
	margin-top: 3.6rem;
}

.story_cnt a:hover {
	background: #FBA834;
	border-color: #FBA834;
	color: #FFF;
}

/*==================== ship_area start  ======================*/
.ship_area {
	background-image: url(../images/ship-bg.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-position: right;
	position: relative;
	padding: 8rem 0rem 10rem 16rem;
}

.ship_area::after {
	content: "";
	width: 70%;
	height: 100%;
	display: block;
	background: linear-gradient(89deg, #FFF 18.67%, rgba(255, 255, 255, 0.75) 43.51%, rgba(255, 255, 255, 0.51) 61.19%, rgba(255, 255, 255, 0.00) 95.11%);
	position: absolute;
	left: 0;
	top: 0;
}

.ship_cnt {
	max-width: 79.7rem;
	width: 100%;
	position: relative;
	z-index: 9;
}

.ship_cnt h3 {
	font-size: 4rem;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
	text-transform: uppercase;
	color: #082239;
	margin-bottom: 4.5rem;
}

.ship_cnt h4 {
	font-size: 2.6rem;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
	color: #082239;
	margin: 0;
}

.ship_cnt h4 strong {
	font-weight: 800;
}

.ship_cnt p {
	font-size: 1.8rem;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
	color: #082239;
	margin-top: 2rem;
}

.ship_cnt p strong {
	font-weight: 800;
}

/*======================= boats_area start =========================*/
.boats_upper {
	background: #FFFFFF;
	padding: 7.4rem 13rem 4.6rem;
}

.boats_circleRow {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	grid-gap: 2rem;
}

.boats_box {
	height: 24.9rem;
	background: #082239;
	padding: 1.4rem 1.4rem;
	border-radius: 50%;
	transition: 0.2s all ease;
	width: 100%;
}

.boats_cnt {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	border: 1px solid #387ADF;
	border-radius: 50%;
	transition: 0.2s all ease;
}

.boats_box h4 {
	font-size: 2.5rem;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
	text-transform: capitalize;
	color: #FFF;
	text-align: center;
	margin-top: 0;
	transition: 0.2s all ease;
}

.boats_box h3 {
	font-size: 5rem;
	font-style: normal;
	font-weight: 900;
	line-height: normal;
	letter-spacing: 0.2rem;
	color: #FBA834;
	text-align: center;
	margin-top: 0.25rem;
	transition: 0.2s all ease;
}

.boats_box span {
	font-size: 2.5rem;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
	color: #FFF;
	text-align: center;
	margin: 0;
	display: block;
	transition: 0.2s all ease;
}

.boats_box p {
	font-size: 2.2rem;
	font-style: normal;
	font-weight: 700;
	line-height: 145.455%;
	color: #FFF;
	text-align: center;
	margin-bottom: 1.5rem;
	transition: 0.2s all ease;
}

.boats_box:hover {
	background: #FFFFFF;
}

.boats_box:hover .boats_cnt {
	border-color: #50C4ED;
}

.boats_box:hover h4,
.boats_box:hover span,
.boats_box:hover p {
	color: #082239;
}

.boats_box:hover h3 {
	color: #50C4ED;
}

.boats_main {
	background: url(../images/boats_bg.png);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

.boats_overlay {
	background: rgba(8, 34, 57, 0.5);
	padding: 12.8rem 30rem;
}

.boats_title h3 {
	font-size: 4rem;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
	text-transform: uppercase;
	color: #FFF;
	text-align: center;
	margin-bottom: 0;
}

.boats_row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	padding-top: 9rem;
}

.boats_item img {
	max-width: 9.5rem;
	display: block;
}

.boats_itm1 img {
	max-width: 17.8rem;
}

.boats_item h4 {
	font-size: 2.4rem;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
	text-transform: uppercase;
	color: #FFF;
	text-align: center;
	margin: 0;
}

.boats_item p {
	font-size: 2.4rem;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
	text-transform: capitalize;
	color: #FFF;
	text-align: center;
	margin: 0;
}

.boats_itm3 {
	max-width: 34.7rem;
	width: 100%;
}

.boats_inner {
	height: 10.4rem;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 2rem;
}

.boats_item {
	position: relative;
}

.boats_itm1::after {
	content: "";
	width: 0.2rem;
	height: 20.4rem;
	display: block;
	background: #FFF;
	position: absolute;
	right: -10rem;
	top: 50%;
	transform: translateY(-50%);
}

.boats_itm3::before {
	content: "";
	width: 0.2rem;
	height: 20.4rem;
	display: block;
	background: #FFF;
	position: absolute;
	left: -4.5rem;
	top: 50%;
	transform: translateY(-50%);
}

/*=================== products_area start =====================*/
.products_area {
	background: #FFFFFF;
	padding: 9.2rem 15.4rem 10rem;
}

.product_title h3 {
	font-size: 4rem;
	font-style: normal;
	font-weight: 800;
	line-height: normal;
	text-transform: uppercase;
	color: #082239;
	text-align: center;
	margin-bottom: 4.5rem;
}

.product_main {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-gap: 0;
}

.product_item {
	position: relative;
}

.product_item img {
	width: 100%;
	height: 42.5rem;
	object-fit: cover;
}

.product_cnt {
	width: 100%;
	height: 12rem;
	display: flex;
	flex-direction: column;
	padding-left: 5rem;
	padding-bottom: 4.3rem;
	position: absolute;
	bottom: 0;
	left: 0;
}

.product_cnt h4 {
	font-size: 3.2rem;
	font-style: normal;
	font-weight: 900;
	line-height: normal;
	color: #FFF;
	margin: 0;
	transition: 0.2s all ease;
}

.product_cnt p {
	font-size: 1.8rem;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
	color: #FFF;
	margin: 0;
	margin-top: 0.4rem;
	transition: 0.2s all ease;
}

.product_cnt p strong {
	font-weight: 900;
	display: block;
	margin-top: -0.8rem;
}

.product_cnt:hover h4,
.product_cnt:hover p {
	color: #FBA834;
}

/*====================== team_area start ========================*/
.team_area {
	background: #082239;
	padding: 7rem 25rem 10rem;
}

.team_title h3 {
	font-size: 4rem;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
	text-transform: uppercase;
	text-align: center;
	color: #FFF;
}

.team_item {
	margin-top: 6rem;
	display: flex;
	align-items: center;
}

.team_inner img {
	width: 19.6rem;
	border-radius: 13.2rem;
	margin-right: 4rem;
	transition: 0.2s all ease;
}

.team_inner img:hover {
	filter: grayscale(1);
}

.team_cnt h3 {
	font-size: 2rem;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
	text-transform: uppercase;
	color: #FFF;
	margin-bottom: 1rem;
}

.team_cnt h4 {
	font-size: 1.6rem;
	font-style: normal;
	font-weight: 500;
	line-height: normal;
	text-transform: uppercase;
	color: #FBA834;
	margin-bottom: 1rem;
}

.team_cnt p {
	font-size: 1.8rem;
	font-style: normal;
	font-weight: 400;
	line-height: 143.75%;
	color: #FFF;
	margin-bottom: 2rem;
	max-width: 33.8rem;
	width: 100%;
}

.team_cnt a img {
	width: 3.2rem;
}

.team_cnt {
	max-width: 36rem;
	width: 100%;
}

/*===================== contact_area start ========================*/
.contact_area {
	background-image: url(../images/boats_bg.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

.contact_overlay {
	background: rgba(8, 34, 57, 0.5);
	padding: 7rem 24rem 10rem;
}

.contact_title h3 {
	font-size: 3.4rem;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
	text-transform: uppercase;
	color: #FFF;
	margin: 0;
}

.contact_main {
	padding-top: 5.4rem;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
}

.contact_left {
	width: 63%;
}

.contact_right {
	width: 35%;
}
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translatey(20px);
  }
  to {
    opacity: 1;
    transform: translatey(0);
  }
}

.fade-in {
  opacity: 0; /* start elements as invisible */
  animation: fadeIn 1s ease-out forwards; /* Animation will run for 1 second */
}

.contact_form label.error { color: red; padding-left: 27px; }
.contact_form {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
}

.contact_form > div {
	width: 48%;
}

.contact_item {
	margin-bottom: 20px;
}
.contact_item input {
	font-family: 'MarkPro';
	font-size: 16px;
	font-style: normal;
	font-weight: 700;
	color: #8C8C8C;
	background: #FFF;
	width: 100%;
	height: 58px;
	display: block;
	border: 1px solid #D0D0D0;
	padding: 12px 20px;
	outline: none;
	border-radius: 50px;
}

.contact_item input::placeholder {
	font-family: 'MarkPro';
	color: #8C8C8C;
	opacity: 1;
}

.contact_item textarea {
	font-family: 'MarkPro';
	font-size: 16px;
	font-style: normal;
	font-weight: 700;
	color: #8C8C8C;
	background: #FFF;
	width: 100%;
	height: 133px;
	display: block;
	border: 1px solid #D0D0D0;
	padding: 14px 20px;
	outline: none;
	border-radius: 25px;
	margin-bottom: 20px;
	resize: none;
}

.contact_item textarea::placeholder {
	font-family: 'MarkPro';
	color: #8C8C8C;
	opacity: 1;
}

.contact_item .nice_select {
	font-family: 'MarkPro';
	font-size: 16px;
	font-style: normal;
	font-weight: 700;
	color: #8C8C8C;
	background: #FFF;
	width: 100%;
	height: 58px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border: 1px solid #D0D0D0;
	padding: 12px 20px;
	outline: none;
	border-radius: 50px;
	margin-bottom: 20px;
	cursor: pointer;
	z-index: 9;
	position: relative;
}

/* nice_select */
.contact_item  .nice-select::after {
	border-bottom: 1px solid #8C8C8C;
	border-right: 1px solid #8C8C8C;
	content: '';
	display: block;
	width: 10px;
	height: 10px;
	margin-top: -7.2px;
	right: 21px;
}

.contact_item  .nice_select .list {
	padding: 16px 0 10px;
	width: 100%;
	border: 1px solid #D0D0D0;
	border-top: none!important;
	border-radius: 0px 0px 20px 20px!important;
	box-shadow: none;
	margin-top: -24px;
	z-index: -1;
}

.contact_item  .nice_select.item_scroll .list {
	height: 22rem;
	overflow: auto;
}

.contact_item  .nice_select .list .option {
	min-height: 42px;
	line-height: 42px;
}

.contact_bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: 1rem;
}

.contact_checkbox {
	display: flex;
	align-items: center;
}
.thankyou {color: white;background:green; display: inline;padding: 5px 10px;border-radius:5px;}
.contact_checkbox label.error {
	color: red;
}
.contact_checkbox label {
	font-size: 14px;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
	color: #FFF;
	display: block;
	margin: 0;
	cursor: pointer;
}

.contact_checkbox label a {
	text-decoration-line: underline;
}

.form-check-input {
    width: 1.5rem;
    height: 1.5rem;
	border: 0.2rem solid #CCC;
	background: #FFF;
    margin: 0;
    cursor: pointer;
    user-select: none;
	border-radius: 50%!important;
	margin-right: 1rem;
}

.form-check-input:focus {
    border-color: #CCC;
    outline: 0;
    box-shadow: none;
}

.form-check-input:checked[type="checkbox"]{
    background-color: #50C4ED;
    border-color: transparent;
    background-size: 100% 100%;
}

.contact_btn button {
	font-family: 'MarkPro';
	font-size: 16px;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
	text-transform: uppercase;
	color: #FFF;
	text-align: center;
	border: 1px solid #FFF;
	background: transparent;
	width: 165px;
	height: 42px;
	display: block;
	text-align: center;
	margin-left: auto;
	padding: 10px 10px;
	border-radius: 61px;
	transition: 0.2s all ease;
}

.contact_btn button:hover {
	background: #FBA834;
	color: #FFF;
}

.contact_logo img {
	width: 233px;	
}

.contact_details {
	max-width: 30rem;
	width: 100%;
	margin-left: auto;
	position: relative;
}

.contact_details ul li a,
.contact_details ul li {
	font-size: 2.2rem;
	font-style: normal;
	font-weight: 700;
	line-height: 104.545%;
	color: #FFF;
	display: inline-flex;
	align-items: flex-start;
}

.contact_details ul li a img,
.contact_details ul li img {
	max-width: 2.5rem;
	margin-right: 2rem;
	margin-top: 0.3rem;
}

.contact_details ul li {
	padding-top: 4rem;
	line-height: 1.5;
}

.contact_details ul {
	padding-top: 1rem;
}

.contact_details::before {
	content: "";
	width: 1px;
	height: 100%;
	display: block;
	background: #FFF;
	position: absolute;
	left: -13rem;
	top: 0;
}

/*==================== footer_area start ======================*/
.footer_area {
	background: #FFF;
	padding: 4.5rem 2rem 2.5rem;
}

.footer_main {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 3rem;
}

.footer_main p {
	font-size: 14px;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
	color: #082239;
	text-align: center;
	margin: 0;
}

.footer_main ul {
	display: flex;
	align-items: center;
	justify-content: center;
}

.footer_main ul li,
.footer_main ul li a {
	font-size: 14px;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
	color: #082239;
	text-align: center;
	transition: 0.2s all ease;
}

.footer_main ul .inner {
	margin: 0 0.4rem;
}

.footer_main ul li a:hover {
	text-decoration: underline;
}