body {
font-family: 'Montserrat', sans-serif;
overflow: auto;
margin: 0;
}
/* Apply 'Lobster' font to specific elements */
h1, h2, h3, h4, h5, h6, p {
font-family: 'Poppins', sans-serif;
}
* {box-sizing: border-box;}
.landing {
background: #000 url(img/marine_drive_ultra.jpg);
color: #fff;
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-size: cover;
background-repeat: no-repeat;
position: relative;
background-position: center center; /* Center the background image */
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
}
@media (max-width: 767px) {
.landing {
background: #000 url(img/marine_drive_run.png);
background-position: center; /* Center the background image */
object-fit: cover;
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-size: cover;
background-repeat: no-repeat;
position: relative;
}
}
.color-overlay{
width: 100%;
height: 100%;
background: #1A6C7A;
opacity: 0.4;
position: absolute;
filter:brightness(60%);
filter:contrast(250%);
}
@media (max-width: 767px) {
.color-overlay{
width: 100%;
height: 100%;
background: #1A6C7A;
opacity: 0.6;
position: absolute;
filter:brightness(60%);
filter:contrast(250%);
}
}
.rr {
z-index: 1;
align-content: center;
}
.navbar-brand
{
font-size: 100px;
margin: 0px;
}
.content-area{
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
#content{
text-align: center;
padding-left: 10px;
padding-right: 10px;
width: 80%;
}
@media all and (max-width:480px) {
#content {
padding-top: 60px;
width: 100%;
/* display: none; */
}
}
.ch1 {
}
@media all and (max-width:600px) {
.ch1 {
font-size: 13px;
/* display: none; */
text-align: center;
}
}
.ch3{
font-size: 28px;
font-weight: 400;
line-height: 1;
text-align: center;
}
@media all and (max-width:600px) {
.ch3 {
font-size: 20px;
/* display: none; */
}
}
.cp{
font-size: 22px;
}
@media all and (max-width:600px) {
.cp {
font-size: 18px;
/* display: none; */
}
}
.navbars-brand {
display: inline-block;
padding-top: .3125rem;
padding-bottom: .3125rem;
margin-right: 0.5rem;
font-size: 1.00rem;
line-height: 32px;
white-space: nowrap;
}
div.ex1 {
width: 800px;
margin: auto;
align-content: center;
}
.ast-button{
background-color: #1a6c7a;
border: 2px solid #1a6c7a;
color: #fcfcfc;
border-radius: 0px;
padding-top: 20px;
padding-right: 40px;
padding-bottom: 20px;
padding-left: 40px;
font-family: inherit;
font-weight: 400;
font-size: 20px;
font-size: 0.875rem;
line-height: 0;
text-transform: uppercase;
letter-spacing: 2px;
}
.ast-button:hover {
background-color: #4996a3;
border: 2px solid #4996a3;
}
.white-button{
border: 1px solid #e7e7e7;
color: #fcfcfc;
border-radius: 0px;
padding-top: 20px;
padding-right: 40px;
padding-bottom: 20px;
padding-left: 40px;
font-family: inherit;
font-weight: 400;
font-size: 20px;
font-size: 0.875rem;
line-height: 0;
text-transform: uppercase;
letter-spacing: 2px;
}
.white-button:hover {
background-color: #1a6c7a;
border: 2px solid #1a6c7a;
}
.tra-button {
/* Your existing styles */
background-color: #214081;
border: 3px solid #ffffff;
color: #ffffff;
border-radius: 0;
padding: 5px 20px;
font-family: inherit;
font-weight: 400;
font-size: 18px;
letter-spacing: 2px;
}
.tra-button:hover {
/* Your existing hover styles */
border: 2px solid #e7e7e7;
background-color: #e7e7e7;
color: #1a6c7a;
}
/* Media query for screens smaller than 576px (adjust as needed) */
@media (max-width: 576px) {
.tra-button {
padding: 5px 10px; /* Adjust the padding for smaller screens */
font-weight: 400;
font-size: 14px;
}
}
/* Responsive */
/* Add this to your existing CSS or style.css file */
h1.display-1 {
font-size: 4rem; /* Default font size for larger screens */
}
@media (max-width: 768px) {
h1.display-1 {
font-size: 2.5rem; /* Adjust font size for medium-sized screens */
}
}
@media (max-width: 576px) {
h1.display-1 {
font-size: 2rem; /* Adjust font size for small screens */
}
}
/* Add margin top and bottom to the image */
.img-fluid.my-5 {
margin-top: 5rem; /* Adjust the value as needed */
margin-bottom: 5rem; /* Adjust the value as needed */
}
.navbar-link {
font-family: 'Montserrat', sans-serif;
/* Add any other styling you need for the menu text */
}
.navbar-text {
font-size: 1.5rem; /* Adjust the font size for small screens */
}
@media (max-width: 576px) {
.navbar-text {
font-size: 1rem; /* Adjust the font size for small screens */
}
}