:root { --m1: #B39869; --m2: #0F1A2E; --m3: #fff; --header: 84px; --headerFixed: 64px; --mw: 1306px; --mwext: 1338px; --60: 60px; --55: 55px; --44: 44px; --42: 42px; --36: 36px; --30: 30px; --33: 33px; --28: 28px; --26: 26px; --24: 24px; --23: 23px; --22: 22px; --21: 21px; --20: 20px; --18: 18px; --16: 16px; --15: 15px; --14: 14px; --13: 13px; --12: 12px; --11: 11px; --p: 15px; --a: 16px; --breakpoint-sm: 576px; --breakpoint-md: 768px; --breakpoint-lg: 992px; --breakpoint-xl: 1200px; --spacing-0: 0px; --spacing-1: 10px; --spacing-2: 20px; --spacing-3: 30px; --spacing-4: 40px; --spacing-5: 50px; --spacing-6: 60px; --spacing-7: 70px; --spacing-8: 80px; --spacing-9: 90px; --spacing-10: 100px; } input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-results-button, input[type="search"]::-webkit-search-results-decoration { -webkit-appearance:none; } /*----------------------------------------------------- Container ------------------------------------------------------*/ .container { width: 95%; margin: 0 auto; padding: 0 var(--spacing-2); max-width: var(--mw); /* Adjust as desired */ } .container-int { width: 65%; margin: 0 auto; padding: 0 var(--spacing-2); max-width: var(--mw); /* Adjust as desired */ } .container-ext { width: 100%; margin: 0 auto; padding: 0 var(--spacing-2); max-width: var(--mwext); /* Adjust as desired */ } /*----------------------------------------------------- Grid ------------------------------------------------------*/ .row { display: flex; flex-wrap: wrap; width:100%; margin-left:auto; margin-right:auto; } .col { flex: 1 1 100%; } .col-6 { flex: 1 1 50%; } /*----------------------------------------------------- Spacing Utilities (Margin & Padding) Now extended beyond .m-5 and .p-5 up to .m-10 and .p-10 ------------------------------------------------------*/ /* Utility generator comment: For each spacing scale (0 through 10): .m-{n}, .mt-{n}, .mb-{n}, .ml-{n}, .mr-{n}, .mx-{n}, .my-{n} .p-{n}, .pt-{n}, .pb-{n}, .pl-{n}, .pr-{n}, .px-{n}, .py-{n} */ :root { /* Map spacing values in a pattern to generate CSS more easily (in a preprocessor you might loop) */ --spacing-values: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10; } /* Margin Classes */ .m-0 { margin: var(--spacing-0)!important; } .m-1 { margin: var(--spacing-1)!important; } .m-2 { margin: var(--spacing-2)!important; } .m-3 { margin: var(--spacing-3)!important; } .m-4 { margin: var(--spacing-4)!important; } .m-5 { margin: var(--spacing-5)!important; } .m-6 { margin: var(--spacing-6)!important; } .m-7 { margin: var(--spacing-7)!important; } .m-8 { margin: var(--spacing-8)!important; } .m-9 { margin: var(--spacing-9)!important; } .m-10 { margin: var(--spacing-10)!important; } .mt-0 { margin-top: var(--spacing-0)!important; } .mt-1 { margin-top: var(--spacing-1)!important; } .mt-2 { margin-top: var(--spacing-2)!important; } .mt-3 { margin-top: var(--spacing-3)!important; } .mt-4 { margin-top: var(--spacing-4)!important; } .mt-5 { margin-top: var(--spacing-5)!important; } .mt-6 { margin-top: var(--spacing-6)!important; } .mt-7 { margin-top: var(--spacing-7)!important; } .mt-8 { margin-top: var(--spacing-8)!important; } .mt-9 { margin-top: var(--spacing-9)!important; } .mt-10 { margin-top: var(--spacing-10)!important; } .mb-0 { margin-bottom: var(--spacing-0)!important; } .mb-1 { margin-bottom: var(--spacing-1)!important; } .mb-2 { margin-bottom: var(--spacing-2)!important; } .mb-3 { margin-bottom: var(--spacing-3)!important; } .mb-4 { margin-bottom: var(--spacing-4)!important; } .mb-5 { margin-bottom: var(--spacing-5)!important; } .mb-6 { margin-bottom: var(--spacing-6)!important; } .mb-7 { margin-bottom: var(--spacing-7)!important; } .mb-8 { margin-bottom: var(--spacing-8)!important; } .mb-9 { margin-bottom: var(--spacing-9)!important; } .mb-10 { margin-bottom: var(--spacing-10)!important; } .ml-0 { margin-left: var(--spacing-0)!important; } .ml-1 { margin-left: var(--spacing-1)!important; } .ml-2 { margin-left: var(--spacing-2)!important; } .ml-3 { margin-left: var(--spacing-3)!important; } .ml-4 { margin-left: var(--spacing-4)!important; } .ml-5 { margin-left: var(--spacing-5)!important; } .ml-6 { margin-left: var(--spacing-6)!important; } .ml-7 { margin-left: var(--spacing-7)!important; } .ml-8 { margin-left: var(--spacing-8)!important; } .ml-9 { margin-left: var(--spacing-9)!important; } .ml-10 { margin-left: var(--spacing-10)!important; } .mr-0 { margin-right: var(--spacing-0)!important; } .mr-1 { margin-right: var(--spacing-1)!important; } .mr-2 { margin-right: var(--spacing-2)!important; } .mr-3 { margin-right: var(--spacing-3)!important; } .mr-4 { margin-right: var(--spacing-4)!important; } .mr-5 { margin-right: var(--spacing-5)!important; } .mr-6 { margin-right: var(--spacing-6)!important; } .mr-7 { margin-right: var(--spacing-7)!important; } .mr-8 { margin-right: var(--spacing-8)!important; } .mr-9 { margin-right: var(--spacing-9)!important; } .mr-10 { margin-right: var(--spacing-10)!important; } .mx-0 { margin-left: var(--spacing-0)!important; margin-right: var(--spacing-0)!important; } .mx-1 { margin-left: var(--spacing-1)!important; margin-right: var(--spacing-1)!important; } .mx-2 { margin-left: var(--spacing-2)!important; margin-right: var(--spacing-2)!important; } .mx-3 { margin-left: var(--spacing-3)!important; margin-right: var(--spacing-3)!important; } .mx-4 { margin-left: var(--spacing-4)!important; margin-right: var(--spacing-4)!important; } .mx-5 { margin-left: var(--spacing-5)!important; margin-right: var(--spacing-5)!important; } .mx-6 { margin-left: var(--spacing-6)!important; margin-right: var(--spacing-6)!important; } .mx-7 { margin-left: var(--spacing-7)!important; margin-right: var(--spacing-7)!important; } .mx-8 { margin-left: var(--spacing-8)!important; margin-right: var(--spacing-8)!important; } .mx-9 { margin-left: var(--spacing-9)!important; margin-right: var(--spacing-9)!important; } .mx-10 { margin-left: var(--spacing-10)!important; margin-right: var(--spacing-10)!important; } .my-0 { margin-top: var(--spacing-0)!important; margin-bottom: var(--spacing-0)!important; } .my-1 { margin-top: var(--spacing-1)!important; margin-bottom: var(--spacing-1)!important; } .my-2 { margin-top: var(--spacing-2)!important; margin-bottom: var(--spacing-2)!important; } .my-3 { margin-top: var(--spacing-3)!important; margin-bottom: var(--spacing-3)!important; } .my-4 { margin-top: var(--spacing-4)!important; margin-bottom: var(--spacing-4)!important; } .my-5 { margin-top: var(--spacing-5)!important; margin-bottom: var(--spacing-5)!important; } .my-6 { margin-top: var(--spacing-6)!important; margin-bottom: var(--spacing-6)!important; } .my-7 { margin-top: var(--spacing-7)!important; margin-bottom: var(--spacing-7)!important; } .my-8 { margin-top: var(--spacing-8)!important; margin-bottom: var(--spacing-8)!important; } .my-9 { margin-top: var(--spacing-9)!important; margin-bottom: var(--spacing-9)!important; } .my-10 { margin-top: var(--spacing-10)!important; margin-bottom: var(--spacing-10)!important; } /* Padding Classes */ .p-0 { padding: var(--spacing-0)!important; } .p-1 { padding: var(--spacing-1)!important; } .p-2 { padding: var(--spacing-2)!important; } .p-3 { padding: var(--spacing-3)!important; } .p-4 { padding: var(--spacing-4)!important; } .p-5 { padding: var(--spacing-5)!important; } .p-6 { padding: var(--spacing-6)!important; } .p-7 { padding: var(--spacing-7)!important; } .p-8 { padding: var(--spacing-8)!important; } .p-9 { padding: var(--spacing-9)!important; } .p-10 { padding: var(--spacing-10)!important; } .pt-0 { padding-top: var(--spacing-0)!important; } .pt-1 { padding-top: var(--spacing-1)!important; } .pt-2 { padding-top: var(--spacing-2)!important; } .pt-3 { padding-top: var(--spacing-3)!important; } .pt-4 { padding-top: var(--spacing-4)!important; } .pt-5 { padding-top: var(--spacing-5)!important; } .pt-6 { padding-top: var(--spacing-6)!important; } .pt-7 { padding-top: var(--spacing-7)!important; } .pt-8 { padding-top: var(--spacing-8)!important; } .pt-9 { padding-top: var(--spacing-9)!important; } .pt-10 { padding-top: var(--spacing-10)!important; } .pb-0 { padding-bottom: var(--spacing-0)!important; } .pb-1 { padding-bottom: var(--spacing-1)!important; } .pb-2 { padding-bottom: var(--spacing-2)!important; } .pb-3 { padding-bottom: var(--spacing-3)!important; } .pb-4 { padding-bottom: var(--spacing-4)!important; } .pb-5 { padding-bottom: var(--spacing-5)!important; } .pb-6 { padding-bottom: var(--spacing-6)!important; } .pb-7 { padding-bottom: var(--spacing-7)!important; } .pb-8 { padding-bottom: var(--spacing-8)!important; } .pb-9 { padding-bottom: var(--spacing-9)!important; } .pb-10 { padding-bottom: var(--spacing-10)!important; } .pl-0 { padding-left: var(--spacing-0)!important; } .pl-1 { padding-left: var(--spacing-1)!important; } .pl-2 { padding-left: var(--spacing-2)!important; } .pl-3 { padding-left: var(--spacing-3)!important; } .pl-4 { padding-left: var(--spacing-4)!important; } .pl-5 { padding-left: var(--spacing-5)!important; } .pl-6 { padding-left: var(--spacing-6)!important; } .pl-7 { padding-left: var(--spacing-7)!important; } .pl-8 { padding-left: var(--spacing-8)!important; } .pl-9 { padding-left: var(--spacing-9)!important; } .pl-10 { padding-left: var(--spacing-10)!important; } .pr-0 { padding-right: var(--spacing-0)!important; } .pr-1 { padding-right: var(--spacing-1)!important; } .pr-2 { padding-right: var(--spacing-2)!important; } .pr-3 { padding-right: var(--spacing-3)!important; } .pr-4 { padding-right: var(--spacing-4)!important; } .pr-5 { padding-right: var(--spacing-5)!important; } .pr-6 { padding-right: var(--spacing-6)!important; } .pr-7 { padding-right: var(--spacing-7)!important; } .pr-8 { padding-right: var(--spacing-8)!important; } .pr-9 { padding-right: var(--spacing-9)!important; } .pr-10 { padding-right: var(--spacing-10)!important; } .px-0 { padding-left: var(--spacing-0)!important; padding-right: var(--spacing-0)!important; } .px-1 { padding-left: var(--spacing-1)!important; padding-right: var(--spacing-1)!important; } .px-2 { padding-left: var(--spacing-2)!important; padding-right: var(--spacing-2)!important; } .px-3 { padding-left: var(--spacing-3)!important; padding-right: var(--spacing-3)!important; } .px-4 { padding-left: var(--spacing-4)!important; padding-right: var(--spacing-4)!important; } .px-5 { padding-left: var(--spacing-5)!important; padding-right: var(--spacing-5)!important; } .px-6 { padding-left: var(--spacing-6)!important; padding-right: var(--spacing-6)!important; } .px-7 { padding-left: var(--spacing-7)!important; padding-right: var(--spacing-7)!important; } .px-8 { padding-left: var(--spacing-8)!important; padding-right: var(--spacing-8)!important; } .px-9 { padding-left: var(--spacing-9)!important; padding-right: var(--spacing-9)!important; } .px-10 { padding-left: var(--spacing-10)!important; padding-right: var(--spacing-10)!important; } .py-0 { padding-top: var(--spacing-0)!important; padding-bottom: var(--spacing-0)!important; } .py-1 { padding-top: var(--spacing-1)!important; padding-bottom: var(--spacing-1)!important; } .py-2 { padding-top: var(--spacing-2)!important; padding-bottom: var(--spacing-2)!important; } .py-3 { padding-top: var(--spacing-3)!important; padding-bottom: var(--spacing-3)!important; } .py-4 { padding-top: var(--spacing-4)!important; padding-bottom: var(--spacing-4)!important; } .py-5 { padding-top: var(--spacing-5)!important; padding-bottom: var(--spacing-5)!important; } .py-6 { padding-top: var(--spacing-6)!important; padding-bottom: var(--spacing-6)!important; } .py-7 { padding-top: var(--spacing-7)!important; padding-bottom: var(--spacing-7)!important; } .py-8 { padding-top: var(--spacing-8)!important; padding-bottom: var(--spacing-8)!important; } .py-9 { padding-top: var(--spacing-9)!important; padding-bottom: var(--spacing-9)!important; } .py-10 { padding-top: var(--spacing-10)!important; padding-bottom: var(--spacing-10)!important; } /*----------------------------------------------------- Flexbox Utilities ------------------------------------------------------*/ /* Display */ .d-flex { display: flex !important; } .d-inline-flex { display: inline-flex !important; } /* Flex Direction */ .flex-row { flex-direction: row !important; } .flex-row-reverse { flex-direction: row-reverse !important; } .flex-column { flex-direction: column !important; } .flex-column-reverse { flex-direction: column-reverse !important; } /* Justify Content */ .justify-start { justify-content: flex-start !important; } .justify-end { justify-content: flex-end !important; } .justify-center { justify-content: center !important; } .justify-between { justify-content: space-between !important; } .justify-around { justify-content: space-around !important; } .justify-evenly { justify-content: space-evenly !important; } /* Align Items */ .items-start { align-items: flex-start !important; } .items-end { align-items: flex-end !important; } .items-center { align-items: center !important; } .items-baseline { align-items: baseline !important; } .items-stretch { align-items: stretch !important; } /* Align Content */ .content-start { align-content: flex-start !important; } .content-end { align-content: flex-end !important; } .content-center { align-content: center !important; } .content-between { align-content: space-between !important; } .content-around { align-content: space-around !important; } .content-evenly { align-content: space-evenly !important; } .content-stretch { align-content: stretch !important; } /* Flex Wrap */ .flex-nowrap { flex-wrap: nowrap !important; } .flex-wrap { flex-wrap: wrap !important; } .flex-wrap-reverse { flex-wrap: wrap-reverse !important; } /* Flex Grow & Shrink */ .flex-grow-0 { flex-grow: 0 !important; } .flex-grow-1 { flex-grow: 1 !important; } .flex-shrink-0 { flex-shrink: 0 !important; } .flex-shrink-1 { flex-shrink: 1 !important; } /* Flex Basis & Flex Values */ .flex-auto { flex: 1 1 auto !important; } .flex-initial { flex: 0 1 auto !important; } .flex-none { flex: none !important; } /* Align Self */ .self-auto { align-self: auto !important; } .self-start { align-self: flex-start !important; } .self-end { align-self: flex-end !important; } .self-center { align-self: center !important; } .self-stretch { align-self: stretch !important; } .self-baseline { align-self: baseline !important; } .text-center{text-align:center!important;} .text-start{text-align:left!important;} .text-end{text-align:right!important;} .col-3{ max-width:22%; } a, a:hover, a:focus, a:active, a:visited { color: var(--m2); outline: none; text-decoration: none; transition: all 300ms; } button { } body { outline: none!important; } svg{ font-family: new-hero, sans-serif!important; } img{ font-family: new-hero, sans-serif!important; } html { scroll-behavior: smooth; } body { font-family: new-hero, sans-serif; font-size: var(--p); color: var(--m2); line-height: 1.6; font-weight: 300; } h1, h2, h3, h4, h5, h6 { margin: 0; } p { margin-top:0; margin-bottom:0; } .mw { width: var(--mw); max-width: var(--sitew); } ul, ol { margin: 0 0 0em 0em; list-style:none; padding:0; } .menu-item a:hover { color: var(--m1)!important; } .single_des_cols .card-subtitle-first img { display: none; } .single_des_cols h4.card-subtitle img { display: none; } .hero-section{ position:relative; } .menu-overlay { height: 450px; position: absolute; width: 100%; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 25%, rgba(0, 0, 0, 0) 100%); z-index: 1; } .plan-button:hover { background-color: transparent; color: var(--m1) !important; } .plan-button:hover a{ color: var(--m1)!important; } .yith-wcbk-form-section.yith-wcbk-form-section-totals { display: none!important; } .icon-prod { display:none;} .site-header{ padding-top: 10px; position: fixed; width: 100%; z-index: 999999; padding-bottom: 5px; top:0px; overflow:hidden; } .breadcrumbs_wrap { padding-top: 15px; } .overflow{ overflow:hidden; } .hidden-d { display: none; } .hidden-m { display: block; } .m-auto { margin-left: auto; margin-right: auto; } .post, .page { margin-bottom:0; } .page-content, .entry-content, .entry-summary { margin: 0; } main#primary { /* padding-top: var(--header);*/ } .main_wrapper { padding-left:var(--pad); padding-right:var(--pad); } /*GENERAL*/ .btn { color: #fff !important; padding: 0 25px; line-height: 58px; display: inline-block; font-weight: normal; font-size: 16px; text-align: center; border-radius: 8px; } h1{font-family: new-hero, sans-serif; line-height:71px; font-weight:bold;} h2{font-family: new-hero, sans-serif; line-height:71px; font-weight:bold;} h3{font-family: new-hero, sans-serif; font-weight:bold;line-height:52px;} h4{font-family: new-hero, sans-serif;line-height:33px; font-weight:bold;} h5{font-family: new-hero, sans-serif;font-weight:bold;line-height:32px;} h6{font-family: new-hero, sans-serif;line-height:24px; font-weight:bold;} p{font-family: new-hero, sans-serif;font-size:15px;line-height:25px; font-weight:300;} a{font-family: new-hero, sans-serif;font-size:16px; line-height:14px;font-weight:300;} div{font-family: new-hero, sans-serif;} /*END OF GENERAL*/ /*header*/ .logo-col{ max-width:10%; } .col-menu{ max-width:90%; } .col-pr-menu{ max-width:80%; } ul#menu-main-menu { display: flex ; } .primary-menu-items a{ color:var(--m3); font-size:var(--14); font-weight: 300; } .primary-menu-items ul{ list-style:none; } .primary-menu-items li{ margin-left:10px; list-style:none; margin-right:10px; align-content: center; } .home .site-header { transition: background-color 0.3s ease; background-color: transparent; /* Default background */ background: none; backdrop-filter: unset; height: auto; padding: inherit; width: 100%; margin: 20px; border-radius: 0; } .site-header.sticky { background: rgba(255, 255, 255, 0.6); backdrop-filter: blur(8px) brightness(90%); height: var(--headerFixed); padding: 7px 0px; width: calc(100% - 40px); margin: 20px; border-radius: 4px; } .home .site-header a { color: var(--m3); } .site-header { background: rgba(255, 255, 255, 0.6); backdrop-filter: blur(8px) brightness(100%); height: var(--headerFixed); padding: 7px 0px; width: calc(100% - 40px); margin: 20px; border-radius: 4px; } .site-header a{ color:var(--m2); } .site-header.sticky a{ color:var(--m2); } .site-header.sticky .fixed-logo{ display:block; } .site-header .fixed-logo{ display:block; } .home .site-header.sticky .fixed-logo{ display:block; } .home .site-header .fixed-logo{ display:none; } .home .site-header.sticky .custom-logo-link{ display:none; } .site-header.sticky .custom-logo-link{ display:none; } .site-header .custom-logo-link{ display:none; } .home .site-header .custom-logo-link{ display:block; } .site-header .custom-logo-link{ display:none; } /*End header*/ /*footer*/ .fixed-footer { position: absolute; top: 35vh; text-align: right; right:20px; z-index:99999; } .home .fixed-footer { position: absolute; top: 90%; text-align: right; right:20px; z-index:99999; } /* Optional: Style for the image */ .fixed-footer img { max-width: 60px; /* Adjust as needed */ height: auto; cursor: pointer; } .fixed-footer img { max-width: 60px; height: auto; cursor: pointer; } .fixed-footer-epik { position: absolute; top: 35vh; text-align: right; left:20px; z-index:99999; width: 60px; } .home .fixed-footer-epik { position: absolute; top: 90%; text-align: right; left:20px; z-index:99999; width: 60px; } .fixed-footer-form { position: fixed; top: 40vh; text-align: right; right:00px; z-index:99999; } .col-foot-left{ max-width:50%; } .col-foot-right{ max-width:50%; border-left:1px solid #6F7EBA; } .col-right-up{ gap: 20%; } .d-mob{ display:none; } .col-right-down{ border-top:1px solid #6F7EBA; } .social{ gap: 20px; padding-top:50px; } footer#colophon { padding-top: 92px; border-radius: 0; color: var(--m2)!important; z-index: 100; position: relative; background: rgba(255, 255, 255, 0.6); backdrop-filter: blur(8px) brightness(95%); } .footer-copyright{ background: rgba(255, 255, 255, 0.6); backdrop-filter: blur(8px) brightness(95%); border-top: 1px solid var(--m3); } .col-uf-right{ max-width:50%; } .menu-footer-col-1-container li a{ font-size:15px; line-height:33px; font-family: 'URW Geometric', sans-serif !important; } .footer_widget_2 { font-size:15px; line-height:33px; font-family: 'URW Geometric', sans-serif !important; } .col-uf-left{ max-width:50%; } .contact-title { font-size: 15px; padding-bottom:15px; font-family: 'URW Geometric', sans-serif !important; } .faddress p{ font-size:13px; font-family: 'URW Geometric', sans-serif !important; margin-bottom: 0px; } .faddress p a{ font-size:13px; font-family: 'URW Geometric', sans-serif !important; } .nl_icon_wrap{ font-size:var(--16); } .nl_input input { height: 49px; max-width: 312px; width: 100%; padding-left: 15px; font-size: 14px; line-height: 17px; font-weight: 400; border: 1px solid var(--m1); padding: 0; padding-left: 20px; border-radius: 0; } .nl_submit{ background-color: var(--m1); } .nl_wrap { max-width: 312px; width: 100%; } .chk_text{ color:var(--m1); font-size:12px; } .nl_submit button{ max-width:211px; border:0px solid white; height:49px; width:100%; background-color:transparent; color:white; padding:10px; margin-left: -1px; border-radius: 0; } .chk_container{ display:flex; margin-top:26px; } .wpcf7 form.sent .wpcf7-response-output { border-color: transparent; color: green; text-align: center; } .wpcf7-form-control-wrap input.wpcf7-not-valid { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='23' height='23' viewBox='0 0 23 23'%3E%3Cg id='Group_7003' data-name='Group 7003' transform='translate(-1162 -1398)'%3E%3Cg id='Ellipse_313' data-name='Ellipse 313' transform='translate(1162 1398)' fill='none' stroke='%23FF0000' stroke-width='1'%3E%3Ccircle cx='11.5' cy='11.5' r='11.5' stroke='none'/%3E%3Ccircle cx='11.5' cy='11.5' r='11' fill='none'/%3E%3C/g%3E%3Ctext id='_' data-name='!' transform='translate(1171 1414)' fill='%23FF0000' font-size='14' font-family='SegoeUI, Segoe UI'%3E%3Ctspan x='0' y='0'%3E!%3C/tspan%3E%3C/text%3E%3C/g%3E%3C/svg%3E%0A"); background-position: calc(100% - 10px); background-repeat: no-repeat; border-color: var(--m1); } .wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output { border-color: transparent; color: #ffb900; text-align: center; } .cf7mls-btns .cf7mls_next.action-button, .cf7mls-btns .cf7mls_back.action-button { background-color: var(--m1); border: none; padding: 0.6em 1.2em; cursor: pointer; /* MAX-WIDTH: 286px; */ /* min-width: 225px; */ WIDTH: 155px; color: var(--m3); height: 42px; border-radius: 0px; margin-left: 0px; } form.cf7mls input.wpcf7-form-control.wpcf7-submit { border-radius: 0px; padding: 13px 0px; font-weight: bold; margin: 16px 0px 9px; /* float: right; */ /* background-color: #0073aa; */ /* color: #ffffff; */ bottom: 0; right: 185px; } .trip-planner-form span.wpcf7-form-control.wpcf7-radio { display: flex ; flex-direction: column; } .trip-planner-form textarea { width: 50%; height:200px; } .trip-planner-form .wpcf7 form input[type="text"],.trip-planner-form .wpcf7 form input[type="email"],.trip-planner-form .wpcf7 form input[type="tel"],.trip-planner-form .wpcf7 form textarea,.trip-planner-form .wpcf7 form select { background-color: transparent; border: none; border-bottom: 1px solid var(--m1); border-radius: 0; padding: 20px 10px; font-size:25px; outline: none; } .trip-planner-form .wpcf7 form input::placeholder { font-size:25px; } .cf7mls-no-moving-animation .fieldset-cf7mls-wrapper .fieldset-cf7mls { transition: none; min-height: 150px; } .trip-planner h2{ text-align:center; color:var(--m1); } .trip-planner h3{ text-align:center; color:var(--m2); font-weight:400; } .trip-planner-form form{ padding:200px 0px; } .trip-planner-form .cf7mls-btns { min-height: 80px; /* position: absolute;*/ bottom: -17px; right: 10px; } /* 1) Make the label and text span positionable */ .wpcf7-form-control.wpcf7-radio .wpcf7-list-item label { position: relative; display: inline-block; padding-left: 30px; /* space for our custom box */ margin-right: 20px; /* gap between options */ cursor: pointer; user-select: none; line-height: 1.2; } /* 2) Hide the native radio input */ .wpcf7-form-control.wpcf7-radio .wpcf7-list-item label input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; } /* 3) Draw the empty rectangle */ .wpcf7-form-control.wpcf7-radio .wpcf7-list-item label span.wpcf7-list-item-label::before { content: ""; position: absolute; left: 0; top: 43%; transform: translateY(-50%); width: 20px; height: 20px; border: 2px solid var(--m1); border-radius: 1px; background: #fff; box-sizing: border-box; transition: border-color .2s, background .2s; } /* 4) When checked, fill & show tick */ .wpcf7-form-control.wpcf7-radio .wpcf7-list-item label input[type="radio"]:checked + span.wpcf7-list-item-label::before { content: "✔"; display: flex; align-items: center; justify-content: center; font-size: 14px; color: #fff; background: var(--m1); border-color: var(--m1); padding-top: 4px; } /* 5) Hover/focus state */ .wpcf7-form-control.wpcf7-radio .wpcf7-list-item label:hover span.wpcf7-list-item-label::before, .wpcf7-form-control.wpcf7-radio .wpcf7-list-item label input[type="radio"]:focus + span.wpcf7-list-item-label::before { border-color: var(--m1); } /* 1) Make the label and text span positionable */ .wpcf7-form-control.wpcf7-checkbox .wpcf7-list-item label { position: relative; display: inline-block; padding-left: 30px; /* space for our custom box */ margin-right: 20px; /* gap between options */ cursor: pointer; user-select: none; line-height: 1.2; } /* 2) Hide the native checkbox input */ .wpcf7-form-control.wpcf7-checkbox .wpcf7-list-item label input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; } /* 3) Draw the empty square */ .wpcf7-form-control.wpcf7-checkbox .wpcf7-list-item label span.wpcf7-list-item-label::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; border: 2px solid var(--m1); border-radius: 1px; background: #fff; box-sizing: border-box; transition: border-color .2s, background .2s; } /* 4) When checked, fill & show tick */ .wpcf7-form-control.wpcf7-checkbox .wpcf7-list-item label input[type="checkbox"]:checked + span.wpcf7-list-item-label::before { content: "✔"; display: flex; align-items: center; justify-content: center; font-size: 14px; color: #fff; background: var(--m1); border-color: var(--m1); padding-top:4px; } /* 5) Hover/focus state */ .wpcf7-form-control.wpcf7-checkbox .wpcf7-list-item label:hover span.wpcf7-list-item-label::before, .wpcf7-form-control.wpcf7-checkbox .wpcf7-list-item label input[type="checkbox"]:focus + span.wpcf7-list-item-label::before { border-color: var(--m1); } .trip-planner-form label{ font-size:25px; } .wpcf7 form .wpcf7-response-output { border: 2px solid transparent; } .fieldset-cf7mls-wrapper div.wpcf7-validation-errors .wpcf7-icon-wraning { margin-top: 0px; } ul.woocommerce-error { position: fixed; width: 100%; left: 0; bottom: 0; z-index: 99; margin: 0; list-style: none; padding: 0; margin: 0; padding: 22px var(--padfw); background-color: #ff2e00; } ul.woocommerce-error li { color: #fff; font-size: 16px; text-align: center; } ul.woocommerce-error span.woocommerce-Price-amount.amount { font-weight: bold; font-size: 16px; text-align: left; color: #fff; } .parallax-video-content span{ color:var(--m1); } .parallax-video-content h1{ font-size:var(--60); max-width:646px; } #newsletter_oroi{ min-width: 20px; min-height: 20px; width: unset; margin-right: 20px; float: left; -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 0%; width: 20px; height: 20px; border: 1px solid var(--m1); outline: none; margin-bottom: 10px; } #newsletter_oroi::before{ content: ''; display: block; width: 100%; height: 100%; background: transparent; } #newsletter_oroi:checked::before { content: '\2713'; font-size: 20px; color: var(--m1); text-align: center; line-height: 17px; } .chk_text{ padding-top: 1px; font-family: new-hero, sans-serif!important; } .chk_text a{ color: var(--m1); font-size: 12px; } .cpr a{ font-size: 12px; } .footer-wrapper li{ margin-bottom:13px; } #media_image-3{ margin-top:30px; } .email_submit { display: flex ; } .nl_icon_wrap{ font-size: var(--16); letter-spacing: 4px; color: var(--m1); padding-bottom: 20px; text-transform: uppercase; } .social_inner{ margin-top:15px; display:flex; gap:20px; } .cpl{ font-size:12px; } .cpr{ font-size:12px; } .menu-footer-col-2-container a{ font-family: new-hero, sans-serif!important; } .back-to-top{ position:absolute; top:75px; right:30px; } .newsletter-col { max-width: 34%; padding: 47px; margin-top: -112px; background-color: white; } /* Container for the video section */ .parallax-video-section { position: relative; height: 350px; overflow: hidden; } /* Style for the video element to cover the section */ .parallax-video-section video { position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; transform: translate(-50%, -50%); z-index: -1; will-change: transform; } /* Optional: Content overlaying the video */ .parallax-video-content { position: relative; z-index: 1; text-align: center; color: #fff; /* Center the content vertically and horizontally */ display: flex; justify-content: center; align-items: center; height: 100%; } .black-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.3); /* Adjust the opacity as needed */ z-index: 1; } /* End footer*/ /*homepage*/ .hero-carousel { width: 100%; height: 100vh; overflow: hidden; position: relative; } .slick-carousel { width: 100%; height: 100%; } .custom-slider-section .slide { position: relative; width: 100%; } .video-background { width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0; z-index: -1; } .slide-content { position: absolute; bottom: 40%; left: 50%; transform: translateX(-50%); text-align: center; color: #fff; width: 100%; max-width: 808px; z-index: 1; } .slide-content h2 { font-size: var(--55); margin: 0 0 1rem; } .slide-content h2 span { color:var(--m1); } .slide-content p { font-size: 32px; margin: 0 0 3.5rem; width: 75%; margin-left: auto; margin-right: auto; font-family: 'URW Geometric', sans-serif !important; line-height: 37px; font-weight: 300; } .hero-carousel .slide .video-background-overlay { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to top, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0) 100%); z-index: 1; /* Ensures it is above the video */ } .slide-content .btn { background: transparent; color: #000; padding: 10px 35px; text-decoration: none; border-radius: 50px; font-size: 1rem; border: 1px solid white; height: 57px; line-height: 34px; font-size: 15px; font-weight: 600; } .scroll { position: absolute; z-index: 1; left: 50%; bottom: 90px; transform: translateX(-50%); cursor: pointer; /* Indicates interactivity */ animation: bounce 2s infinite; max-width: 465px; } @keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); } 40% { transform: translateX(-50%) translateY(-10px); } 60% { transform: translateX(-50%) translateY(-5px); } } /* Transition classes */ img.transition-fade { animation: fadeIn 1s ease-in-out; } img.transition-slide { animation: slideIn 1s ease-in-out; } img.transition-zoom { animation: zoomIn 1s ease-in-out; } /* Keyframes definitions */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideIn { from { transform: translateX(100%); } to { transform: translateX(0); } } @keyframes zoomIn { from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity: 1; } } /* Container for the entire slider section */ /* Slick slider container override (optional) */ /* Each slide as a flex container */ .slider .slide { display: flex!important; align-items: stretch; overflow: hidden; } /* Common styling for columns */ .slider .slide .column { box-sizing: border-box; } /* Set widths for each column - adjust as needed */ /* Example: first column is 30%, second 35%, third 35% */ .slider .slide .col-1 { width: 36%; } .slider .slide .col-2 { width: 32%; } .slider .slide .col-33 { width: 32%; } /* Responsive image styling */ .column img { width: 100%; height: auto; display: block; } /* Additional styling for content elements */ .col-2 h2 { margin-bottom: 10px; } .col-2 .dots { font-size: 14px; color: #666; margin-bottom: 10px; } .col-3 .text { font-size: 16px; line-height: 1.5; color: #555; margin: 15px 0; } .btn { display: inline-block; padding: 10px 20px; background-color: #0073aa; color: #fff; text-decoration: none; border-radius: 3px; } .btn:hover { background-color: #005177; } /* Responsive adjustments */ @media (max-width: 768px) { .slider .slide { flex-direction: column; text-align: center; } .slider .slide .col-1, .slider .slide .col-2, .slider .slide .col-3 { width: 100%; padding: 10px 0; } } .custom-dots-container { margin-top: 0px; text-align: center; height: 30px; } .custom-slider-section .custom-dots-container { margin-bottom: 25px; } .custom-dots-container .slick-dots { margin: 0; padding: 0; text-align: start; } .custom-dots-container .slick-dots li { display: inline-block; margin: 0 5px; } .custom-dots-container .slick-dots li button { width: 12px; height: 12px; border-radius: 50%; background: #EEE2E2; border: none; font-size: 0; } .custom-dots-container .slick-dots li.slick-active button { background: var(--m1); } /* Ensure the column or image wrapper hides overflow */ .column, .image-wrapper { position: relative; overflow: hidden; } /* Make images responsive and fill their container */ .column img, .image-wrapper img { width: 100%; height: 50%; display: block; /* Ensure images stack properly in fade mode */ position: relative; z-index: 1; object-fit:cover; object-position:center; } /* Slick fade mode already positions slides absolutely. You can adjust these if needed. */ .custom-slider-section .slick-slide { position: absolute; top: 0; left: 0; width: 100%; opacity: 0; transition: opacity 0.5s ease; } .slick-slide.slick-active { opacity: 1; position: relative; } /* Animation class for sliding, fading, and scaling in */ img.transition-slide-cover { animation: slideCover 1s ease-out forwards; z-index: 2; /* Ensure the new image is above the previous one */ } /* Keyframes: - Start: The new image starts off-screen at the right edge, is slightly scaled down (0.9), and fully transparent. - End: It slides to its natural position, scales up to 1, and becomes fully opaque. */ @keyframes slideCover { 0% { opacity: 0; transform: translateX(100%) scale(0.8); } 100% { opacity: 1; transform: translateX(0) scale(1); } } .column.col-2 { display: flex ; flex-direction: column; justify-content: end; } .image-wrapper { } .full-image{ height:100%!important; } .group-text-slide { padding-top: 0px; padding-left: 0; height: 50%; display: flex ; flex-direction: column; justify-content: space-between; max-width: 330px; margin-left: auto; } .text { margin-top: auto; padding-bottom: 20px; } .about-text{ max-width:622px; margin:auto; } .group-col-2{ padding-left:34px; } .fixed-bottom{ display:none; } .custom-slider-section .custom-prev-arrow, .custom-slider-section .custom-next-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 61px; height: 94px; padding: 0; border: none; cursor: pointer; z-index: 10; background: rgba(180, 176, 176, 0.5); border-radius: 0; backdrop-filter: blur(7px) brightness(100%); } .custom-slider-section .custom-prev-arrow { left: 0px; } .custom-slider-section .custom-next-arrow { right: 0px; } .custom-slider-section .custom-prev-arrow img, .custom-slider-section .custom-next-arrow img { width: 21px; height: 39px; display: block; margin: auto; } .custom-section { padding: 40px 0; } .catamarans-cont a{ cursor: url('https://exclusivevipcatamarans.com/wp-content/uploads/2025/04/Group-387.png') 16 16, auto; } span.wpcf7-form-control.wpcf7-checkbox { display: flex ; flex-direction: column; } .custom-section { background-image: url(https://exclusivevipcatamarans.com/wp-content/uploads/2025/03/Group-214.png); background-position: center; background-repeat: no-repeat; background-size: auto; margin-bottom: 160px; } .col-left, .col-right { flex: 1; padding: 15px; } .cont-faq{ margin-bottom: -100px; } .number-title{ font-size:var(--20); } /* Accordion styling */ .custom-accordion .accordion-item { border-bottom: 1px solid #ddd; margin-bottom: 28px; box-shadow: 0px 0px 27px rgba(0, 0, 0, 0.15); } .custom-accordion .accordion-header { cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: 48px 30px; background: white; } .col-left .title-black{ max-width:530px; } .number p{ font-size:60px; font-weight:100; line-height:71px; color:var(--m1); } .number-title span{ color:var(--m1); } .col-right { flex: 1; padding: 0px; } .custom-accordion .accordion-content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; padding: 0 15px; background-color: white; } .custom-accordion .accordion-item.active .accordion-content { padding: 15px; } /* Icon visibility: plus icon is visible when closed, minus icon when open */ .custom-accordion .plus-icon { display: block; } .custom-accordion .minus-icon { display: none; } .custom-accordion .accordion-item.active .plus-icon { display: none; } .custom-accordion .accordion-item.active .minus-icon { display: block; } .image-wrap{ position:relative; } .col.col-offers-left{ max-width:33.3%; } .col.col-offers-right{ max-width:66.6%; } .img-overlay { position: absolute; width: 50%; height: 100%; backdrop-filter: blur(4px) brightness(100%); background-color: rgba(255, 255, 255, 0.6); top: 0px; right: 0px; transition:all 0.5s ease-in; display:flex; text-align:center; flex-direction:column; justify-content:center; align-items:center; padding:50px 40px; opacity:1; } .overlay-wrapper{ opacity:1; transition:all 0.3s ease-in; transition-delay: 0s; } .offers-cont{ margin-bottom:226px; overflow:visible; } .offers-cont .title-black { max-width:300px; } .offers-title{ font-size:var(--44); font-weight:bold; line-height:52px; color:var(--m2); margin-bottom:13px; } .offers-subtitle{ font-size:var(--23); font-weight:bold; line-height:33px; color:var(--m1); margin-bottom:49px; } .offers-pricetitle{ font-size:var(--23); font-weight:bold; line-height:33px; color:white; background-color:var(--m1); display: inline-block; padding: 2px 10px; } .offers-price{ font-size:105px; font-weight:bold; line-height:127px; color:var(--m1); } .offers-price span{ font-size:50px; font-weight:bold; line-height:127px; color:var(--m1); } .offers-text { font-size:var(--15); font-weight:300; line-height:25px; color:var(--m2); } .row-cat { display: flex; } /* All columns start at flex: 1 and smoothly transition */ .col-cat { flex: 1; margin: 10px; transition: flex 0.5s ease; } /* The hovered column expands to flex: 2 */ .col-cat:hover { flex: 2; } .card { position: relative; overflow: hidden; height: 600px; } .card img { width: 100%; display: block; height: 89%; object-fit: cover; object-position: center; } /* Title overlay: initially a small bar at the bottom */ .card-title { position: absolute; left: 50%; bottom: 10px; width: 70%; height: 116px; backdrop-filter: blur(10px) brightness(100%); background-color: rgba(255, 255, 255, 0.6); display: flex ; align-items: center; justify-content: center; font-size: var(--44); transition: all 1s ease; z-index: 65; color:var(--m1); font-weight:bold; flex-direction: column; margin: auto; transform: translatex(-50%); box-shadow: 0 0 10px rgba(0, 0, 0, 0.4); gap: 20px; padding-top: 20px; } /* When any column is hovered, the non-hovered columns expand their overlay to cover the image */ .row-cat:hover .col-cat:not(:hover) .card-title { height: 100%; width: 101%; backdrop-filter: blur(1px) brightness(100%); box-shadow: 0 0 10px rgba(0, 0, 0, 0.0); } .row-cat:hover .col-cat:not(:hover) .card img { filter: opacity(0.6) grayscale(1); transition: all 1s ease; } .card-details p { font-size:var(--15); font-weight:300; color:var(--m2); } /* Testimonials Section Container */ .testimonials-section { background-repeat: no-repeat; background-position: bottom left 20px; } .testimonials-section .slick-slide { margin: 0 13px; } /* the parent */ .testimonials-section .slick-list { margin: 0 -13px; } .slide-row.testimonial-text { max-width: 327px; margin-left: auto; margin-right: auto; } /* Row Container */ .testimonials-section .row { display: flex; flex-wrap: wrap; margin: 0 -15px; } /* Left Column */ .testimonials-section .col-left { width: 100%; max-width: 34%; padding: 0 15px; box-sizing: border-box; } /* Right Column */ .testimonials-section .col-right { width: 100%; max-width: 66%; padding: 0 15px; box-sizing: border-box; } /* Testimonials Subtitle & Title */ .testimonials-subtitle { font-size: 18px; color: #777; margin-bottom: 10px; } .testimonials-title { font-size: 28px; margin-bottom: 20px; color: #333; } /* Tab Buttons Container */ .testimonial-tabs-buttons { margin-bottom: 20px; } .testimonial-tabs-buttons .tab-button { display: inline-block; padding: 0; margin-right: 10px; margin-bottom: 10px; background-color: transparent; border: none; cursor: pointer; transition: background-color 0.3s; color: #E6E6E6; font-weight: bold; font-size: var(--36); } .testimonial-tabs-buttons .tab-button:hover, .testimonial-tabs-buttons .tab-button.active { color: var(--m1); } /* Section Image */ .section-image img { max-width: 100%; height: auto; display: block; margin-top: 20px; } /* Testimonial Slider Wrapper */ .testimonial-slider-wrapper { margin-bottom: 30px; padding-bottom: 30px; } /* Testimonial Slide */ .testimonial-slide { background: var(--m1); padding: 20px; margin: 10px 0; box-sizing: border-box; border-radius: 0px; min-height: 444px; box-shadow: 0 0 8px rgba(0, 0, 0, 0.2); align-content: start; } /* Slide Row styling */ .slide-row { margin-bottom: 15px; } /* Icon and Stars Row */ .icon-stars { display: flex ; align-items: center; justify-content: space-between; max-width: 327px; margin: auto; padding-bottom: 25px; } .testimonial-icon img { width: 50px; height: 50px; margin-right: 10px; border-radius: 50%; } .testimonial-stars .star { color: var(--m3); font-size: 20px; margin-right: 2px; } /* Testimonial Title */ .testimonial-title h3 { font-size: var(--23); margin: auto; color: white; line-height: 33px; max-width: 327px; min-height: 65px; } /* Testimonial Date */ .testimonial-date span { font-size: var(--14); color: var(--m2); } .page-id-121 .container-hero { justify-content: center; } .slide-row.testimonial-date { max-width: 327px; margin: auto; border-top: 1px solid #726143; padding-bottom: 25px; padding-top: 5px; } /* Testimonial Text */ .testimonial-text p { font-size: var(--15); color: var(--m3); line-height: 25px; } /* Responsive styling */ .testimonials-section .slick-dots { width: 100%; position: absolute; display: flex !important ; justify-content: end; align-items: center; bottom: -55px; } .testimonials-outer { background-repeat: no-repeat; background-position: bottom left 15px; } .testimonials-section .slick-dots li { max-width: 70px; width: 100%; height: 1px; background-color: #ccc; margin: 0; transition: background-color 0.3s; cursor: pointer; } .testimonials-section .slick-dots li button { display: none; } .testimonials-section .slick-dots li.slick-active { background-color: var(--m2); } .even-slide{ background: var(--m3); } .even-slide .testimonial-stars .star { color: var(--m1); } .even-slide .testimonial-title h3 { color: var(--m2); } .even-slide .testimonial-text p { color: var(--m2); } .comments { display: flex ; align-items: center; } .grade{ font-size: var(--24); padding:10px; background-color:var(--m1); color:var(--m3); font-weight:bold; } .count{ font-size: var(--18); color:var(--m1); padding-left:5px; line-height: 21px; max-width: 100px; } .testimonials-section .title-gold { margin-top:-30px; } .testimonials-section .custom-prev-arrow { left: -45px; } .testimonials-section .custom-next-arrow { right: -45px; } /*end homepage*/ /*contact*/ .container-hero { background-image:url('https://exclusivevipcatamarans.com/wp-content/uploads/2025/03/Mask-Group-1.jpg'); width:100%; height: auto; background-size:cover; background-position:center; background-repeat:no-repeat; aspect-ratio:3.67 / 1; display: flex ; position: relative; flex-direction: column; justify-content: space-between; } #breadcrumbs{ color: var(--m3); } #breadcrumbs a{ color: var(--m3); } .container-hero h1{ font-size:var(--55); color:var(--m3); padding-bottom: 25px; max-width: 438px; margin: auto; } .page-template-experience .container-hero h1{ max-width: 554px; } h1 span{ color:var(--m1); } /* Make the overall form background transparent */ .wpcf7 form { background: transparent; } /* Set background color for all input, textarea, and select fields */ .wpcf7 form input[type="text"], .wpcf7 form input[type="email"], .wpcf7 form input[type="tel"], .wpcf7 form textarea, .wpcf7 form select { background-color: #F9F9F9; } /* Set labels text color */ .wpcf7 form label { color: var(--m2); } /* Style the submit button with a background color from CSS variable */ .trip-planner-form .wpcf7 form input.wpcf7-submit { background-color: var(--m1); border: none; padding: 0.6em 1.2em; cursor: pointer; min-width: 155px; MAX-WIDTH: 155px; WIDTH: 155px; color: var(--m3); height: 42px; border-radius: 0px; position: absolute; bottom: 22px; right: 30px; } .wpcf7 form input.wpcf7-submit { background-color: var(--m1); border: none; padding: 0.6em 1.2em; cursor: pointer; min-width: 286px; MAX-WIDTH: 286px; WIDTH: 100%; color: var(--m3); height: 42px; border-radius: 0px; /* position: absolute; */ } .wpcf7-acceptance span{ margin:0!important; } .git-c{ color:var(--m1); } .wpcf7-list-item input[type="checkbox"] { min-width: 0!important; padding-right: 20px; height:auto!important; } .cf7-custom-form .cf7-row:last-child { margin-top: 64px; } /* Optional: Basic layout for rows */ .cf7-custom-form .cf7-row { display: flex; flex-wrap: wrap; gap: 2%; margin-bottom: 40px; } /* Ensure each field label in a row takes up a similar space */ .cf7-custom-form .cf7-row label { flex: 1; min-width: 286px; } .cf7-custom-form .cf7-row label input{ border:none; border-radius:0; height: 46px; padding-left:20px; min-width: 286px; width: 100%; } .cf7-custom-form .cf7-row label textarea{ border:none; border-radius:0; width: 100% !important; height: 200px !important; padding-left:20px; } .cf7-custom-form .cf7-row label select{ border:none; border-radius:0; height: 46px; padding-left:20px; width:100%; } .cf7-custom-form .cf7-row .message-col{ max-width:66%; } .cf7-custom-form .cf7-row .duration-col{ max-width:32%; } .wpcf7-spinner{DISPLAY:NONE;} /*end contact*/ /*about*/ .container-about-1 { max-width: calc(100vw - ((100vw - var(--mw)) / 2)); margin-left: auto; padding-left:var(--spacing-2); margin-bottom: -10px; } .container-about-2 { max-width: calc(100vw - ((100vw - var(--mw)) / 2)); margin-right: auto; padding-right:var(--spacing-2); } .container-about-1 .title-col { max-width: 619px; flex-shrink: 0; width: 100%; } .container-about-1 .title-col h2{ font-size:var(--44); font-weight:bold; color:var(--m2); line-height:59px; max-width:460px; } .container-about-1 .title-col h3{ font-size:var(--15); font-weight:bold; color:var(--m1); letter-spacing:5px; text-transform: uppercase; } .container-about-1 .img-col-1{ flex-grow: 1; } .container-about-1 .img-col-1 img{ object-fit:cover; } .container-about-2 .img-col-2 img{ object-fit:cover; } .container-about-2 .img-col-2{ flex-grow: 1; text-align: end; } .container-about-2 .text-col{ max-width: 646px; flex-shrink: 0; width:100%; } .container-about-2 .text-col h3{ font-size:var(--24); line-height:36px; } .about-row{ flex-wrap: nowrap; } .bbcrumbs * { color: var(--m2) !important; } /* Lamberts Container */ /* Main Content Box (Initially Visible) */ .lamberts-columns { display: flex; flex-grow: 0.5; overflow: hidden; transition: flex-grow 1.2s ease-in-out, width 1.2s ease-in-out, transform 1.2s ease-in-out; gap: 20px; width: 100%; /* Default width */ } /* Expanding Effect: Full Width When Active */ .lamberts-columns.extends { flex-grow: 1; width: 100%; /* Takes full width */ transform: scaleX(1); } /* Hide .lamberts-main (Slide Out Left) */ .lamberts-main.shrink { animation: shrinkMain 0.4s ease-in-out forwards; } /* Show .lamberts-main (Slide In from Left to Right) */ .lamberts-main.show { animation: expandMain 0.4s ease-in-out forwards; } .lm-main-inner-content { max-width: 420px; margin-left: auto; padding-right: 30px; padding-left: var(--spacing-4); } _.lm-main-inner-content { max-width: 28vw; width: max-content; } /* Keyframes for Smooth Shrinking (Flex & Slide Out) */ @keyframes shrinkMain { 0% { flex: 0 0 30%; opacity: 1; transform: translateX(0); } 20% { flex: 0 0 24%; opacity: 0.8; transform: translateX(-20); } 40% { flex: 0 0 18%; opacity: 0.6; transform: translateX(-40); } 60% { flex: 0 0 12%; opacity: 0.4; transform: translateX(-60); } 80% { flex: 0 0 6%; opacity: 0.2; transform: translateX(-80); } 100% { flex: 0 0 0%; opacity: 0; transform: translateX(-100%); } } /* Keyframes for Smooth Expanding (Flex & Slide In) */ @keyframes expandMain { 0% { flex: 0 0 0%; opacity: 0; transform: translateX(-100%); } 20% { flex: 0 0 6%; opacity: 0.2; transform: translateX(-80%); } 40% { flex: 0 0 12%; opacity: 0.4; transform: translateX(-60%); } 60% { flex: 0 0 18%; opacity: 0.6; transform: translateX(-40%); } 80% { flex: 0 0 24%; opacity: 0.8; transform: translateX(-20); } 100% { flex: 0 0 30%; opacity: 1; transform: translateX(0); } } #lamberts-section a { display: inline-block; height: 55.6px; } /* Default Column */ .lamberts-column { position: relative; flex: 1; height: 630px; background-size: cover; background-position: center; transition: flex 1.2s ease-in-out; cursor: pointer; width: auto; background-repeat:no-repeat; } span.column-close { width: 15px; height: 15px; position: absolute; right: 20px; top: 23px; transition: opacity 0.6s ease-in-out; transition-delay: 0.6s; opacity: 0; } .lamberts-column.active .lamberts-expanded-content .column-close{ opacity: 1; } .lamberts-column::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 120%); z-index: 2; } /* Active Column Expands */ .lamberts-column.active { flex-grow: 2; transform: scaleX(1.0); } .container-about-3{ padding-bottom:120px!important; } .lamberts-column:hover img { transform: scale(1.0); /* Slight zoom effect */ transition: transform 0.3s ease-in-out; } .lamberts-column img { width: 100%; height: 100%; object-fit: cover; object-position:center center; position: absolute; left: 0; top: 0; z-index: 1; transition: all 1.2s; } .lamberts-column.active img { transform: scale(1.0); } /* Titles at the Bottom */ .lamberts-column .lamberts-title { position: absolute; font-weight: 600; font-size: var(--12); color: white; transition: opacity 0.8s ease-in-out; text-align:center; z-index: 2; bottom: 35px; left: 50%; transform: translateX(-50%); letter-spacing: 4px; text-transform: uppercase; } .lamberts-column video{ object-fit: cover; object-position: center; width: 100%; height: 100%; } .card-info h3{ } .card-info{ padding-bottom:0 !important; } /* Hide Titles when Expanded */ .lamberts-column.active .lamberts-title { opacity: 0; } /* Expanded Content (Initially Hidden) */ .lamberts-column .lamberts-expanded-content { display:flex; opacity:0; position: absolute; top: 20px; left: 10%; width: 80%; color: white; transform: translate(0%, -50%); text-align: center; opacity: 0; transition: all 1s ease-in-out; } /* Expanded Content Becomes Visible */ .lamberts-column.active .lamberts-expanded-content { left: 50%; display: flex ; opacity: 1; transform: translate(-50%, 0); flex-direction: column; justify-content: end; height: 90%; z-index: 2; max-width: 400px; margin: auto !important; align-items: center; } .card-subtitle-first img { width: 52px; height: auto; object-fit: contain; position: static; } span.card-subtitle-first { z-index: 3; position: absolute; left: 50%; transform: translateX(-50%); top: 33px; opacity:1; transition: all 1s ease-in-out; } .plan-button { background-color: var(--m1); color: var(--m3) !important; border: 2px solid var(--m1); } .plan-button a{ color: var(--m3) !important; } .plan-button.plan-button{ padding: 5px 13px; border-radius: 4px; padding-top: 8px; } .lamberts-column.active span.card-subtitle-first { z-index: 3; position: absolute; left: 50%; transform: translateX(-50%); top: 33px; opacity:0; visibility:hidden; } .lamberts-expanded-content h4{ font-size:14px; line-height:22px; letter-spacing:6px; color:var(--m3); font-weight:400; } .card-info h3{ font-size:var(--15); font-weight:bold; line-height:57px; text-transform: uppercase; } .card-subtitle img{ width: auto; height: auto; object-fit: none; position: static; } .card-info{ padding-bottom:80px; } .card-info p:nth-child(3) { max-width: 90px; margin: auto; padding: 5px 0; margin-bottom: 20px; border-bottom: 1px solid var(--m1); } a.lamberts-button { border: 1px solid white; border-radius: 44px; padding: 15px 30px; } a.lamberts-button-main { border: 1px solid var(--m1); border-radius: 44px; padding: 15px 30px; color: var(--m1)!important; background-color: transparent; position: relative; overflow: hidden; transition: color 1s ease; z-index: 1; /* Ensure text stays on top */ text-align: center; } a.lamberts-button-main::before { content: ''; position: absolute; top: 50%; left: 50%; width: 0; height: 0; background: var(--m1); border-radius: 44px; transform: translate(-50%, -50%); transition: width 1s ease; z-index: -1; } a.lamberts-button-main:hover::before { width: 100%; height: 100%; } a.lamberts-button-main:hover { color: white!important; border-color: transparent; } .btn-contact.button-hover:hover { border-color: unset !important; } .lamberts-main p:nth-child(4) { margin-top:40px; margin-bottom: 50px; color:var(--m1); } .lamberts-main h2{ font-size:60px; font-weight:bold; line-height:65px; color:var(--m2); margin-bottom:25px; } .lamberts-expanded-content .card-info { opacity: 0; transition: opacity 3s ease-in-out; } /* Fade in when the column is active */ .lamberts-column.active .lamberts-expanded-content .card-info { opacity: 1!important; transition-delay:0.5s; } .lamberts-expanded-content .card-subtitle { opacity: 0; transition: opacity 0.6s ease-in-out; transition-delay: 0.6s; } /* Fade in when the column is active */ .lamberts-column.active .lamberts-expanded-content .card-subtitle { opacity: 1!important; } .title-black{ font-size: var(--44); color: var(--m2)!important; padding-bottom: 5px; line-height: 56px; } .title-black span { color: var(--m1); } .title-gold{ font-size: var(--15); font-weight: bold; color: var(--m1); letter-spacing: 4px; text-transform: uppercase; } .container-about-3 .about-text{ max-width:432px; margin:auto; } .container-about-3{ width: 100%; margin: 0 auto; } /*end about*/ /* faq */ .faq-text p{ max-width:484px; margin:auto; } .faq-container { margin-top:50px; } .faq-sections { display: flex; flex-wrap: wrap; /* Allow wrapping for responsiveness */ gap: 6%; justify-content: center; } .faq-column{ width: 47%; max-width: 593px; display: flex; flex-direction: column; } .faq-column.uneven .faq-box:last-child { margin-bottom: 0; /* Remove bottom margin on last item in uneven columns */ } .faq-box { border: 1px solid white; border-radius: 0px; padding: 40px; cursor: pointer; transition: all 0.3s ease; overflow: hidden; /* height: 114px; Remove fixed height */ display: flex; flex-direction: column; justify-content: center; align-items: start; position: relative; width: 100%; max-width: 593px; margin-bottom: 47px; transition: box-shadow 0.3s ease; /* Add transition for max-height */ transition: max-height 0.3s ease-in-out, background-color 0.3s ease; } .faq-box .faq-arrow-close { position: absolute; top: 45px; right: 40px; display: block; transition: transform 0.3s ease; /* Smooth transition for arrow rotation */ } .faq-box.active .faq-arrow-close{ display:none; } .faq-box.active .faq-arrow-open{ display:block; } .faq-box .faq-arrow-open { position: absolute; top: 45px; right: 40px; display: none; transition: transform 0.3s ease; /* Smooth transition for arrow rotation */ } .faq-box.active { } .faq-box.active .faq-title{ color:var(--m2); } .faq-title { font-size: var(--24); font-weight: bold; text-align: center; color:var(--m2); transition: color 0.3s ease; /* Smooth color transition */ } .faq-content { margin-top: 10px; overflow: hidden; /* Important for transition */ transition: max-height 0.3s ease-in-out; } .faq-box.active .faq-content { display: block; max-height: 1000px; /* Or a suitable large value */ } .faq-question { margin-bottom: 10px; } .faq-question-title { font-size: var(--18); font-weight: 300; cursor: pointer; display: flex; align-items: start; justify-content: start; margin-bottom:20px; margin-top:15px; color:var(--m2); } .faq-question .plus-sign { margin-right: 10px; display: block; transition: transform 0.3s ease; /* Smooth transition for icon rotation */ width: 19px; } .faq-question .minus-sign { margin-right: 10px; display: none; transition: transform 0.3s ease; /* Smooth transition for icon rotation */ } .faq-question.active .plus-sign { margin-right: 10px; display:none; } .faq-question.active .minus-sign { margin-right: 10px; display:block; } .faq-question.active .faq-question-title{ margin-bottom:10px; } .faq-answer { background-color: transparent; margin-top: 5px; overflow: hidden; max-height: 0; transition: max-height 0.3s ease-in-out; color: var(--m2); font-size: 15px; } .faq-question.active .faq-answer { display: block; max-height: 1000px; /* Or a suitable large value */ } .hidden-question { display: none; } .faq-toggle button{ border: none; border-radius: 0; background: none; padding: 5px 0; font-size: var(--16); font-weight: 500; font-family: 'new-hero', sans-serif; color: var(--m1); letter-spacing: 1px; } /* end faq */ /* crew */ .crew-text { max-width: 484px; margin: auto; } .crew-title{ font-size: var(--30); text-transform: uppercase; letter-spacing: 4px; } .crew-title span{ color:var(--m1); } .my-section .my-column { position: relative; overflow: hidden; margin-bottom: 30px; max-width:calc(33.333% - 33.333px) ; transition:all 1s ease-in-out; padding-bottom:50px; max-height:600px; min-width: 350px; } .my-section .my-column .info-title { flex: 1 1 100%; position: absolute; top: 83%; transition:all 0.8s ease-in-out; z-index: 2; } .my-image { max-width: 100%; max-height: 100%; margin-bottom: 10px; width: 100%; transition: width 1s ease-in-out, max-width 0.9s ease-in-out, max-height 0.9s ease-in-out, margin-bottom 1s ease-in-out ,transform 0.95s ease-in-out; flex: 1 1 100%; position:absolute; z-index: 2; } .my-title { font-weight: bold; margin-bottom: 5px; font-size:var(--24); } .my-name { font-size:var(--20); font-weight: 300; margin-bottom: 10px; } .my-description { font-size: 14px; text-align: left; opacity: 0; transition: all 0.5s ease-in; margin-top: 170px; } .my-column:hover .my-description { opacity: 1; max-height:400px; overflow:auto; transition-delay: 0s; transition: all 0.5s ease-in; transition-delay: 0.7s; padding-right: 12px; } .my-column:hover .my-description p{ font-size:var(--14); font-weight:100; } .my-section .row{ gap:50px; justify-content: center; } .my-section .row:first-child { border-bottom:1px solid #707070; } .my-section .row:last-child { margin-top:110px; } .my-section .my-column-2 { position: relative; margin-bottom: 30px; max-width: calc(33.333% - 33.333px); padding-bottom: 50px; max-height: 600px; overflow: hidden; transition: 1s ease-in-out; } .my-column:hover { background-color:var(--m3); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* subtle box shadow */ padding:0 30px; } .my-column:hover .my-image { max-width: 32.5%; transform: translateX(160%); max-height: 22%; object-fit: cover; object-position: top; width: 100%; } .my-column:hover .info-title { max-width: 60%; top: 12%; } /* Scrollbar (WebKit: Chrome, Edge, Safari) */ .my-description::-webkit-scrollbar { width: 1px; /* Scrollbar width */ margin: 5px; /* Creates a gap between track and container edges */ } .my-description::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px #EEF5FF; -webkit-border-radius: 10px; border-radius: 10px; } .my-description::-webkit-scrollbar-thumb { -webkit-border-radius: 10px; border-radius: 10px; background: var(--m2) ; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); } /* 🚀 Remove the top and bottom scrollbar arrows completely */ .my-description::-webkit-scrollbar-button { display: none; width: 0; height: 0; } .my-section-outer { background-image: linear-gradient(to bottom, white 0%, transparent 10%), url('https://exclusivevipcatamarans.com/wp-content/uploads/2025/03/Group-237.png'); background-size: cover; background-position: center; } .button-read-crew{ display:none; } /* end crew */ /* experience */ .col-dest { max-width: 50%; display: flex ; flex-direction: column; justify-content: center; } .inner-dest{ max-width:530px; } .destination-slider-section { width: 100%; overflow: hidden; } .destination-slider-section .slick-track { display: flex !important; } .destination-slider-section .slick-slide { flex: 1; transition: flex 1s ease-in-out; } .destination-slider-section .destination-slide { position: relative; height: 460px; /* Adjust height as needed */ padding: 0; margin: 0; overflow: hidden; } .destination-slider-section .slide-inner { display: block; height: 100%; background-size: cover; background-position: center; position: relative; text-decoration: none; } .destination-slider-section .destination-title { position: absolute; top: 30px; left: 0; right: 0; text-align: center; color: #fff; font-size: 15px; z-index: 2; text-transform:uppercase; letter-spacing:5px; } .destination-slider-section .slick-slide:hover { flex: 2; } .destination-slider-section .slick-slide { padding: 0 !important; margin: 0 !important; } .destination-slider-section .slick-list { margin: 0 !important; padding: 0 !important; } .destination-slider-section .slick-slide img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } .btn-primary{ color:var(--m1)!important; border:2px solid var(--m1); background-color:var(--m3); font-size:16px; font-weight:300; padding: 15px 30px; display:inline-block!important; border-radius: 4px; } button.wc-block-components-button.wp-element-button.wc-block-components-checkout-place-order-button.contained { color:var(--m3); border:2px solid var(--m1); background-color:var(--m1); font-size:16px; font-weight:300; padding: 15px 30px; display:inline-block!important; border-radius: 4px; max-width: 160px; } button.wc-block-components-button.wp-element-button.wc-block-components-checkout-place-order-button.contained:hover { color:var(--m1)!important; background-color:var(--m3); } .btn-primary:hover{ color:var(--m3)!important; background-color:var(--m1); } .destination-slider-section .custom-prev-arrow, .destination-slider-section .custom-next-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 61px; height: 94px; padding: 0; border: none; cursor: pointer; z-index: 10; background: rgba(180, 176, 176, 0.5); border-radius: 0; backdrop-filter: blur(7px) brightness(100%); } .destination-slider-section .custom-prev-arrow { left: 0px; } .destination-slider-section .custom-next-arrow { right: 0px; } .page-template-destinations .destination-slider-section .slide-inner { cursor: url('https://exclusivevipcatamarans.com/wp-content/uploads/2025/04/Group-386.svg'), auto; } .destination-slider-section .custom-prev-arrow img, .destination-slider-section .custom-next-arrow img { width: 21px; height: 39px; display: block; margin: auto; } /* Custom Dots (Lines) */ .destination-slider-section .slick-dots { top: -20px; right: 26px; width: 100%; position: absolute; display: flex !important ; justify-content: end; align-items: center; } .destination-slider-section .slick-dots li { max-width:70px; width: 100%; height: 1px; background-color: #ccc; margin: 0; transition: background-color 0.3s; cursor: pointer; } .destination-slider-section .slick-dots li button { display: none; /* Hide default buttons */ } .destination-slider-section .slick-dots li.slick-active { background-color: var(--m2); /* Active dot color */ } /* end experience */ /* destinations */ .destination-section-wrapper { display: flex; gap: 40px; margin-top: 50px; } .destination-section-wrapper .left-column, .destination-section-wrapper .right-column { width: 50%!important; } .destination-list { list-style: none; padding: 0; margin: 0; } .destination-item { padding: 13px; cursor: pointer; position: relative; border-bottom: 1px solid #E4E4E4; } .destination-item-title { font-size: var(--22); color: var(--m1); font-weight: 600; } .destination-title{ font-size: var(--22); color: var(--m1); font-weight: 600; } .destination-item.active { background-color:#E4E4E4; color: black; } .destination-item.active .destination-item-title{ background-color:#E4E4E4; color: black; } /* Basic styling for images in right column */ .destination-item-image { max-width: 270px; height: auto; border-radius: 0; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); position: absolute; top: -110px; left: 37%; aspect-ratio: 1 / 1; z-index: 10; transition: transform 0.3s ease, top 0.3s ease, left 0.3s ease; } .destination-item:nth-child(3n+1) .destination-item-image { transform: rotate(-10deg); } .destination-item:nth-child(3n+2) .destination-item-image { transform: rotate(5deg); left: 39%; } .destination-item:nth-child(3n+3) .destination-item-image { transform: rotate(-5deg); left: 35%; } .dest-section-subtitle{ font-size: var(--15); font-weight: bold; color: var(--m1); letter-spacing: 4px; text-transform: uppercase; margin-bottom:25px; margin-top:-30px; } .dest-section-title{ font-size: var(--44); font-weight: bold; color: var(--m2); line-height: 59px; max-width: 402px; margin-bottom:40px; } .destination-text { max-width:427px; } .img-icon-dest{ padding-top: 12px; } .row-dest-group { display: flex ; align-items: start; gap: 10px; } /* end destinations */ /* single destinations */ .plan-trip p{ max-width:622px; margin:auto; } .plan-trip h2{ font-size:var(--44); font-weight:bold; } .plan-trip h2 span{ color:var(--m1); } /* end single destinations */ /* booking */ .search-form { max-width: 625px; /* height: 48px; */ position: absolute; bottom: 35%; left: 50%; transform: translateX(-50%); background-color: var(--m3); z-index: 1; border-radius: 5px; width: 100%; } label.yith-wcbk-booking-search-form__row__label { font-size: 13px; color: var(--m1); font-weight: 400 !important; } .yith-wcbk-date-picker-wrapper input.yith-wcbk-date-picker--formatted { border: 0px solid var(--yith-wcbk-border-color)!important; padding: 0!important; height: unset!important; border-right: 1px solid #C5C5C5!important; } .yith-wcbk-booking-search-form .yith-wcbk-booking-field, .yith-wcbk-booking-search-form select{ padding: 0!important; border: 0px solid var(--yith-wcbk-border-color)!important; min-height: unset!important; } .yith-wcbk-booking-search-form { padding:0!important; } .yith-wcbk-booking-search-form.yith-wcbk-booking-search-form--horizontal-layout .yith-wcbk-booking-search-form__fields { flex-wrap: nowrap!important; } .yith-wcbk-booking-search-form.yith-wcbk-booking-search-form--horizontal-layout .yith-wcbk-booking-field, .yith-wcbk-booking-search-form.yith-wcbk-booking-search-form--horizontal-layout .yith-wcbk-date-picker-wrapper, .yith-wcbk-booking-search-form.yith-wcbk-booking-search-form--horizontal-layout select, .yith-wcbk-booking-search-form.yith-wcbk-booking-search-form--horizontal-layout .yith-wcbk-date-range-picker, .yith-wcbk-booking-search-form.yith-wcbk-booking-search-form--horizontal-layout .yith-wcbk-people-selector__toggle-handler { height: 20px!important; } .yith-wcbk-booking-search-form.yith-wcbk-booking-search-form--horizontal-layout .yith-wcbk-booking-search-form__fields>* { flex: unset!important; margin-right: 0px!important; padding: 0px 0 0px 22px!important; } .yith-wcbk-booking-search-form.yith-wcbk-booking-search-form--horizontal-layout button.yith-wcbk-booking-search-form-submit { height: 52px !important; background-color: var(--m1) !important; color: white !important; border-top-left-radius: 0 !important; border-top-right-radius: 4px !important; border-bottom-left-radius: 0px !important; border-bottom-right-radius: 4px !important; font-size: var(--13); font-weight: 300; width: 101%!important; } .yith-wcbk-booking-search-form .yith-wcbk-booking-search-form__row__label { margin: .4em 0 0em!important; } .yith-wcbk-booking-search-form.yith-wcbk-booking-search-form--horizontal-layout .yith-wcbk-booking-search-form__row--submit { align-self: center!important; padding-left: 0px !important; } .subnav-wrapper { box-shadow: 0 0 6px rgba(0, 0, 0, 0.1); padding: 12px 0; } .product-subnav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: start; gap: 5%; } .product-subnav li { margin: 0; } .product-subnav a { text-decoration: none; color: var(--m2); font-weight: 300; padding: 10px 0px; border-bottom: 2px solid transparent; transition: all 0.3s ease; font-size: 15px; } .product-subnav a:hover, .product-subnav a.active { border-bottom: 2px solid #000; color: #000; } .yacht-highlights-section { padding: 0; max-width: calc( 100vw - (( 100vw - 1306px ) / 2)); margin-left: auto; padding-left:var(--spacing-2); } .highlights-wrapper { display: flex !important ; flex-wrap: wrap; gap: 40px; } .highlights-left { width: calc(50% - 20px); min-width: 300px; margin-top:80px; } .highlights-right{ width: calc(50% - 20px); } .yacht-specs { font-size: 16px; font-weight: bold; margin-bottom: 10px; color:var(--m2); } .yacht-intro { margin-bottom: 58px; font-size: 15px; line-height: 25px; font-weight: 300; max-width: 510px; margin-top: 25px; } .highlight-title{ color:var(--m2); line-height:52px; font-size:var(--24); font-weight:bold; margin-bottom: 36px; margin-top: 36px; } .highlight-texts{ align-self: end; } .highlight-items { display: flex; flex-direction: column; gap: 20px; } .highlight-item { display: flex; gap: 15px; align-items: flex-start; } .highlight-icon { width: 16px; height: 17px; object-fit: contain; margin-top: 0px; } .highlight-texts strong { display: block; font-weight: 300; margin-bottom: 25px; font-size: var(--16); } .view-more { margin-top: 30px; } .view-more a { text-decoration: none; color: var(--m1); font-weight: 300; } .view-more .arrow { font-size: 20px; margin-left: 5px; } .hidden-highlight { display: none; } .yacht-gallery-slider { width: 100%; margin: 0 auto; } .gallery-slide { display: flex !important ; gap: 10px; } .gallery-left { width: calc(50% - -4px); } .gallery-left img { height: 100%; width: 100%; object-fit: cover; display: block; } .gallery-right { width: calc(50% - 5px); display: flex; flex-direction: column; gap: 10px; } .gallery-right .top-img, .gallery-right .bottom-img { flex: 1; } .gallery-right img { width: 100%; height: 100%; object-fit: cover; display: block; } .desc-container { display: flex; align-items: flex-start; gap: 40px; } .desc-left { max-width: 65%; } .desc-right { max-width: 35%; position: sticky; top: 100px; } .bento-slide { padding: 20px 0; } .bento-layout { display: flex ; flex-direction: column; gap: 7px; } .row-1-outer { display: flex!important; gap: 7px; } .col-1 { width: calc( 33.33% - ( 7px / 2 )); } .col-2 { width: calc( 66.6% - ( 7px / 2 )); display: flex!important; flex-direction: column; gap: 7px; } .row-inner { display: flex; gap: 7px; } .row-inner.full-width { display: block; height: 100%; } .row-inner.full-width img { width: 100%; height: auto; display: block; } .col-leftt, .col-rightt { width: 50%; } .two-thirds { width: 66.66%; } .one-third { width: 33.33%; } .bento-layout img { width: 100%; height: auto; display: block; object-fit: cover; object-position: center; border-radius: 0px; } .col-1 img { aspect-ratio: 258 / 391; } .col-leftt img{ aspect-ratio: 260 / 194; } .col-rightt img{ aspect-ratio: 260 / 194; } .row-inner.full-width img { aspect-ratio: 527 / 196; } .two-thirds img { aspect-ratio: 527 / 196; } .one-third img { aspect-ratio: 260 / 194; } _.specs-two-col { display: flex!important; _gap: 30%; padding:20px 0; justify-content:space-between; } .specs-view-more { margin-top: 40px; cursor:pointer; } .specs-view-more a{ color:var(--m1); } _.specs-two-col ul { list-style: none; padding: 0; } .woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-noreviews, p.no-comments { background-color: transparent!important; clear: both; /* padding: 10px; */ color: green; } .specs-two-col ul li{ padding: 0px 0; font-size: var(--14); padding-top:20px; } .specs-two-col ul li:first-child{ padding-top:0px; } ul#specs-right { _border-left: 1px solid var(--m1); _padding-left: 64px; } _.specs-two-col ul { width: calc(50% - 32px); padding-right: 15px; } ul#specs-left { _border-right: 1px solid var(--m1); } .glightbox img { max-width: 100%; height: auto; display: block; } .water-toys-wrapper { display: flex!important; gap: 40px; align-items: flex-start; } .water-toys-left { max-width: 65%; } .water-toys-right { max-width: 35%; position: sticky; top: 100px; padding: 20px; min-height: 480px; box-shadow: 0 0 6px rgba(0, 0, 0, 0.2); border-radius: 4px; width: 100%; } .water-toys-tab-buttons { display: flex !important ; gap: 10px; margin-bottom: 20px; } .tab-button img { width: 60px; height: 60px; object-fit: cover; cursor: pointer; } .tab-gallery { margin-bottom: 40px; } .slide-top { display: flex ; gap: 10px; width: 100%; flex-wrap: wrap; } .slide-top img { aspect-ratio: 319 / 222; object-fit: cover; } .slide-bottom img { width: 100%; aspect-ratio: 648 / 233; object-fit: cover; display: block; } .slide-top a{ width:100%; display:block; } .guestbook-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); gap: 10px; } .guestbook-grid img { width: 100%; height: auto; object-fit: cover; aspect-ratio: 260 / 197; } .woocommerce-breadcrumb { display:none; } .crew-member { display: flex ; margin-bottom: 110px; gap: 5%; align-items: start; flex-wrap: wrap; } .crew-image { max-width: 32%; } .crew-details { max-width: 63%; margin-top: 15%; } .water-toys-tab-sliders .slide { width: 100%; display: flex!important ; flex-wrap: wrap; flex-direction: column; } .slide-top-left { max-width: calc(50% - 5px); width: 100%; } .slide-top-right { max-width: calc(50% - 5px); width: 100%; } .water-toys-button { width: 107px; height: 107px; display: flex ; box-shadow: 0 0 12px 2px rgba(0, 0, 0, 0.1); } .water-toys-button-row { width: 13%; display: flex ; gap:15px; flex-direction: column; justify-content: center; } .water-toys-content-row { width: 82%; } .water-toys-tabs { display: flex ; gap: 5%; } .water-toys-button img{ margin: auto; } .row-wt { display: flex ; justify-content: start; align-items: baseline; } .row-wt p { max-width: 489px; margin-left: auto; font-size: 14px; line-height: 23px; } .yacht-location-map iframe { aspect-ratio: 798 / 515; width: 100%; } .guestbook-slider .custom-prev-arrow, .guestbook-slider .custom-next-arrow{ top: 64%; transform: translateY(-64%); } .custom-prev-arrow, .custom-next-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 61px; height: 94px; padding: 0; border: none; cursor: pointer; z-index: 10; background: rgba(180, 176, 176, 0.5); border-radius: 0; backdrop-filter: blur(7px) brightness(100%); } .custom-next-arrow { right: -30px; } .custom-prev-arrow { left: -30px; } .yacht-gallery-slider .custom-next-arrow { right: 0px; } .yacht-gallery-slider .custom-prev-arrow { left: 0px; } .custom-prev-arrow img, .custom-next-arrow img { width: 21px; height: 39px; display: block; margin: auto; } .wp-video-shortcode video, video.wp-video-shortcode , .wp-video , .mejs-overlay , .mejs-mediaelement , .mejs-container { max-width: 100%; display: block; object-fit: cover; aspect-ratio: 799 / 538; width: 100%!important; height: auto!important; } .specs { padding: 50px 0px; position:relative; } .specs::before{ content:""; width:110%; height:100%; top:0; right:0; position:absolute; background-color:#F8F8F8; z-index: -1; } .icons-gal{ display: flex ; gap: 33px; justify-content: center; align-items: center; } .icons-gal img{ height:17px; } section#description { margin-top: 80px; } .yacht-full-description { margin-top: 88px; font-size: var(--15); font-weight: 200; } .crew-details h4 { font-size: var(--24); font-weight: bold; } .crew-details h5{ font-size: var(--20); font-weight: 200; } .crew-details a{ color:var(--m1); } .crew-details p{ margin-top:15px; } h3.highlight-subtitle { font-size: var(--16); font-weight: 300; color: var(--m1); margin-bottom:15px; } section#water-toys { margin-top: 144px; } .custom-dots-2 ul.slick-dots { text-align: end; } img.inst-image { margin-right: 10px; margin-top: -5px; } .follow-on-instagram p{ font-size:var(--24); font-weight:bold; } button.yith-wcbk-add-to-cart-button{ width: 100%; padding: 15px; background-color: var(--m1); color: var(--m3); border-radius: 4px; } .yith-wcbk-booking-form label.yith-wcbk-booking-form__label { font-weight: 200!important; font-size: var(--15); margin: 35px 0px 15px 0px!important; } p.price { font-size: var(--20); padding-bottom: 20px; border-bottom: 1px solid #c5c5c5; } .yith-wcbk-booking-form input:not([type='checkbox']), .yith-wcbk-booking-form input.yith-wcbk-date-picker--formatted, .yith-wcbk-booking-form select, .yith-wcbk-booking-form textarea { border: 1px solid var(--yith-wcbk-border-color) !important; } #secondary{ display:none; } .custom-product-card { background: #fff; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); position: relative; overflow: hidden; margin: 20px auto; max-width:591px; } /* Slider container */ .slider-container { position: relative; width: 100%; height: auto; } .slider-item img { width: 100%; display: block; } .slider-dots { position: absolute; bottom: 10px; left: 10px; /* adjust styling as needed */ } .boat-specs { position: absolute; bottom: 10px; right: 15px; color: var(--m3); padding: 4px 8px; border-radius: 4px; font-size: var(--13); } /* Reviews box top-right */ .reviews-box { position: absolute; top: 10px; right: 5px; background: #fff; padding: 7px 18px; border-radius: 0px; font-size: var(--13); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); padding-right: 0px; color:var(--m1) } .reviews-box .rating { font-weight: bold; margin-left: 20px; font-size: var(--20); background-color: var(--m1); padding: 13px; color: var(--m3); } /* Info section: 2 columns */ .product-info { display: flex; flex-wrap: wrap; padding: 20px; } .left-column { width: 70%; padding-right: 20px; } .right-column { width: 30%; } /* Features list */ .boat-features { list-style: none; margin: 0; padding: 0; } .boat-feature-item { display: flex; align-items: center; margin-bottom: 20px; } .feature-icon { width: 15px; height: 17px; margin-right: 8px; } /* Rate info */ .rate-info { margin-bottom: 27px; display: flex ; gap: 15px; max-width: 200px; margin-left: auto; margin-right: auto; } .rate-label { display: block; font-weight: 100; margin-bottom: 4px; font-size: var(--11); text-align: end; color:var(--m1); } .rate-from { display: inline-block; margin-right: 10px; font-size: var(--26); color: var(--m1); font-weight: bold; } .expenses-info { display: inline-block; font-size: var(--11); font-weight: 100; color: var(--m1); } /* Example button style */ .view-more-btn { display: inline-block; background-color: #0073aa; color: var(--m3); padding: 8px 16px; border-radius: 4px; text-decoration: none; margin-top: 10px; } .view-more-btn:hover { background-color: #005f87; } .slider-for1 img{ object-fit:cover; aspect-ratio: 591 / 300; } .woocommerce-shop .custom-dots-container { margin-top: -40px; text-align: center; /* height: 30px; */ z-index: 6; position: absolute; margin-left: 20px; } .product-title{ color:var(--m1); font-size:var(--36); } .card-text{ font-size:var(--13); font-weight:200; line-height:22px; } span.feature-text { font-size: var(--14); } .rate-1 { width: 40%; } .rate-2 { width: 60%; padding-left:15px; border-left:1px solid var(--m1); } .water-toys-button.active{ background-color: var(--m1); } .woocommerce-result-count, .woocommerce-ordering{ display:none; } ul.products.columns-3 li.product { width: 45%!important; margin-right: 0%!important; } .products.columns-3{ display: flex ; gap: 40px; justify-content: center; flex-wrap: wrap; } .woocommerce-product-gallery, .summary.entry-summary, .related.products, .product_meta, .water-toys-right .price, .wc-block-components-checkout-return-to-cart-button { display:none! important; } ul.products li.product { margin-bottom: 110px!important; } .postid-521 .testimonials-section .testimonial-tabs-buttons .tab-button[data-tab="1"]{ display:none; } .postid-521 .testimonials-section .testimonial-slider-wrapper[data-tab-content="1"]{ display:none; } .postid-584 .testimonials-section .testimonial-tabs-buttons .tab-button[data-tab="0"]{ display:none; } .postid-584 .testimonials-section .testimonial-slider-wrapper[data-tab-content="0"]{ display:none!important; } .postid-584 .testimonials-section .testimonial-slider-wrapper[data-tab-content="1"]{ display:block!important; } .postid-584 .testimonials-section .testimonial-tabs-buttons .tab-button[data-tab="1"]{ color: var(--m1); } .wp-block-woocommerce-checkout-shipping-method-block { display: none; } .wp-block-woocommerce-checkout-pickup-options-block { display: none; } .wc-block-checkout__billing-fields h2.wc-block-components-title.wc-block-components-checkout-step__title { display: none; } .wc-block-checkout__billing-fields p.wc-block-components-checkout-step__description { display: none; } .wc-block-components-form .wc-block-components-checkout-step { background: none; border: none; margin: 0!important; padding: 0; position: relative; } .wc-block-checkout__add-note .wc-block-components-checkbox { line-height: 1; margin-bottom: 48px!important; margin-top: 20px !important; display:none; } .wc-block-components-form .wc-block-components-checkout-step { margin-bottom: -24px !important; } p#wc-guest-checkout-notice { display: none; } .wp-block-woocommerce-checkout-order-summary-subtotal-block.wc-block-components-totals-wrapper { display: none; } .wp-block-woocommerce-checkout-order-summary-coupon-form-block.wc-block-components-totals-wrapper { display: none; } .wc-block-components-totals-item.wc-block-components-totals-footer-item { display: none; } .wc-block-components-totals-wrapper { display: none; } .wc-block-components-totals-wrapper:first-child { display: block!important; } .wp-block-woocommerce-checkout-order-summary-cart-items-block { display: none; } .wp-block-woocommerce-checkout-order-summary-fee-block { display: none; } .wp-block-woocommerce-checkout-order-summary-taxes-block { display: none; } button.wc-block-components-button.wp-element-button.wc-block-components-checkout-place-order-button.contained { padding: 15px 05px; } .wc-block-components-checkout-order-summary__title { display: none !important; } .wp-block-woocommerce-checkout-order-summary-totals-block { display: none; } .wc-block-components-order-summary .wc-block-components-order-summary-item__image { margin-top: 10px; padding-bottom: 16px; position: relative; width: 150px!important; } .wc-block-components-order-summary .wc-block-components-order-summary-item__image>img { max-width: 150px!important; width: 150px!important; } .wc-block-components-order-summary-item__total-price { display: none!important; } .wc-block-components-product-name { font-size: 1.5rem!important; font-weight: 600 !important; overflow-wrap: anywhere; word-break: break-word; } .wp-block-woocommerce-checkout-actions-block .wc-block-checkout__actions_row .wc-block-components-checkout-place-order-button .wc-block-components-checkout-place-order-button__text { justify-content: center; } ul.woocommerce-order-overview.woocommerce-thankyou-order-details.order_details { display: none; } section.woocommerce-order-details { display: none!important; } section.woocommerce-customer-details { display: none!important; } .woocommerce-order{ padding: 100px 0px; font-size: 24px; line-height: 1; color: var(--m1); font-weight:500; text-align:center; } .woocommerce-order p{ color: var(--m2) } .thank-you{ text-align:center; padding:100px 0px; } .thank-you h2{ color:var(--m1); } .thank-you h3{ color:var(--m1); } /*SINGLE PRODUCT*/ .spec_list { display: flex; flex-wrap: wrap; border-bottom: solid 1px var(--m1); padding-bottom: 20px; padding-top: 0; } .spec_list li { width: 50%; margin-top: 20px; font-size: 14px; } h3.highlight-subtitle.spec_title { line-height: 1; margin-bottom: 0; } .specs_wrap { margin-bottom: 25px; } .spec_list li span { color: #515151; } .spec_list li strong { color: var(--m2); font-weight: 500; } button#loadMoreSpecs { all: unset; color: var(--m1); font-family: new-hero, sans-serif; font-size: 16px; line-height: 14px; font-weight: 300; margin-top: 40px; cursor: pointer; } /*END OF SINGLE PRODUCT*/ /* end booking */ /* responsive */ /* Hide the burger button and mobile menu by default */ #burger-button, #burger-menu { display: none; } /* Desktop navigation: show the primary menu */ .primary-menu { display: block; } /* Hide mobile slider on larger screens */ @media (min-width: 1101px) { .mobile-slider { display: none; } } @media screen and (max-width: 1140px) { .fixed-footer { display: none; } .fixed-footer-epik { display: none; } .fixed-footer { display: none; } .fixed-footer-epik { display: none; } .whatapp_trip_wrap { max-width: 200px; margin: 0 auto; display: flex !important; justify-content: center; padding-bottom: 27px; } .whatapp_trip_wrap a { display: block; max-width: 53px; margin: 0 15px; } .whatapp_trip_wrap a img { display: block; width: 100%; } .home .fixed-footer { display: block; } .home .fixed-footer-epik { display: block; } } /*END OF 1140*/ /* Mobile styles for max-width: 1100px */ @media (max-width: 1100px) { /* Hide the desktop navigation */ .primary-menu { display: none; } /* Show burger button */ #burger-button { display: block; background: none; border: none; cursor: pointer; margin-left: auto; /* Optional: add padding, margin, or custom styles */ } /* Style the burger icon (lines) */ .burger-lines { display: block; width: 25px; height: 3px; background: var(--m3); margin: 5px 0; transition: 0.3s; } /* Style for the mobile burger menu */ #burger-menu { display: block; /* Keep it in the DOM; visibility toggled via transform */ position: fixed; top: 0; left: 0; width: 250px; height: 100%; background: #fff; box-shadow: -2px 0 5px rgba(0,0,0,0.3); z-index: 9999999999999; padding: 20px; transform: translateX(-100%); transition: transform 0.3s ease; padding-top: 30px; } /* When the burger menu is active */ #burger-menu.open { transform: translateX(0); } .home .site-header a { color: var(--m1); } .burger-menu-items li{ margin-bottom:15px; } .desktop-slider { display: none; } .mobile-slider { display: block; } .mobile-text { text-align: center; margin-bottom: 20px; } .mobile-text h3, .mobile-text h2, .mobile-text .text { margin: 10px 0; } .mobile-images { display: flex; flex-wrap: wrap; margin-bottom: 20px; } .mobile-images .column { flex: 1; } .column.column-left { margin-right: 10px; } .column.column-right { display: flex; flex-direction: column; gap: 10px; } .mobile-button { text-align: center; } .custom-slider-section .slick-slide { position: static!important; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); padding: 20px; } .custom-slider-section .slick-slide .title-gold { text-align: start; } .custom-slider-section .slick-slide .title-black { text-align: start; font-size: var(--33); line-height:40px; } .mobile-text .text { text-align: left; } .custom-dots-container.custom-dots-mob { margin-bottom: -75px; margin-right: 15px; } .custom-dots-container.custom-dots-mob .slick-dots{ text-align: end; } section.custom-slider-section.container-ext.mt-3.mb-5 { display: none; } .burger-menu ul li a{ color:var(--m2); } .burger-menu ul li a:active{ color:var(--m1); } .burger-menu ul li a:focus{ color:var(--m1); } .burger-menu ul li a:visited{ color:var(--m2); } div#overlay_burger.open { position: fixed; width: 100%; background-color: rgb(0 0 0 / 40%); z-index: 3; height: 100%; top: 0; left: 0; } #burger-button.open .burger-lines:nth-of-type(1) { transform: translateY(8px) rotate(45deg); } #burger-button.open .burger-lines:nth-of-type(2) { opacity: 0; } #burger-button.open .burger-lines:nth-of-type(3) { transform: translateY(-8px) rotate(-45deg); } /* Make sure the spans will transform from their center */ .burger-lines { transform-origin: center; } .about_page .burger-lines { background-color: var(--m2); } } /*END OF 1100*/ @media screen and ( max-width: 991px ){ .newsletter-col { max-width: 100%; order:1; padding: 30px 20px; } .col-logo { max-width: 100%; order:2; margin-top:40px; margin-bottom:40px; } .col-menu1{ max-width: 50%; order:4; } .col-small{ max-width: 50%; order:4; } .col-uf-left { max-width: 100%; } .col-uf-right { max-width: 100%; justify-content: flex-start !important; } .offers-cont { margin-bottom: 101px; } .site-header.sticky .burger-lines { background: var(--m2); } .testimonials-section .col-left { width: 100%; max-width: 100%; margin: auto; padding: 0; } .site-header { background: rgba(255, 255, 255, 0.6); backdrop-filter: blur(8px) brightness(100%); height: var(--headerFixed); padding: 7px 0px; width: calc(100% - 20px); margin: 10px; border-radius: 4px; } .testimonials-section .col-right { width: 100%; max-width: 100%; padding: 0 0px; } .title-gold { margin-top: 0px; text-align: center; } .title-black { text-align: center; font-size: var(--33); line-height: 40px; } .testimonial-tabs-buttons { text-align: center; } .hidden-d { display: block; } .hidden-m { display: none; } .count { max-width: 150px; } .col-left .title-black { max-width: 100%; margin-bottom: 40px; } .testimonials-outer { background-image: none!important; } .testimonials-section .slick-dots { width: 100%; position: absolute; display: flex !important ; justify-content: center; align-items: center; bottom: -30px; } .col-dest { max-width: 100%; display: flex ; flex-direction: column; justify-content: center; } .inner-dest { max-width: 100%; } .destination-slider-section { width: 100%; margin: 0 auto; padding: 0 var(--spacing-2); max-width: var(--mw); } .destination-slider-section .slick-dots { display:none!important; } .destination-slider .slick-arrow{ display:none!important; } .testimonials-section .row { flex-direction: column; margin: 0 0px; } .col-left, .col-right { max-width: 100%; flex: 100%; } .custom-section { background-image: none!important; } .number{ display:none; } .col.col-offers-left { max-width: 100%; } .col.col-offers-right { max-width: 100%; } .offers-cont .title-black { max-width: 100%; } .image-wrap:hover .img-overlay { opacity: 1; width: 100%; } .img-overlay { position: static; width:100%; height: 98.5%; backdrop-filter: blur(4px) brightness(100%); background-color: rgba(255, 255, 255, 0.6); top: 0px; right: 0px; transition: all 1s ease-in; display: flex ; text-align: center; flex-direction: column; justify-content: center; align-items: center; padding: 30px; opacity: 1; margin-bottom: 20px; } .overlay-wrapper { opacity: 1; transition: all 0.3s ease-in; transition-delay: 0s; } .image-wrap { box-shadow: 0 0 12px rgba(0, 0, 0, 0.3); } .image-wrap img { aspect-ratio: 327 / 141; object-fit: cover; object-position: center bottom; } .testimonials-section .slick-list { margin: 0 -7px; width: 107%; padding-right: 7%; } .slider-mobile .slick-list { margin: 0 -7px!important; width: 108%; padding-right: 7%!important; } .custom-slider-section .slick-slide { opacity:1; } .slider-mobile .slick-slide { margin: 0 7px!important; } .destination-slider .slick-list { margin: 0 -7px!important; width: 108%; padding-right: 7%!important; } .destination-slider .slick-slide { margin: 0 7px!important; } .testimonials-section .slick-slide { margin: 0 7px; } .about-text{ display:none; } .number { display:none; } .number-title h4{ font-size:var(--13); font-weight: 200 !important; line-height: 22px; } .custom-accordion .plus-icon { display: block; width: 20px; height: 20px; } .custom-accordion .accordion-header { cursor: pointer; display: flex ; justify-content: space-between; align-items: center; padding: 20px 20px; background: white; } section.container-ext.catamarans-cont.mt-3 { padding: 0px; } .col-cat { margin: 0; } .row-cat { display: flex ; gap: 5px; } .chk_text { color: var(--m1); font-size: 11px; } .site-footer li a{ font-size:var(--14); font-weight:300!important; } .container-int { width: 95%; } .lamberts-columns { flex-wrap: wrap; } .lamberts-column { flex: 1 1 100%; } .parallax-video-content h1 { font-size: var(--42); max-width: 646px; line-height: 48px; } p#breadcrumbs { display: none; } .mt-4 { margin-top: var(--spacing-2) !important; } .container-hero h1 { font-size: var(--42); line-height:48px; } .faq-column { width: 100%; } .faq-title { text-align: start; } .left-column { width: 100%; } .right-column { width: 100%; } .destination-section-wrapper { flex-wrap:wrap; } .dest-section-title { font-size: var(--33); line-height:40px; } .destination-item-image { max-width: 140px; top: -46px; left: 60%; } .plan-trip h2 { font-size: var(--33); font-weight: bold; } .about-row { flex-wrap: wrap; } .pl-7 { padding-left: var(--spacing-2) !important; padding-right: var(--spacing-2) !important; } .container-about-2 .img-col-2 { flex-grow: 1; text-align: end; padding-left: var(--spacing-2) !important; order: 2; padding-top: 20px; } .container-about-2 .text-col { width: 646px; flex-shrink: 1; order: 1; } .container-about-1 .title-col { width: 575px; flex-shrink: 1; } .container-about-1 { padding-left: var(--spacing-2); padding-right: var(--spacing-2); } .container-about-1 .title-col h2 { font-size: var(--33); font-weight: bold; color: var(--m2); line-height: 40px; max-width: 460px; } .boat-features{ margin-top:30px; } .rate-info { margin-top: 25px; } .my-section .my-column-2 { max-width: 100%; order: 1; } .my-section .my-column { order: 2; } .search-form { width: unset; } .search-form .btn-primary { color: var(--m3) !important; border: 2px solid var(--m1); background-color: var(--m1); } .highlight-title { margin-bottom: 20px; } ul.products.columns-3 li.product { width:100%!important; } .offers-title { font-size: var(--28); line-height:1; } .offers-subtitle { font-size: var(--18); line-height:1; margin-bottom: 24px; } .offers-price span { font-size: 31px; line-height:1; } .offers-pricetitle { font-size: var(--21); line-height:1; } .offers-price { font-size: 67px; line-height:1; margin-top:15px; margin-bottom:10px; } .col-butt{ order:2; text-align:Center; padding-bottom:20px; } .col-pric{ order:1; } .highlight-texts strong { margin-bottom: 5px; } .highlights-right { width: 100%; } .crew-member { margin-bottom: 60px; } .specs-two-col { gap: 15%; } ul#specs-right { padding-left: 30px; } .specs::before { content: ""; width: 111%; right: -20px; } .follow-on-instagram .row .col a{ flex-direction:column; gap:20px; } .my-section .my-column .info-title { top: 75%; } .my-column:hover .info-title { max-width: 60%; top: 12%; } .button-read-crew{ color:var(--m1); display:block; } .my-column:hover .button-read-crew{ display:none; } .page-id-121 .container-hero{ margin-top:30px; } .fixed-footer-epik{ width: 45px; } .fixed-footer img{ width: 45px; } .page-id-121 .burger-lines { background: var(--m2); } .destination-section-wrapper .left-column, .destination-section-wrapper .right-column { width: 100% !important; } .destination-item-image{ display:none!important; } .mobile-tab-content .destination-title{ display:none!important; } .row-dest-group{ display:none!important; } .search-form { width: 100%; bottom: 0; transform: translateY(50%); max-width: 92%; left: 0; right: 0; margin: 0 auto; position: absolute; border: solid 1px var(--m1); } .hero-section.pb-9 { padding-bottom: 0 !important; } section#experience_mobile { padding-top: 157px; overflow: hidden; } .yith-wcbk-booking-search-form.yith-wcbk-booking-search-form--horizontal-layout .yith-wcbk-booking-search-form__fields>* { padding-left: 0 !important; } .yith-wcbk-booking-search-form__row.yith-wcbk-booking-search-form__row--submit { padding-left: 0 !important; padding-right: 0 !important; } .yith-wcbk-booking-search-form.yith-wcbk-booking-search-form--horizontal-layout .yith-wcbk-booking-search-form__fields>* { width: 25% !important; padding: 0px 10px !important; height: 57px; } .yith-wcbk-booking-search-form.yith-wcbk-booking-search-form--horizontal-layout .yith-wcbk-booking-search-form__fields .yith-wcbk-booking-search-form__row.yith-wcbk-booking-search-form__row--submit { padding-left: 0 !important; padding-right: 0 !IMPORTANT; height: 57px; } label.yith-wcbk-booking-search-form__row__label { font-size: 16px; } .yith-wcbk-booking-search-form.yith-wcbk-booking-search-form--horizontal-layout button.yith-wcbk-booking-search-form-submit { font-size: 16px; height: 57px !important; } label.yith-wcbk-booking-search-form__row__label { font-size: 15px; } .yith-wcbk-booking-search-form.yith-wcbk-booking-search-form--horizontal-layout button.yith-wcbk-booking-search-form-submit { font-size: 16px; height: 57px !important; } .hero-carousel { height: calc(100vh - 39px); } .hero-carousel { height: calc(100vh - 60px); } .home .fixed-footer-epik { top: 77vh; } .home .fixed-footer { top: 78vh; } #ui-datepicker-div.yith-wcbk-datepicker.ui-widget-content, .yith-wcbk-date-picker--inline .ui-widget.ui-widget-content { z-index: 99999!important; } .scroll.text-center { display: none; } section.custom-slider-section.container.mobile-slider .slider-mobile .slick-list { padding-top: 11px; } .testimonials-outer { overflow: hidden; } .fixed-footer-form { display: none; } .home .fixed-footer-epik,.home .fixed-footer { display: none; } .home_ctas_wrap { margin-top: 41px; } } /*END OF 991*/ @media screen and ( max-width: 767px ){ .container { width: 100%; } .card-details { display:none; } .card-title { top: 0px; font-size: var(--28); width: 101%; height: 74px; bottom: unset; backdrop-filter: blur(4px) brightness(100%); background-color: rgba(255, 255, 255, 0.6); } .slide-content h2 { font-size: var(--42); line-height: 48px; padding: 0 35px; } .slide-content { position: absolute; bottom: 30%; } .slider-mobile{ } .slider-mobile .slick-list { padding: 10px 0; margin: 0 -10px; } .testimonials-section { background-image:none!important; } /* .search-form { bottom: 30%; } */ .home .site-header { margin: 20px 0px; } .logo-col { max-width: 20%; } .col-menu { max-width: 80%; } .scroll.text-center { display: none; } .yacht-highlights-section { width: 95%; margin: 0 auto; padding: 0 var(--spacing-2); max-width: var(--mw); /* Adjust as desired */ } .highlights-right { max-width: 100%; } .desc-left { max-width: 100%; } .water-toys-right { max-width: 100%; } .water-toys-left { max-width: 100%; } .desc-container { flex-wrap: wrap; } .water-toys-wrapper { flex-wrap: wrap; } .custom-prev-arrow, .custom-next-arrow { display:none!important; } .water-toys-button { width: 100%; height: 100%; } .water-toys-button img { width: 20px; height: 20px; } .row-wt { flex-wrap: wrap; } .subnav-wrapper { display:none; } .gallery-left img { aspect-ratio: 340 / 569; } .gallery-right .top-img, .gallery-right .bottom-img { flex: 0; aspect-ratio: 336 / 285; } .gallery-slide { height: auto; } .container-products .col{ max-width: 100%; } .rate-info { max-width: 100%; } .boat-specs { font-size: var(--11); } .fixed-bottom { position: fixed; bottom: 0; left: 0; width: 100%; height: 77px; background: #fff; display: flex; justify-content: center; align-items: center; gap: 15px; transition: opacity 0.3s ease; z-index: 1000; } /* Hide and disable interaction when needed */ .fixed-bottom.hidden { opacity: 0; pointer-events: none; } /* Common button style */ .fixed-bottom button, .fixed-bottom a { padding: 10px 20px !important; font-size: 16px; cursor: pointer; border-radius: 4px; text-decoration: none; display: inline-block; } /* Specific styles */ .plan-button { background-color: var(--m1); color: var(--m3) !important; border: 2px solid var(--m1); } .offer-button { background-color: var(--m2); color: var(--m3) !important; border: 2px solid var(--m2); } /* Hide default buttons on .product page */ .single-product .default-btn { display: none !important; } /* Hide product-only button on other pages */ .plan-button.product-btn { display: none; } .single-product .product-btn { display: inline-block; margin: 0 auto; } .single-product .product-btn:hover { color: var(--m1)!important; } .page-id-121 .container-hero{ justify-content: end; } .trip-planner-form label { font-size: 18px; } .trip-planner-form form { padding: 100px 0px; } .home .fixed-footer-epik { top: unset; bottom: 0; } .home .fixed-footer { top: 68vh; } .yith-wcbk-booking-search-form.yith-wcbk-booking-search-form--horizontal-layout .yith-wcbk-booking-search-form__fields>* { width: 100% !important; max-width: 100%; height: 54px; border-bottom: solid 1px var(--m1); } .yith-wcbk-booking-search-form.yith-wcbk-booking-search-form--horizontal-layout .yith-wcbk-booking-search-form__fields { flex-direction: column; } .yith-wcbk-booking-search-form .yith-wcbk-booking-search-form__row__content { max-width: 100% !important; } .hero-carousel { height: calc(100vh - 117px); } .yith-wcbk-date-picker-wrapper input.yith-wcbk-date-picker--formatted { border: none !IMPORTANT; } .yith-wcbk-booking-search-form.yith-wcbk-booking-search-form--horizontal-layout button.yith-wcbk-booking-search-form-submit { padding-left: 0; padding-right: 0; width: 100% !important; } section#experience_mobile { padding-top: 235px; } .yith-wcbk-booking-search-form.yith-wcbk-booking-search-form--horizontal-layout button.yith-wcbk-booking-search-form-submit { height: 44px !important; } .search-form { transform: translateY(9%); } .home .fixed-footer { top: unset; bottom: 0; } .yith-wcbk-booking-search-form.yith-wcbk-booking-search-form--horizontal-layout .yith-wcbk-booking-search-form__fields .yith-wcbk-booking-search-form__row.yith-wcbk-booking-search-form__row--submit { height: 44px; } .search-form { max-width:85%; } } /*END OF 767*/ @media screen and ( max-width: 567px ){ .site-header.sticky { margin: 10px 10px; width: calc(100% - 20px); } } @media screen and (max-width: 480px) { .slide-content h2 { font-size: 36px; line-height: 1.2; } } /*END OF 480*/ @media screen and ( max-width: 400px ){ .fixed-footer { top: 35vh; right: 5px; } .fixed-footer-epik { top: 35vh; left: 5px; } .page-id-150 .container-hero h1 { margin-top:-48px; } .fixed-footer-form { top: 45vh; } .container-hero .container .row .col{ margin-top:-30px; margin-bottom:30px; } } /* end responsive */