/* ---- Global CSS Start Here ---- */
html,
body{
    scroll-behavior: smooth;
}
:root{
    --primary-font: "Geist", sans-serif;

    --color-primary: #252B66;
    --color-secondary: #F05A2A;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: "Geist", sans-serif;
  margin: 0 ;
  padding: 0;
  background-color: #fff !important;
  position: relative;
  overflow: hidden;
  overflow-y: auto;
  width: 100%;
}
ol, ul {
  padding-left: 0rem !important; 
}
a {
  transition: ease 0.4s all;
  text-decoration: none !important;
}
img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

.mr-container {
    max-width: 63vw;
    margin: 0 auto;
    position: relative;
}
.clr-white{
    color: white;
}
.clr-primary{
    color: var(--color-primary);
}
.clr-secondary{
    color: var(--color-secondary);
}
.font-primary{
    font-family: var(--primary-font);
}
.text-center{
    text-align: center;
}
.text-uppercase {
    text-transform: uppercase;
}
.p-relative{
    position: relative;
}
.divider {
    display: block;
    width: 8.594vw;
    height: 0.460vw;
    background: var(--color-secondary);
}
.hidden {
    display: none;
}
.h1 {
    font-family: var(--primary-font);
    font-size: 3.125vw;
    line-height: 1.2;
    font-weight: 700;
    margin-bottom: 1vw;
}
.h2{
    font-family: var(--primary-font);
    font-size: 2.604vw;
    line-height: 1.2;
    font-weight: 700;
    margin-bottom: 1vw;
}
.h3-30 {
    font-size: 1.563vw;
    margin-bottom: 0.50vw;
}
h2{
    text-transform: capitalize;
}
.rte {
    font-family: var(--primary-font);
    line-height: 1.3;
    font-weight: 400;
    margin-bottom: 0.8vw;
}
.fw-bold {
    font-weight: 700;
}
.fw-black {
    font-weight: 900;
}
.fw-normal {
    font-weight: 400;
}
.rte.rte-18{
    font-size: 0.938vw;
}
.rte.rte-20{
    font-size: 1.042vw;
}
.rte.rte-25 {
    font-size: 1.302vw;
}
a.btn {
    font-family: var(--primary-font);
    display: inline-block;
    text-align: center;
    text-decoration: none;
    color: inherit;
    line-height: 1.3;
}
.btn.btn-orange {
    background: linear-gradient(0, #CF3807 0%, #f15f30 100%);
    font-size: 0.938vw;
    border: 0.20vw solid #f5770f;
    box-shadow: rgba(50, 50, 93, 0.2) -3px 7px 8px 0px inset,
        rgba(0, 0, 0, 0.2) 12px 20px 10px -17px inset;
    padding: 0.625vw 1.458vw;
    color: #fff;
    font-weight: 600;
    border-radius: 5vw;
    cursor: pointer;
    letter-spacing: -0.01vw;
    min-width: 10.677vw;
    width: fit-content;
    transition: 0.8s;
}
.btn.btn-orange:hover {
    background: linear-gradient(0, #CF3807 50%, #f15f30 100%);
}

.zi-9{ z-index: 9; }
.zi-8{ z-index: 8; }
.zi-7{ z-index: 7; }
.zi-6{ z-index: 6; }
.zi-5{ z-index: 5; }
.zi-4{ z-index: 4; }
.zi-3{ z-index: 3; }
.zi-2{ z-index: 2; }
.zi-1{ z-index: 1; }
/* ---- Global CSS End Here ---- */

/* ---- Header CSS Start Here ---- */
.tampa-header {
    position: absolute;
    max-width: 79vw;
    width: 100%;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 2.604vw;
    background: #FFFFFF;
    border-radius: 5vw;
    z-index: 999;
    padding: .350vw;
}
.tampa-header .th-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.tampa-header .th-logo {
    max-width: 12vw;
    width: 100%;
    position: relative;
}
.tampa-header .th-logo a{
    display: block;
    width: fit-content;
    outline: none;
    border: none;
}
.tampa-header .th-logo img {
    width: 100%;
    max-width: 10.417vw;
    height: auto;
    display: block;
}

.tampa-header ul.th-nav-list {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 2vw;
    margin: -0.677vw 0 0;
    padding-right: 5vw;
}
.tampa-header .th-nav .th-nav-list li > a{
    font-family: "Geist", sans-serif;
    font-weight: 600;
    font-size: 0.833vw;
    color: #252B66;
    display: flex;
    align-items: center;
    min-height: 3vw;
    position: relative;
    padding: 0.677vw 0.5vw 0;
    overflow: hidden;
}
.tampa-header .th-nav .th-nav-list li > a::before{
    position: absolute;
    content: '';
    width: calc(100% + 4vw);
    height: calc(100% + .500vw);
    background: linear-gradient(0deg, #FFF 20%, #FCDCD1 60%);
    top: -100%;
    left: 0;
    z-index: -1;
    transition: .2s all ease;
}
.tampa-header .th-nav .th-nav-list li:hover > a::before{
    top: 0;
}

.tampa-header .th-contact {
    min-height: 3vw;
    background: #0c2169;
    border-top-right-radius: 99px;
    border-bottom-right-radius: 99px;
    display: flex;
    align-items: center;
    justify-content: end;
    padding-right: 1vw;
    max-width: 11.5vw;
    width: 100%;
    position: relative;
}
.tampa-header .th-contact::before{
    left: -0.469vw;
    top: 0;
    content: "";
    background: #0c2169;
    height: 100%;
    width: 30%;
    position: absolute;
    right: auto;
    transform: skewX(-17deg);
    z-index: -1;
}
.tampa-header .th-contact::after{
    left: -2.3vw;
    top: 0;
    content: "";
    background: #c7c9cb;
    height: 100%;
    width: 13%;
    position: absolute;
    right: 2.4%;
    transform: skewX(-17deg);
    z-index: 999;
    border-left: 0.7vw solid #FF6200;
}
.tampa-header .th-contact a {
    color: #FFF;
    display: block;
    text-align: right;
    font-size: 1.042vw;
    font-weight: 600;
    font-family: "Geist", sans-serif;
}
.tampa-header .menu-toggle {
    position: relative;
    width: auto;
    cursor: pointer;
    display: none;
    padding: 0;
    background: transparent;
    height: auto;
    width: auto;
    right: 3.529vw;
}
.tampa-header .menu-toggle span {
    display: block;
    height: 0.706vw;
    width: 5.882vw;
    background: #252B66;
    margin: 1.412vw 0;
    transition: 0.4s ease;
}
.tampa-header .menu-toggle.active span:nth-child(1) {
    transform: translateY(2.118vw) rotate(45deg);
}
.tampa-header .menu-toggle.active span:nth-child(2) {
    opacity: 0;
}
.tampa-header .menu-toggle.active span:nth-child(3) {
    transform: translateY(-2.118vw) rotate(-45deg);
}

.tampa-header .th-nav .th-nav-list li {
    position: relative;
}

.tampa-header .th-nav .th-dropdown{
    position:absolute;
    top:100%;
    left:0;
    min-width:11.500vw;
    background:#fff;
    list-style:none;
    padding:0.625vw 0 0;
    overflow: hidden;
    margin:0;
    border-radius:0.521vw;
    box-shadow:0 0.521vw 1.563vw rgba(0,0,0,0.08);
    opacity:0;
    visibility:hidden;
    transform:translateY(0.521vw);
    transition:0.3s ease;

    z-index:99;
}
.tampa-header .th-nav .th-dropdown li{
    width:100%;
}
.tampa-header .th-nav .th-dropdown li a{
    display:block;
    width: 100%;
    padding: 0.625vw 1.042vw !important;
    min-height: 0px !important;
    transition:0.3s;
}
.has-dropdown:hover .th-dropdown{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

.tampa-header .th-nav .th-nav-list li.has-dropdown::before {
    position: absolute;
    content: '';
    width: 1.042vw;
    height: 0.417vw;
    background: url('../images/comp-imgs/dropdown.webp');
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    right: 0.2vw;
    top: 1.7vw;
}
.tampa-header .th-nav .th-nav-list li.has-dropdown a {
    padding-right: 1.5vw;
}

/* ---- Header CSS End Here ---- */

/* ---- Footer CSS Start Here ---- */
section.copy-right-sec {
  padding: 1.0416666666666667vw 0;
  background: #ffffff;
  border-top: 0.15625vw solid #ffffff;
  box-shadow: inset 0 5px 6px #00000061;
}
p.copy-right-p {
  margin-bottom: 0;
  color: #002051;
  text-align: center;
  font-weight: 400 !important;
  font-size: 18px;
}
.footer_bottom {
  background-color: #252B66;
  padding: 1.886792453vw 0;
display: block;
position: relative;
}
.footer_bottom .container {
  max-width: 64.056603774vw !important;
  margin-right: auto;
  margin-left: auto;
}
.footer_bottom .container .row .footer_bottom-col {
  padding: 0 15px;
  width: calc(100% / 7);
}
.footer_bottom-col ul {
  padding-left: 0;
  list-style: none;
}
.footer_bottom-col li {
  font-size: 0.566037736vw;
  line-height: 1.320754717vw;
  text-transform: uppercase;
  display: block;
  font-weight: 400 !important;
  text-align: left;
}
.footer_bottom-col a {
  color: #fff;
  display: inline-block;
}
.footer_bottom a {
  transition: ease 0.4s all;
  text-decoration: none !important;
}
.footer_bottom a:hover {
  transition: ease 0.4s all;
  text-decoration: none !important;
}
.footer_bottom .footer_bottom-col.social-links a {
  position: relative;
  padding-left: 0px;
  display: flex;
  align-items: center;
}
.footer_bottom .footer_bottom-col.social-links img {
  width: 16px;
  height: auto;
  top: 0;
  position: absolute;
  left: 0;
  bottom: 0;
  margin: auto;
  display: none;
}
.footer_bottom .footer-logo-number .footer-logo img {
  max-width: 150px;
  height: auto;
}
/* .footer_bottom .footer-logo-number .footer-number {
  padding: 20px 0 0;
} */
.footer_bottom  .footer-logo-number .footer-number a {
  text-align: left;
  font-size: 0.660377358vw !important;
  line-height: 1.886792453vw;
  display: block;
  font-weight: bold;
}

.footer_bottom .footer_bottom-col.social-links a i {
  font-size: 16px;
  line-height: 1;
  margin-right: 5px;
}
.footer_bottom .row {
    display: flex;
    flex-wrap: wrap;
}
.ft-vid-sec .video-wrapper {
    margin-bottom: -0.417vw;
}
.ft-vid-sec video.video {
    width: 100%;
    height: auto;
}


main.template-marine{
    padding: 0;
    margin: 0;
}
main.template-marine section{
    position: relative;
}

/* ---- Global CSS End Here ---- */
.fadeInUp {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease;
}

.fadeInUp.fadeInUpAnimated {
    opacity: 1;
    transform: translateY(0);
}


.sec-bg.sec-bg-ab {
    position: absolute;
    width: 100%;
    height: auto;
    top: 0;
    left: 0;
}
.hero-section .mr-container {
    padding-top: 20vw;
    padding-bottom: 1.7vw;
}
.hero-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.1vw;
}
.hero-cards .hero-card {
    position: relative;
    background-color: #FFF;
    padding: 0.5vw;
    border-radius: 1.1vw;
    display: flex;
    flex-direction: column;
    transition: 0.4s all ease;
}
.hero-cards .hero-card:hover{
    transform: translateY(-10px);
}
.hero-card h3 {
    font-family: var(--primary-font);
    color: #252B66;
    font-size: 1.3021vw;
    line-height: 1.2;
    font-weight: 700;
    margin-bottom: 0.4vw;
}
.hero-card p.rte {
    padding: 0.5vw 0.7vw 0;
}
.hero-card .btn-orange {
    margin: 0.5vw auto;
}

.marine-sv-sec {
    margin-bottom: -1vw;
}
.marine-sv-sec .mr-container.mr-container01 {
    padding-top: 24vw;
    padding-bottom: 1.3vw;
}
.marine-sv-sec .para01 {
    padding: 0 5vw;
    margin-bottom: 1.5vw;
}
.mrs-cards {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.1vw;
    background-color: rgb(255 255 255 / 30%);
    backdrop-filter: blur(15px);
    padding: 1vw;
    border-radius: 2vw;
}
.mrs-cards .mrs-card {
    border: 1px solid #FFF;
    border-radius: 1.5vw;
    padding: 0.7vw;
    background-image: linear-gradient(0, #FFFFFF 10%, #FFFFFF00 70%);
}
.mrs-cards .mrs-card:hover{
    background-image: linear-gradient(0, #F15C2D -10%, #FFFFFF00 70%);
    border-color: #F15C2D;
}
.mrs-cards .mrs-card img {
    border-radius: 0.9vw;
}
.mrs-cards .mrs-card h3 {
    font-family: var(--primary-font);
    text-align: center;
    font-size: 1.563vw;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1.1;
    margin-top: 2vw;
    margin-bottom: 2.5vw;
}
.mrs-cards .mrs-card:hover h3{
    color: #FFFFFF;
}
.marine-sv-sec .para02 {
    max-width: 33vw;
    margin: 3vw auto 2vw;
}
.marine-sv-sec .btn-orange {
    margin: 0 auto;
    display: block;
}
.marine-sv-sec .mr-container.mr-container02 {
    padding-top: 4vw;
    padding-bottom: 5vw;
}
.mrs-images{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.1vw;
}
.mrs-images img{
    border-radius: 1vw;
    transition: 0.4s all ease;
}
.mrs-images img:hover{
    transform: translateY(-10px);
}
.mrr-section .mr-container {
    padding-top: 5vw;
    display: flex;
    gap: 2vw;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}
.mrr-section .mr-container p.rte {
    flex: 0 0 52%;
}
.mrr-section .mr-container h2 {
    flex: 0 0 38%;
}


.rev-grid {
    max-width: 60vw;
    margin: 2.5vw auto 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.1vw;
}
.rg-item {
    position: relative;
    background: #F4F9FE;
    padding: 1.5vw;
    border-radius: 1vw;
}
.rg-item  .rgi-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1vw;
}
.rg-item  .rev-profile-area {
    display: flex;
    align-items: center;
    gap: .9vw;
}
.rg-item .rev-profile-area img {
    width: 100%;
    max-width: 3vw;
}
.rg-item .rev-profile-area .rev-pf-info{
    display: flex;
    flex-direction: column;

}
.rg-item .rev-profile-area h6 {
    font-size: 0.729vw;
    line-height: 1.2;
    font-weight: 700;
    font-family: 'Arial', sans-serif;
    color: #252B66;
    margin-bottom: 0.3vw;
}
.rg-item .rev-profile-area span {
    font-size: 0.521vw;
    line-height: 1.1;
    font-weight: 400;
    font-family: 'Arial', sans-serif;
    color: #252B66;
}
.rg-item .rgi-header .rg-header-icon {
    max-width: 2.082vw;
    width: 100%;
    padding: .2vw;
    background: #FFF;
    border-radius: 2vw;
}
.rg-item .review-content {
    padding: 1.3vw 0 .5vw;
}
.rg-item .review-content p {
    font-size: 0.729vw;
    line-height: 1.7;
    font-weight: 500;
    font-family: 'Arial', sans-serif;
    margin-bottom: 0;
}
.rev-stars {
    padding-top: 0.5vw;
}
.rev-stars img {
    max-width: 8.854vw;
}
section.review-section {
    padding-bottom: 4vw;
}

section.get-in-touch {
    padding: 4vw 0;
    text-align: center;
    background-color: #FFF;
    border-radius: 0 0 6vw 6vw;
    margin-bottom: -6vw;
    z-index: 6;
}
form.get-in-touch_form {
    margin: 1vw auto 0;
    max-width: 59vw;
    display: flex;
    flex-direction: column;
    gap: 2.2vw;
    position: relative;
}
.get-in-touch_form .row  {
    margin: 0;
    display: flex;
    flex-direction: row;
    gap: 1.8vw;
}
.get-in-touch_form .row .field {
    width: 100%;
    padding: 0;
    flex: 1;
    display: flex;
}
.get-in-touch_form .row input,
.get-in-touch_form textarea{
    width: 100%;
    padding: 1vw 1.2vw;
    background-color: #F4F9FE;
    border: none;
    outline: none;
    border-radius: 0.450vw;
    font-size: 0.938vw;
    font-weight: 600;
    color: #252B66;
}
.get-in-touch_form ::placeholder{
    color: #252B66;
    opacity: 1;
}
.get-in-touch_form textarea{
    resize: none;
}
.get-in-touch_form .form-btn-wrapper {
    margin-top: 1.5vw;
}
.get-in-touch h2.h1 {
    margin-bottom: 0.1vw;
}


section.ft-vid-sec.flite-video-sec {
    padding: 0;
    margin: 0;
}
section.ft-vid-sec.flite-video-sec .video-wrapper {
    aspect-ratio: unset;
    height: auto;
    border-radius: 0;
}
section.ft-vid-sec.flite-video-sec button.video-btn {
    right: 0;
    left: 0;
    top: 5.313vw;
    bottom: 0;
    margin: auto;
    backdrop-filter: none;
    background: transparent;
    border: 0;
    border-radius: 0;
    width: 22.813vw;
    height: auto;
}
section.ft-vid-sec.flite-video-sec .video-wrapper.playing button.video-btn {
    opacity: 0;
}
section.ft-vid-sec.flite-video-sec button.video-btn i {
    display: none !important;
}



/* ===================
    Trailerable Boats Storage CSS Start Here
    =================== */
.hero-inner .hero-inner-content {
    position: absolute;
    top: 38vw;
    left: auto;
    right: 17vw;
    max-width: 33vw;
    padding: 1.5vw 1vw 0.3vw 1.5vw;
    border: 1px solid #FFF;
    border-radius: 2vw;
    backdrop-filter: blur(30px);
}
.hero-inner .hero-inner-content .subtitle {
    font-size: 2.604vw;
    font-weight: 300;
    color: #FFF;
    line-height: 1;
}
.hero-inner .hero-inner-content .subsubtitle {
    font-size: 1.563vw;
    color: #FFF;
    font-weight: 600;
    margin-bottom: 0.2vw;
}
.hero-inner .hero-inner-content .h1 {
    font-size: 4.688vw;
    line-height: 1;
    color: #FFF;
    font-weight: 700;
    margin-bottom: 0;
}
.hero-inner .hero-inner-content .divider {
    width: 8.594vw;
    height: 0.469vw;
    margin: 0.7vw 0 0.7vw;
}
.hero-inner .hero-inner-content .rte {
    font-weight: 300;
}
.hero-inner .hi-marina-img {
    position: absolute;
    bottom: 3.50%;
    left: 11.50vw;
    width: 100%;
    max-width: 34%;
}

.online-booking {
    margin-top: -4vw;
}
.online-booking .mr-container {
    padding-top: 9vw;
    display: flex;
    flex-wrap: wrap;
    padding-bottom: 4vw;
}
.online-booking .content-column {
    flex: 0 0 40%;
}
.online-booking .form-column {
    flex: 0 0 47%;
    margin-left: auto;
}
.online-booking .form-column .form-box {
    background: rgba(255, 255, 255, 0.3);
    /* padding: 2vw 1.2vw 1.2vw; */
    padding: 0px;
    border-radius: 1.5vw;
    border: 1px solid #FFFFFF;
    margin-top: -0.7vw;
}
.online-booking img.ob-boat-img {
    position: relative;
    margin: -8.50vw auto 0;
    margin-top: -8.50vw;
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
    max-width: 93%;
    width: 100%;
}

.tbs-details {
    padding: 4vw 0 5vw;
    border-radius: 0 0 11vw 11vw;
    margin-bottom: -11vw;
    background-color: #FFFFFF;
}
.tbs-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1vw;
}
.tbs-grid-item {
    display: flex;
    flex-direction: column;
    background-color: #FEF3EF;
    padding: 1vw;
    border: 1px solid var(--color-secondary);
    border-radius: 1.3vw;
}
.tbs-grid-item .tbs-grid-item_title {
    font-size: 2.083vw;
    line-height: 1.2;
    color: var(--color-primary);
    margin-bottom: 0.3vw;
}
.tbs-grid-item .tbs-grid-item_listtitle {
    font-size: 1.25vw;
    font-weight: 700;
    color: var(--color-primary);
    margin-top: 0.5vw;
    margin-bottom: 0.2vw;
}
.tbs-grid-item .tbs-grid-item_list {
    padding-left: 1vw !important;
}
.tbs-grid-item .tbs-grid-item_list li::marker{
    font-size: 0.781vw;
}
.tbs-grid-item .tbs-grid-item_list {
    font-size: 0.99vw;
    margin-bottom: 0.4vw;
}
.tbs-grid-item img {
    margin-top: auto;
    border-radius: 0.70vw;
}
.tbs-details .btn-orange {
    margin-top: 4vw;
    margin-left: auto;
    margin-right: auto;
    display: block;
}
.tbs-details .rte.rte-25 {
    font-weight: 600;
    margin-bottom: 1.5vw;
}
.tbs-grid-item:hover {
    box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 12px;
}
/* ===================
    Trailerable Boats Storage CSS End Here
    =================== */


/* ===================
    Marine Marina CSS Start Here
=================== */
.short-content {
    padding-top: 50vw;
    padding-bottom: 3vw;
    z-index: 1;
}
.short-content .mr-container {
    display: flex;
    align-items: center;
    padding: 1.5vw 1.8vw 1vw;
    border: 1px solid #FFFFFF70;
    border-radius: 2vw;
    backdrop-filter: blur(30px);
    color: #FFFFFF;
}
.short-content .mr-container .heading-wrapper {
    flex: 0 0 41%;
    position: relative;
}
.short-content .mr-container .text-wrapper {
    flex: 0 0 57%;
    margin-left: auto;
}
.short-content .h1 {
    font-weight: 400;
    margin-bottom: 0;
    line-height: 1.1;
}
.short-content .rte {
    margin-bottom: 0;
    margin-top: 1.8vw;
}
.short-content .mr-container .heading-wrapper .divider {
    position: absolute;
    left: 13.3vw;
    top: 4vw;
    height: 0.400vw;
    width: 7.8vw;
}

.textimg-repeative-content {
    padding-top: 9vw;
    padding-bottom: 7vw;
    border-radius: 0 0 11vw 11vw;
    margin-bottom: -11vw;
    background-color: #FFFFFF;
}
.tir-content {
    display: flex;
    margin-bottom: 4vw;
}
.tir-content:nth-last-child(1){
    margin-bottom: 0;
}
.tir-content .img-wrapper {
    flex: 0 0 70%;
    padding-right: 4vw;
}
.tir-content .img-wrapper img{
    border-radius: 1.4vw;
}
.tir-content .content-wrapper {
    flex: 0 0 31%;
}
.tir-content .content-wrapper h2 {
    font-size: 2.604vw;
    margin-bottom: 0.5vw;
}
.tir-content .content-wrapper .btn-orange {
    margin-top: 1vw;
}
.tir-content.img-second .img-wrapper {
    order: 2;
    padding-right: 0;
    padding-left: 4vw;
}
/* ===================
    Marine Marina CSS End Here
=================== */

.hero-inner.hero-inner_inner .hi-marina-img {
    bottom: 1vw;
}
section.wpm-sec {
    padding: 0vw 0 0;
    margin-top: -1vw;
}
.wpm-sec .wpm-container {
    max-width: 65vw;
    margin: 0 auto;
    display: flex;
    align-items: self-end;
    flex-direction: row;
    gap: 1.3vw;
}
.wpm-sec .wpm-container .column-right {
    flex: 0 0 48%;
    position: relative;
}
.wpm-sec .wpm-container .column-left {
    flex: 0 0 50%;
    padding-right: 0;
    padding-bottom: 4vw;
}
.wpm-sec .column-right img.wpm-img {
    width: 100%;
    max-width: 20vw;
    position: relative;
    left: 0;
}
.wpm-sec .column-right img.wpm-nv-img {
    position: absolute;
    right: 3.20vw;
    max-width: 13.20vw;
    top: 3.906vw;
}
.wpm-sec .wpm-container .h2 {
    line-height: 1.1;
}

.detail-boxes .db-container {
    max-width: 77vw;
    margin: 0 auto;
}
.detail-box {
    font-family: "Geist", sans-serif;
    display: flex;
    align-items: center;
    padding: 3vw 2vw 2vw 6vw;
    background-image: url('../images/comp-imgs/gradient-bg2.webp');
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
    margin-bottom: 4.5vw;
    border-radius: 8vw; 
}
.detail-box .content-column {
    width: 55%;
    padding-right: 5.5vw;
}
.detail-box .img-column{
    width: 45%;
    padding-left: 1vw;
}
.detail-box h2 {
    font-size: 4.688vw;
    font-weight: bold;
    text-transform: capitalize;
    line-height: 1;
    color: #252B66;
    letter-spacing: -0.03vw;
    margin-bottom: 1.2vw;
}
.detail-box p.rte {
    margin-bottom: 1.1vw;
}
.detail-box .content-column .db-btn {
    margin-top: 1vw;
    display: inline-block;
}
.detail-box .img-column img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 6vw;
}


section.sv-info-sec {
    margin-bottom: -2.80vw;
}
.svc-flex {
    display: flex;
}
.svc-col.svc-first-col{
    flex: 0 0 33%;
    display: flex;
    flex-direction: column;
    justify-content: end;
    padding-left: 2vw;
}
.svc-col.svc-second-col{
    flex: 0 0 35%;
    padding-right: 1vw;
    padding-bottom: 4vw;
    padding-top: 2vw;
}
.svc-col.svc-third-col{
    flex: 0 0 30%;
}
.svc-col.svc-third-col img.svc-img01 {
    max-width: 25vw;
    position: absolute;
    top: -5vw;
    left: -0.5vw;
    border: 5px solid #FFFFFF;
    border-radius: 50%;z-index: 2;
}
.svc-col.svc-third-col img.svc-img02 {
    position: absolute;
    top: 14.40vw;
    left: 3vw;
    width: 100%;
    min-width: 38vw;
}
.svcf-content h5 {
    position: relative;
    font-family: 'D-DIN Condensed';
    font-size: 1.042vw;
    font-weight: 600;
    line-height: 1.2;
}
.svcf-content h5::before {
    position: absolute;
    content: '';
    width: 75%;
    height: 1px;
    background: var(--color-secondary);
    bottom: -0.5vw;
}
.svcf-content {
    position: absolute;
    left: 12vw;
    top: auto;
    bottom: 36vw;
    max-width: 10vw;
}
.sv-info-sec ul.rte {
    padding-left: 1.2vw !important;
}
.sv-info-sec ul.rte li::marker {
    font-size: 0.729vw;
}
.sv-info-sec ul.rte li {
    padding-left: 0.573vw;
}

.pim-sec .mr-container.mr-container01 {
    padding-top: 6vw;
    padding-left: 3vw;
    padding-right: 3vw;
}
.pim-sec .mr-container01 .content-area {
    max-width: 77%;
}
.pim-sec .mr-container .rte {
    margin-bottom: 1.50vw;
}
.pim-sec .mr-container01 img.pim-nv-img{
    position: absolute;
    max-width: 11vw;
    top: 3.50vw;
    right: 3vw;
}
.pim-sec .mr-container.mr-container02 .content-area {
    background: linear-gradient(to bottom, #ECE9E6, #FAEEE8);
    padding: 2.20vw 3vw 1vw;
    border: 1px solid var(--color-secondary);;
    border-radius: 2vw;
    max-width: 82%;
}

.pim-sec .mr-container.mr-container02 {
    position: relative;
    margin-top: 5vw;
}
.pim-sec .mr-container02 img.pim-circled-img {
    position: absolute;
    right: -15vw;
    top: -17vw;
    max-width: 30vw;
}

.sv-gradient-sec .mr-container {
    padding-top: 6vw;
}
.sv-gradient-sec img.pim-nv-img {
    position: absolute;
    max-width: 17vw;
    top: 9vw;
    right: -9vw;
}
.sv-gradient-sec .svgs-content {
    max-width: 90%;
    padding: 2vw;
}
.sv-gradient-sec .tbs-grid-item {
    background-image: linear-gradient(to bottom, rgba(254, 243, 239, 0.3) 55%, rgba(254, 243, 239, 0.6)) !important;
    background-color: transparent !important;
    backdrop-filter: blur(15px);
    padding: 1.8vw;
}
.sv-gradient-sec .tbs-grid-item .tbs-grid-item_title {
    font-size: 2.604vw;
}
.sv-gradient-sec .tbs-grid-item p.rte{
    padding: 0 0.8vw 0 0;
}
.sv-gradient-sec  a.btn.btn-orange {
    margin-top: 4vw;
    margin-left: auto;
    margin-right: auto;
    display: block;
}
.sv-gradient-sec {
    border-radius: 0 0 11vw 11vw;
    margin-bottom: -11vw;
    overflow: hidden;
    padding-bottom: 6vw;
}

.marine-parts-page .hero-inner.hero-inner_inner .hi-marina-img {
    max-width: 19.709%;
    bottom: 2vw;
    left: 17.5vw;
}

section.detail-boxes {
    padding-bottom: 2vw;
    border-radius: 0 0 11vw 11vw;
    margin-bottom: -11vw;
    background-color: #FFF;
}
.detail-box.call-now .content-column .db-btn {
    background: linear-gradient(0, #CF3807 0%, #8E2908 100%);
}
.detail-box.call-now .content-column .db-btn:hover{
    background: linear-gradient(0, #CF3807 -10%, #8E2908 60%);
}

/* ============================
    Contact Page CSS Start Here
=============================== */

section.contact-form {
    background-color: #FFF;
    padding-top: 4vw;
    padding-bottom: 7vw;
    border-radius: 11vw 11vw;
    margin-bottom: -11vw;
}
.contact-form > .mr-container {
    max-width: 79vw;
}
.contact-form .ct-from-area {
    background: linear-gradient(to bottom, #032964, #011434);
    color: #FFF;
    padding: 2.50vw 6.50vw;
    border-radius: 1.80vw;
    box-shadow: rgba(0, 0, 0, 0.9) 0px 2px 5px 0px inset, 
                rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset, 
                rgba(0, 0, 0, 0.4) 0px 4px 9px -2px;
}
.contact-form .ct-from-area .ct-form {
    margin-top: 3vw;
}
.ct-form .ct-form-header {
    display: flex;
    flex-wrap: wrap;
    gap: 5%;
}
.ct-form .ct-form-header .cth-content {
    flex: 0 0 69%;
}
.ct-form .ct-form-header .cth-content p{
    line-height: 1.4;
    font-weight: 300;
}
.ct-form .ct-form-header .ct-info-list {
    flex: 0 0 26%;
}
.ct-info-list li{
    list-style: none;
    margin-bottom: 2vw;
}
.ct-info-list li a {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.8vw;
    font-weight: 500;
    color: #FFF;
}
.ct-info-list li a > img {
    width: 1.719vw;
    height: auto;
}
.ct-info-list li a:hover {
    text-decoration: underline !important;
    text-decoration-thickness: 1px !important;
    text-underline-offset: 4px;
}


/* ROW SPACING */
.contact_form .row {
    margin-bottom: 0.625vw;
}

/* LABEL */
.contact_form label {
    display: block;
    font-size: 0.833vw;
    margin-bottom: 0.313vw;
    color: var(--color-secondary);
    font-weight: 600;
}

/* INPUTS / SELECT / TEXTAREA */
.contact_form input,
.contact_form select,
.contact_form textarea {
    width: 100%;
    padding: 0.729vw;
    border-radius: 0.417vw;
    border: none;
    background-color: #FFFFFF;
    font-size: 0.781vw;
    outline: none;
}

/* TEXTAREA */
.contact_form textarea {
    resize: none;
    min-height: 10vw;
}

/* GRID SYSTEM */
.contact_form .fields-group {
    display: grid;
    gap: 1.042vw;
}

/* 2 COLUMN */
.contact_form .fields2 .fields-group {
    grid-template-columns: 1fr 1fr;
}

/* 3 COLUMN */
.contact_form .fields-3 .fields-group {
    grid-template-columns: 1fr 1fr 1fr;
}

/* SELECT CUSTOM ARROW */
.contact_form select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg fill='%23ff5a1f' height='20' viewBox='0 0 20 20' width='20' xmlns='http://www.w3.org/2000/svg'><polygon points='0,0 20,0 10,10'/></svg>");
    background-repeat: no-repeat;
    background-position: 96% 0.99vw;
    background-size: 0.781vw;
    padding-right: 1.823vw;
}

/* CHECKBOX SECTION */
.contact_form .acceptance-checkboxes {
    margin-top: 2.083vw;
}
.contact_form .cb-group {
    display: flex;
    align-items: flex-start;
    gap: 0.625vw;
    margin-bottom: 1.198vw;
}
.contact_form .cb-group input {
    width: 1.563vw;
    height: 1.563vw;
    margin-top: 0;
}
.contact_form .cb-group label {
    color: #ffffff;
    font-weight: 300;
    font-size: 0.833vw;
    line-height: 1.5;
    max-width: 80%;
}

/* SUBMIT BUTTON */
.contact_form .submit-btn {
    display: flex;
    justify-content: flex-end;
}

.contact_form .btn-orange {
    text-transform: uppercase;
    font-weight: 500;
}


.map-location {
    margin-bottom: -6vw;
}
.by-water .sec-bg.sec-bg-ab,
.map-location .sec-bg.sec-bg-ab {
    border-radius: 0 0 11vw 11vw;
    overflow: hidden;
}
.map-location .mr-container {
    padding-top: 18.70vw;
    max-width: 79vw;
}
.map-location  .ml-content {
    background-color: #FFF;
    padding: 2.5vw 3.5vw;
    border-radius: 4vw;
    width: 100%;
    max-width: 32.40vw;
}
.map-location .ml-content h2 {
    line-height: 1;
    margin-bottom: 1.5vw;
}
.map-location .ml-content ul.rte {
    padding-left: 1.2vw !important;
}
.map-location .ml-content ul.rte li::marker {
    font-size: 0.938vw;
}
.map-location .ml-content ul.rte li {
    margin-bottom: 0.9vw;
}
.map-location .ml-content .divider {
    width: 100%;
    height: 1px;
    margin: 2vw 0;
}
.map-location .ml-content .nv-logo-ct {
    width: 100%;
    max-width: 47%;
    margin-bottom: 1vw;
}
.map-location .ml-content p.rte-25 {
    line-height: 1.6;
    margin-bottom: 0;
}


.by-water .mr-container {
    max-width: 79vw;
    padding-top: 21vw;
    padding-bottom: 19vw;
}
.by-water .sec-title {
    font-size: 90px;
    line-height: 1;
    margin-bottom: 1.5vw;
}
.by-water .btn-orange {
    margin-top: 1vw;
}
/* ============================
    Contact Page CSS End Here
=============================== */

/* ============================
    Online Booking Form CSS Start Here
=============================== */

.popup-box form,
.online-booking .form-box form {
  display: flex;
  flex-direction: column;
  gap: 0.720vw;
  position: relative;
  z-index: 99;
}
.popup-box form .row,
.online-booking .form-box .row {
  display: flex;
  gap: 0.781vw;
  margin: 0;
}
.popup-box form .field.full,
.online-booking .form-box .field.full {
  width: 100%;
}
.popup-box form label,
.online-booking .form-box label {
  display: none;
}
.popup-box form input,
.online-booking .form-box input,
.popup-box form select,
.online-booking .form-box select,
.popup-box form textarea,
.online-booking .form-box textarea {
  padding: .580vw 0.9vw;
  border: 1px solid #252B66;
  border-radius: 0.450vw;
  font-size: 0.885vw;
  font-weight: 600;
  outline: none;
  color: #252B66;
  background: transparent;
  width: 100%;
  font-family: var(--primary-font);
}
.popup-box form ::placeholder,
.online-booking .form-box form ::placeholder{
  opacity: 1;
  color: #252B66 !important
}
.popup-box form input:focus,
.online-booking .form-box input:focus,
.popup-box form select:focus,
.online-booking .form-box select:focus,
.popup-box form textarea:focus,
.online-booking .form-box textarea:focus {
  border-color: #000000;
}
.popup-box form textarea,
.online-booking .form-box textarea {
  resize: none;
}
.popup-box form .row .field,
.online-booking .form-box .row .field {
    width: 48%;
    padding: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.popup-box form select,
.online-booking .form-box select {
  background-repeat: no-repeat;
  background-position: right 0.625vw center;
  background-size: 0.729vw;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
.popup-box .submit-wrap,
.online-booking .submit-wrap {
    text-align: center;
}
/* ============================
    Online Booking Form CSS End Here
=============================== */

.hero-section .sec-bg video {
    width: 100%;
    height: auto;
}

.template-service-inner section.tbs-details {
    padding-bottom: 3vw;
    margin-bottom: 0;
    border-radius: 0;
}
.template-service-inner .sv-gradient-sec{
    margin-bottom: 0;
}

/* Error Style */
.error{
    color:red;
    font-size:13px;
    display:block;
    margin-top:5px;
}

/* Popup Styling */
.popup-wrapper{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.7);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}
.popup-wrapper.active{
    display: flex;
}
.popup-box{
    background: #fff;
    padding: 0;
    max-width: 65%;
    width: 100%;
    position: relative;
    border-radius: 1vw;
    overflow: hidden;
}
.popup-close{
    position: absolute;
    right: 0.5vw;
    top: 0.2vw;
    cursor: pointer;
    outline: none;
    border: none;
    padding: 0;
    background-color: transparent;
    color: var(--color-secondary);
    font-size: 2vw;
}
.popup-close:hover{
    color: #000000;
}

/* Popup Styling */