@import url('https://fonts.googleapis.com/css2?family=Signika:wght@400;600;700&display=swap');
body {
	font-family: 'Signika', sans-serif;
}
a{
	text-decoration: none;
}
ul{
	list-style-type: none;
	margin: 0;
	padding: 0;
}
h1, h2, h3, h4, h5, h6, p{
	margin: 0;
	padding: 0;
}
.form-control:focus, .form-select:focus{
	box-shadow: none;
}
.bg-gray{
	background-color: #fafafa;
}
.automated-marine{
	padding: 100px 0;
	background: rgb(5,29,64);
	background: linear-gradient(132deg, rgba(5,29,64,1) 0%, rgba(20,93,160,1) 54%); 

}
.automated-content{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 0;
	right: 0;
}
.circle-blob{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	height: 500px;
	width: 500px;
	border-radius: 50%;
	box-shadow: rgba(15, 124, 178, 0.6) 0px 0px 60px 35px;
	background-color: rgba(15, 124, 178, 0.5);
}
.automated-content h1{
	font-size: 90px;
	line-height: 1.1;
	margin: 70px 0 60px 0;
	color: #fff;
}
.try-sailerlogger .try-for-free {
	font-size: 20px;
	font-family: 'Signika', sans-serif;
	padding: 15px 35px;
	border-radius: 30px;
	background-color: #b1d4e0;
	color: #000;
	display: inline-block;
}
.existing-user{
	display: flex;
	gap: 5px;
	align-items: center;
	margin-top: 30px;
	text-decoration: underline;
}
.existing-user p, .existing-user a{
	font-size: 18px;
	font-family: 'Signika', sans-serif;
	color: #fff;
}
.iphone-video{
	width: 100%;
	height: 100%;
	position: relative;
	overflow: hidden;
	border-radius: 70px;
	z-index: 10000;
}
.curved-block{
	width: 100%;
	position: relative;
	overflow: hidden;
	border-radius: 0 130px 0 0;
}
.curved-block video{
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	object-fit: cover;
	mix-blend-mode: normal;
	right: 0px;
	z-index: 10000;
}
.iphone-video .gif-image{
	position: absolute;
	top: 23px;
	left: 26px;
	width: 100%;
	height: 100%;
	object-fit: cover;
	mix-blend-mode: screen;
	right: 27px;
	height: 90%;
}
.iphone-video video{
	position: absolute;
	top: 23px;
	left: 22px;
	width: 90%;
	object-fit: cover;
	right: 0px;
	height: 95%;
	padding: 10px;
}
.iphone-video .gif-image{
	position: absolute;
	top: 23px;
	left: 26px;
	width: 90%;
	height: 100%;
	object-fit: cover;
	right: 27px;
}
.iphone-video img{
	width: 100%;
	z-index: 10000;
	position: relative;
}
.say-ahoy{
	padding: 80px 0 120px 0;
}
.common-content {
	position: relative;
	padding-left: 40px;
}
.common-content h2{
	font-size: 70px;
	line-height: 1.11;
	font-family: 'Signika', sans-serif;
	margin-bottom: 40px;
	text-transform: uppercase;
	font-weight: bold;
}
.common-content p{
	font-size: 22px;
	line-height: 1.5;
    font-family: 'Josefin Sans', sans-serif;
	color: #051d40;
}
.common-content p a{
	color: #051d40;
	text-decoration: underline;
}
.common-content img{
	position: absolute;
	bottom: -70px;
	left: 5%;
}
.saillogger-features{
	padding-top: 80px;
	position: relative;
}
.route-sharing{
	padding: 20px 25px;
	background-color: #051d40;
}
.sharing-header{
	display: flex;
	gap: 20px;
	align-items: center;
	margin-bottom: 20px;
}
.sharing-header h3{
	font-size: 28px;
	font-family: 'Signika', sans-serif;
	color: #fff;
	font-weight: bold;
	text-transform: uppercase;
}
.route-sharing p{
	font-size: 20px;
	color: #fff;
	padding: 0 10px;
    font-family: 'Josefin Sans', sans-serif;
}
.route-sharing{
	position: absolute;
	right: 0;
	bottom: 0;
	max-width: 424px;
}
.more-features-wrap {
	padding: 30px 0;
}
.more-features-wrap .route-sharing{
	max-width: 100%;
	min-height: 310px;
}
.how-it-works{
	padding: 70px 0;
}
.features-in-action{
	padding: 55px 0;
	background: rgb(15,123,176);
	background: linear-gradient(153deg, rgba(15,123,176,1) 0%, rgba(5,29,65,1) 84%);
}
.features-action-content{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 0;
}
.features-action-content h2{
	font-size: 70px;
	text-transform: uppercase;
	font-weight: bold;
	font-family: 'Signika', sans-serif;
	color: #fff;
	margin-bottom: 40px;
}
.features-action-content h4{
	font-size: 40px;
	text-transform: uppercase;
	font-weight: bold;
	font-family: 'Signika', sans-serif;
	color: #fff;
	margin-bottom: 20px;
}
.features-action-content ul{
	display: flex;
	gap: 20px;
	flex-direction: column;
	list-style-type: disc;
	padding-left: 40px;
}
.features-action-content ul li{
	font-size: 22px;
	color: #fff;
    font-family: 'Josefin Sans', sans-serif;
}
.saillogger-faqs{
	padding: 70px 0;
}
.faqs-header{
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.faqs-header h2{
	font-size: 50px;
	font-weight: bold;
	font-family: 'Signika', sans-serif;
}
.accordion{
	box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
.faq-dropdowns .accordion-button{
	background-color: #fff;
	color: #333;
	padding: 20px;
	box-shadow: none;
	border-left: 3px solid #051d40;
}
.faq-dropdowns .accordion-button.collapsed{
	border: none;
}
.faq-dropdowns .accordion-button{
	font-family: 'Signika', sans-serif;
	font-size: 18px;
}
.faq-dropdowns .accordion-flush .accordion-collapse p{
	font-size: 16px;
	padding: 20px;
    font-family: 'Josefin Sans', sans-serif;
}
.accordion-button:focus{
	outline: none;
	box-shadow: none;
}
.accordion-flush .accordion-collapse{
	border-left: 3px solid #051d40;
}
.social-links{
	display: flex;
	gap: 50px;
	align-items: center;
	margin-top: 50px;
}
.social-links a{
	display: flex;
	gap: 10px;
	align-items: center;
}
.social-links a p{
	color: #051d40;
	font-size: 20px;
}
.log-trips{
	padding: 100px 0;
	background: rgb(5,29,64);
	background: linear-gradient(132deg, rgba(5,29,64,1) 41%, rgba(20,93,160,1) 100%); 
}
.log-trips-content h2{
	font-size: 70px;
	color: #fff;
	margin-bottom: 40px;
}
.log-trips-logo{
	height: 500px;
	width: 500px;
	border-radius: 50%;
	box-shadow: rgba(15, 124, 178, 0.6) 0px 0px 60px 35px;
	background-color: rgba(15, 124, 178, 0.5);
}
.modal-backdrop{
	z-index: 10000;
}
.modal-backdrop.show{
	opacity: 0.8;
}
.modal{
	z-index: 100000;
}
.login-form{
	padding: 0 30px 30px 30px;
}
.login-form h2{
	font-size: 30px;
	text-transform: uppercase;
	margin-bottom: 20px;
	font-weight: bold;
	text-align: center;
}
.login-form form .form-control{
	font-size: 16px;
	height: 35px;
	border-radius: 0px;
	color: #333;
	margin-bottom: 10px;
}
.login-form form .btn{
	padding: 8px 30px;
	background-color: #051d40;
	color: #fff;
	font-size: 16px;
	display: block;
	border-radius: 0px;
	width: 100%;
	text-align: center;
}