.elementor-94 .elementor-element.elementor-element-22f4e18d:not(.elementor-motion-effects-element-type-background), .elementor-94 .elementor-element.elementor-element-22f4e18d > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F4F5F5;background-image:url("https://miracleceylonia.com/wp-content/uploads/2026/08/ChatGPT-Image-Aug-17-2026-09_18_08-AM.png");background-position:top center;background-repeat:no-repeat;background-size:cover;}.elementor-94 .elementor-element.elementor-element-22f4e18d{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;padding:0140px 0px 140px 0px;}.elementor-94 .elementor-element.elementor-element-22f4e18d > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-94 .elementor-element.elementor-element-2a278ade{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;text-align:center;}.elementor-94 .elementor-element.elementor-element-2a278ade .elementor-heading-title{font-family:"Playfair Display", Sans-serif;font-size:45px;line-height:66px;color:#000000;}.elementor-94 .elementor-element.elementor-element-21f45691{text-align:center;}.elementor-94 .elementor-element.elementor-element-21f45691 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:16px;font-weight:400;color:rgba(0, 0, 0, 0.78);}.elementor-94 .elementor-element.elementor-element-edd0cce:not(.elementor-motion-effects-element-type-background), .elementor-94 .elementor-element.elementor-element-edd0cce > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-94 .elementor-element.elementor-element-edd0cce{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;padding:100px 0px 100px 0px;}.elementor-94 .elementor-element.elementor-element-edd0cce > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-94 .elementor-element.elementor-element-5ea5bfb5{padding:0px 0px 0px 0px;border-radius:16px 16px 16px 16px;}.elementor-94 .elementor-element.elementor-element-5ea5bfb5 iframe{height:460px;}.elementor-94 .elementor-element.elementor-element-4b3b582e:not(.elementor-motion-effects-element-type-background), .elementor-94 .elementor-element.elementor-element-4b3b582e > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F4F5F5;}.elementor-94 .elementor-element.elementor-element-4b3b582e{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;margin-top:0px;margin-bottom:0px;padding:60px 0px 60px 0px;}.elementor-94 .elementor-element.elementor-element-4b3b582e > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-94 .elementor-element.elementor-element-4b3b582e > .elementor-shape-top .elementor-shape-fill{fill:#FFFFFF;}.elementor-94 .elementor-element.elementor-element-14def9fc > .elementor-element-populated, .elementor-94 .elementor-element.elementor-element-14def9fc > .elementor-element-populated > .elementor-background-overlay, .elementor-94 .elementor-element.elementor-element-14def9fc > .elementor-background-slideshow{border-radius:0px 0px 0px 0px;}.elementor-94 .elementor-element.elementor-element-41fd73c{margin:016px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;text-align:center;}.elementor-94 .elementor-element.elementor-element-41fd73c .elementor-heading-title{font-family:"Playfair Display", Sans-serif;font-size:45px;font-weight:700;color:#000000;}.elementor-94 .elementor-element.elementor-element-d758d33{text-align:center;}.elementor-94 .elementor-element.elementor-element-5566f63{margin:020px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;text-align:justify;font-family:"Poppins", Sans-serif;font-size:16px;font-weight:300;line-height:16px;}.elementor-94 .elementor-element.elementor-element-bea4c5c .elementor-icon-box-wrapper{align-items:center;gap:22px;}.elementor-94 .elementor-element.elementor-element-bea4c5c .elementor-icon-box-title{margin-block-end:0px;color:rgba(18, 18, 18, 0.83);}.elementor-94 .elementor-element.elementor-element-bea4c5c.elementor-view-stacked .elementor-icon{background-color:#FC9D53;}.elementor-94 .elementor-element.elementor-element-bea4c5c.elementor-view-framed .elementor-icon, .elementor-94 .elementor-element.elementor-element-bea4c5c.elementor-view-default .elementor-icon{fill:#FC9D53;color:#FC9D53;border-color:#FC9D53;}.elementor-94 .elementor-element.elementor-element-bea4c5c.elementor-view-stacked:has(:hover) .elementor-icon, .elementor-94 .elementor-element.elementor-element-bea4c5c.elementor-view-stacked:has(:focus) .elementor-icon{background-color:#F82B35;}.elementor-94 .elementor-element.elementor-element-bea4c5c.elementor-view-framed:has(:hover) .elementor-icon, .elementor-94 .elementor-element.elementor-element-bea4c5c.elementor-view-default:has(:hover) .elementor-icon, .elementor-94 .elementor-element.elementor-element-bea4c5c.elementor-view-framed:has(:focus) .elementor-icon, .elementor-94 .elementor-element.elementor-element-bea4c5c.elementor-view-default:has(:focus) .elementor-icon{fill:#F82B35;color:#F82B35;border-color:#F82B35;}.elementor-94 .elementor-element.elementor-element-bea4c5c .elementor-icon{font-size:30px;}.elementor-94 .elementor-element.elementor-element-bea4c5c .elementor-icon-box-title, .elementor-94 .elementor-element.elementor-element-bea4c5c .elementor-icon-box-title a{font-family:"Poppins", Sans-serif;font-size:20px;font-weight:500;}.elementor-94 .elementor-element.elementor-element-bea4c5c .elementor-icon-box-description{font-family:"Poppins", Sans-serif;font-size:16px;font-weight:400;line-height:25px;}.elementor-94 .elementor-element.elementor-element-d7c5638 .elementor-icon-box-wrapper{align-items:center;gap:22px;}.elementor-94 .elementor-element.elementor-element-d7c5638 .elementor-icon-box-title{margin-block-end:0px;color:rgba(18, 18, 18, 0.83);}.elementor-94 .elementor-element.elementor-element-d7c5638.elementor-view-stacked .elementor-icon{background-color:#FC9D53;}.elementor-94 .elementor-element.elementor-element-d7c5638.elementor-view-framed .elementor-icon, .elementor-94 .elementor-element.elementor-element-d7c5638.elementor-view-default .elementor-icon{fill:#FC9D53;color:#FC9D53;border-color:#FC9D53;}.elementor-94 .elementor-element.elementor-element-d7c5638.elementor-view-stacked:has(:hover) .elementor-icon, .elementor-94 .elementor-element.elementor-element-d7c5638.elementor-view-stacked:has(:focus) .elementor-icon{background-color:#F82B35;}.elementor-94 .elementor-element.elementor-element-d7c5638.elementor-view-framed:has(:hover) .elementor-icon, .elementor-94 .elementor-element.elementor-element-d7c5638.elementor-view-default:has(:hover) .elementor-icon, .elementor-94 .elementor-element.elementor-element-d7c5638.elementor-view-framed:has(:focus) .elementor-icon, .elementor-94 .elementor-element.elementor-element-d7c5638.elementor-view-default:has(:focus) .elementor-icon{fill:#F82B35;color:#F82B35;border-color:#F82B35;}.elementor-94 .elementor-element.elementor-element-d7c5638 .elementor-icon{font-size:30px;}.elementor-94 .elementor-element.elementor-element-d7c5638 .elementor-icon-box-title, .elementor-94 .elementor-element.elementor-element-d7c5638 .elementor-icon-box-title a{font-family:"Poppins", Sans-serif;font-size:20px;font-weight:500;}.elementor-94 .elementor-element.elementor-element-d7c5638 .elementor-icon-box-description{font-family:"Poppins", Sans-serif;font-size:16px;font-weight:400;line-height:25px;}.elementor-94 .elementor-element.elementor-element-51bc37c .elementor-icon-box-wrapper{align-items:center;gap:22px;}.elementor-94 .elementor-element.elementor-element-51bc37c .elementor-icon-box-title{margin-block-end:0px;color:rgba(18, 18, 18, 0.83);}.elementor-94 .elementor-element.elementor-element-51bc37c.elementor-view-stacked .elementor-icon{background-color:#FC9D53;}.elementor-94 .elementor-element.elementor-element-51bc37c.elementor-view-framed .elementor-icon, .elementor-94 .elementor-element.elementor-element-51bc37c.elementor-view-default .elementor-icon{fill:#FC9D53;color:#FC9D53;border-color:#FC9D53;}.elementor-94 .elementor-element.elementor-element-51bc37c.elementor-view-stacked:has(:hover) .elementor-icon, .elementor-94 .elementor-element.elementor-element-51bc37c.elementor-view-stacked:has(:focus) .elementor-icon{background-color:#F82B35;}.elementor-94 .elementor-element.elementor-element-51bc37c.elementor-view-framed:has(:hover) .elementor-icon, .elementor-94 .elementor-element.elementor-element-51bc37c.elementor-view-default:has(:hover) .elementor-icon, .elementor-94 .elementor-element.elementor-element-51bc37c.elementor-view-framed:has(:focus) .elementor-icon, .elementor-94 .elementor-element.elementor-element-51bc37c.elementor-view-default:has(:focus) .elementor-icon{fill:#F82B35;color:#F82B35;border-color:#F82B35;}.elementor-94 .elementor-element.elementor-element-51bc37c .elementor-icon{font-size:30px;}.elementor-94 .elementor-element.elementor-element-51bc37c .elementor-icon-box-title, .elementor-94 .elementor-element.elementor-element-51bc37c .elementor-icon-box-title a{font-family:"Poppins", Sans-serif;font-size:20px;font-weight:500;}.elementor-94 .elementor-element.elementor-element-51bc37c .elementor-icon-box-description{font-family:"Poppins", Sans-serif;font-size:16px;font-weight:400;line-height:25px;}.elementor-94 .elementor-element.elementor-element-82deddd{--grid-template-columns:repeat(0, auto);text-align:left;margin:-40px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;--grid-column-gap:5px;--grid-row-gap:0px;}.elementor-94 .elementor-element.elementor-element-d0d12f4{width:var( --container-widget-width, 106px );max-width:106px;--container-widget-width:106px;--container-widget-flex-grow:0;top:3px;}body:not(.rtl) .elementor-94 .elementor-element.elementor-element-d0d12f4{left:-47px;}body.rtl .elementor-94 .elementor-element.elementor-element-d0d12f4{right:-47px;}.elementor-94 .elementor-element.elementor-element-d0d12f4 img{width:100%;max-width:100%;}.elementor-bc-flex-widget .elementor-94 .elementor-element.elementor-element-dc4f60d.elementor-column .elementor-widget-wrap{align-items:center;}.elementor-94 .elementor-element.elementor-element-dc4f60d.elementor-column.elementor-element[data-element_type="column"] > .elementor-widget-wrap.elementor-element-populated{align-content:center;align-items:center;}.elementor-94 .elementor-element.elementor-element-7e75869d{width:var( --container-widget-width, 69px );max-width:69px;--container-widget-width:69px;--container-widget-flex-grow:0;top:32px;}body:not(.rtl) .elementor-94 .elementor-element.elementor-element-7e75869d{left:306px;}body.rtl .elementor-94 .elementor-element.elementor-element-7e75869d{right:306px;}.elementor-94 .elementor-element.elementor-element-7e75869d img{width:100%;max-width:100%;}.elementor-94 .elementor-element.elementor-element-1712980{margin:016px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;text-align:center;}.elementor-94 .elementor-element.elementor-element-1712980 .elementor-heading-title{font-family:"Playfair Display", Sans-serif;font-size:45px;font-weight:700;color:#000000;}.elementor-94 .elementor-element.elementor-element-82e94ba{margin:020px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;text-align:center;font-family:"Poppins", Sans-serif;font-size:16px;font-weight:300;line-height:16px;}.elementor-94 .elementor-element.elementor-element-a2e5bf8{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;--e-form-steps-indicators-spacing:20px;--e-form-steps-indicator-padding:30px;--e-form-steps-indicator-inactive-secondary-color:#ffffff;--e-form-steps-indicator-active-secondary-color:#ffffff;--e-form-steps-indicator-completed-secondary-color:#ffffff;--e-form-steps-divider-width:1px;--e-form-steps-divider-gap:10px;}.elementor-94 .elementor-element.elementor-element-a2e5bf8 .elementor-field-group{padding-right:calc( 10px/2 );padding-left:calc( 10px/2 );margin-bottom:10px;}.elementor-94 .elementor-element.elementor-element-a2e5bf8 .elementor-form-fields-wrapper{margin-left:calc( -10px/2 );margin-right:calc( -10px/2 );margin-bottom:-10px;}.elementor-94 .elementor-element.elementor-element-a2e5bf8 .elementor-field-group.recaptcha_v3-bottomleft, .elementor-94 .elementor-element.elementor-element-a2e5bf8 .elementor-field-group.recaptcha_v3-bottomright{margin-bottom:0;}body.rtl .elementor-94 .elementor-element.elementor-element-a2e5bf8 .elementor-labels-inline .elementor-field-group > label{padding-left:0px;}body:not(.rtl) .elementor-94 .elementor-element.elementor-element-a2e5bf8 .elementor-labels-inline .elementor-field-group > label{padding-right:0px;}body .elementor-94 .elementor-element.elementor-element-a2e5bf8 .elementor-labels-above .elementor-field-group > label{padding-bottom:0px;}.elementor-94 .elementor-element.elementor-element-a2e5bf8 .elementor-field-type-html{padding-bottom:0px;}.elementor-94 .elementor-element.elementor-element-a2e5bf8 .elementor-field-group .elementor-field:not(.elementor-select-wrapper){background-color:#ffffff;}.elementor-94 .elementor-element.elementor-element-a2e5bf8 .elementor-field-group .elementor-select-wrapper select{background-color:#ffffff;}.elementor-94 .elementor-element.elementor-element-a2e5bf8 .e-form__buttons__wrapper__button-next{color:#ffffff;}.elementor-94 .elementor-element.elementor-element-a2e5bf8 .elementor-button[type="submit"]{color:#ffffff;}.elementor-94 .elementor-element.elementor-element-a2e5bf8 .elementor-button[type="submit"] svg *{fill:#ffffff;}.elementor-94 .elementor-element.elementor-element-a2e5bf8 .e-form__buttons__wrapper__button-previous{color:#ffffff;}.elementor-94 .elementor-element.elementor-element-a2e5bf8 .e-form__buttons__wrapper__button-next:hover{color:#ffffff;}.elementor-94 .elementor-element.elementor-element-a2e5bf8 .elementor-button[type="submit"]:hover{color:#ffffff;}.elementor-94 .elementor-element.elementor-element-a2e5bf8 .elementor-button[type="submit"]:hover svg *{fill:#ffffff;}.elementor-94 .elementor-element.elementor-element-a2e5bf8 .e-form__buttons__wrapper__button-previous:hover{color:#ffffff;}:root{--page-title-display:none;}@media(max-width:767px){.elementor-94 .elementor-element.elementor-element-22f4e18d{padding:60px 0px 60px 0px;}.elementor-94 .elementor-element.elementor-element-1dfe2b84 > .elementor-element-populated{margin:0px 0px 0px 0px;--e-column-margin-right:0px;--e-column-margin-left:0px;padding:0px 0px 0px 0px;}.elementor-94 .elementor-element.elementor-element-5566f63{line-height:1.6em;}body:not(.rtl) .elementor-94 .elementor-element.elementor-element-d0d12f4{left:-83px;}body.rtl .elementor-94 .elementor-element.elementor-element-d0d12f4{right:-83px;}.elementor-94 .elementor-element.elementor-element-d0d12f4{top:8px;}body:not(.rtl) .elementor-94 .elementor-element.elementor-element-7e75869d{left:189px;}body.rtl .elementor-94 .elementor-element.elementor-element-7e75869d{right:189px;}.elementor-94 .elementor-element.elementor-element-7e75869d{top:11px;}.elementor-94 .elementor-element.elementor-element-82e94ba{line-height:1.6em;}}/* Start custom CSS for section, class: .elementor-element-22f4e18d *//* ========================================================= TROPICALE / XIOLINE STYLE CONTACT HERO Section class: xioline-contact-hero ========================================================= */ .xioline-contact-hero { position: relative !important; min-height: 560px; display: flex !important; align-items: center !important; justify-content: center !important; overflow: hidden; isolation: isolate; background-position: center center !important; background-size: cover !important; background-repeat: no-repeat !important; } /* ========================================================= DARK CINEMATIC OVERLAY ========================================================= */ .xioline-contact-hero::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient( circle at center, rgba(15, 15, 15, 0.25) 0%, rgba(10, 10, 10, 0.52) 55%, rgba(0, 0, 0, 0.82) 100% ), linear-gradient( 90deg, rgba(0, 0, 0, 0.68) 0%, rgba(0, 0, 0, 0.32) 50%, rgba(0, 0, 0, 0.68) 100% ); } /* soft glow behind content */ .xioline-contact-hero::after { content: ""; position: absolute; width: 700px; height: 320px; left: 50%; top: 50%; transform: translate(-50%, -50%); background: rgba(255,255,255,0.07); filter: blur(90px); border-radius: 50%; z-index: 1; pointer-events: none; } /* ========================================================= ELEMENTOR CONTAINER / COLUMN ========================================================= */ .xioline-contact-hero > .elementor-container { position: relative; z-index: 2; width: 100%; } .xioline-contact-hero .elementor-column { position: relative; width: 100%; } /* ========================================================= GLASS CONTENT BOX ========================================================= */ .xioline-contact-hero .elementor-widget-wrap { position: relative !important; width: calc(100% - 60px); max-width: 900px; min-height: 300px; margin: 0 auto !important; padding: 55px 60px !important; display: flex !important; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: linear-gradient( 145deg, rgba(20,20,20,0.63), rgba(0,0,0,0.78) ); border: 1px solid rgba(255,255,255,0.30); border-radius: 32px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 30px 80px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.13); transition: transform .45s ease, border-color .45s ease, box-shadow .45s ease; } /* inner fine border */ .xioline-contact-hero .elementor-widget-wrap::before { content: ""; position: absolute; inset: 9px; border: 1px solid rgba(255,255,255,0.12); border-radius: 24px; pointer-events: none; } /* tiny top highlight */ .xioline-contact-hero .elementor-widget-wrap::after { content: ""; position: absolute; top: 0; left: 50%; width: 55%; height: 1px; transform: translateX(-50%); background: linear-gradient( 90deg, transparent, rgba(255,255,255,0.9), transparent ); box-shadow: 0 0 15px rgba(255,255,255,0.35); } /* ========================================================= MAIN CONTACT US TITLE ========================================================= */ .xioline-contact-hero .hero-main-title { position: relative; width: 100%; margin: 0 !important; padding: 38px 0 31px !important; z-index: 3; } .xioline-contact-hero .hero-main-title .elementor-heading-title { margin: 0 !important; font-family: "Cormorant Garamond", "Playfair Display", Georgia, serif !important; font-size: clamp(65px, 7vw, 100px) !important; font-weight: 400 !important; line-height: .95 !important; letter-spacing: -2px !important; text-align: center !important; /* pearl white effect */ background: linear-gradient( 180deg, #ffffff 0%, #f5f5f5 55%, #d7d7d7 100% ); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0 5px 25px rgba(0,0,0,0.45); } /* ========================================================= ORNAMENT ABOVE TITLE ========================================================= */ .xioline-contact-hero .hero-main-title::before { content: "✦"; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 280px; color: #fff; font-size: 11px; line-height: 20px; text-align: center; background: linear-gradient( 90deg, transparent, rgba(255,255,255,.7) ) left center / 110px 1px no-repeat, linear-gradient( 90deg, rgba(255,255,255,.7), transparent ) right center / 110px 1px no-repeat; } /* ========================================================= ORNAMENT BELOW TITLE ========================================================= */ .xioline-contact-hero .hero-main-title::after { content: "◆"; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 340px; color: #fff; font-size: 7px; line-height: 14px; text-align: center; background: linear-gradient( 90deg, transparent, rgba(255,255,255,.65) ) left center / 145px 1px no-repeat, linear-gradient( 90deg, rgba(255,255,255,.65), transparent ) right center / 145px 1px no-repeat; } /* ========================================================= BREADCRUMB ========================================================= */ .xioline-contact-hero .hero-breadcrumb { margin: 22px 0 0 !important; z-index: 3; } .xioline-contact-hero .hero-breadcrumb .elementor-heading-title { color: rgba(255,255,255,.88) !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 12px !important; font-weight: 500 !important; letter-spacing: 3px !important; line-height: 1.5 !important; text-transform: uppercase; text-align: center; text-shadow: 0 2px 12px rgba(0,0,0,.65); } /* ========================================================= LUXURY CORNER DECORATIONS ========================================================= */ .xioline-contact-hero .elementor-column::before, .xioline-contact-hero .elementor-column::after { content: ""; position: absolute; width: 70px; height: 70px; z-index: 5; pointer-events: none; } /* upper-left corner */ .xioline-contact-hero .elementor-column::before { top: 17px; left: calc(50% - 430px); border-top: 1px solid rgba(255,255,255,.50); border-left: 1px solid rgba(255,255,255,.50); border-radius: 22px 0 0 0; } /* lower-right corner */ .xioline-contact-hero .elementor-column::after { right: calc(50% - 430px); bottom: 17px; border-right: 1px solid rgba(255,255,255,.50); border-bottom: 1px solid rgba(255,255,255,.50); border-radius: 0 0 22px 0; } /* ========================================================= SMALL HOVER MOVEMENT ========================================================= */ .xioline-contact-hero .elementor-widget-wrap:hover { transform: translateY(-4px); border-color: rgba(255,255,255,.52); box-shadow: 0 35px 90px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.16); } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1024px) { .xioline-contact-hero { min-height: 480px; } .xioline-contact-hero .elementor-widget-wrap { width: calc(100% - 50px); max-width: 760px; min-height: 275px; padding: 45px 45px !important; border-radius: 28px; } .xioline-contact-hero .hero-main-title .elementor-heading-title { font-size: 70px !important; } .xioline-contact-hero .elementor-column::before, .xioline-contact-hero .elementor-column::after { display: none; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .xioline-contact-hero { min-height: 410px !important; padding: 60px 12px !important; background-position: center center !important; } .xioline-contact-hero .elementor-widget-wrap { width: 100% !important; max-width: 355px; min-height: 225px; padding: 30px 18px 32px !important; border-radius: 22px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .xioline-contact-hero .elementor-widget-wrap::before { inset: 7px; border-radius: 16px; } .xioline-contact-hero .hero-main-title { padding-top: 27px !important; padding-bottom: 25px !important; } .xioline-contact-hero .hero-main-title .elementor-heading-title { font-size: 43px !important; line-height: 1 !important; letter-spacing: -1px !important; } .xioline-contact-hero .hero-main-title::before { width: 170px; background: linear-gradient( 90deg, transparent, rgba(255,255,255,.65) ) left center / 62px 1px no-repeat, linear-gradient( 90deg, rgba(255,255,255,.65), transparent ) right center / 62px 1px no-repeat; } .xioline-contact-hero .hero-main-title::after { width: 205px; background: linear-gradient( 90deg, transparent, rgba(255,255,255,.65) ) left center / 82px 1px no-repeat, linear-gradient( 90deg, rgba(255,255,255,.65), transparent ) right center / 82px 1px no-repeat; } .xioline-contact-hero .hero-breadcrumb { margin-top: 18px !important; } .xioline-contact-hero .hero-breadcrumb .elementor-heading-title { font-size: 9px !important; letter-spacing: 1.5px !important; } .xioline-contact-hero .elementor-widget-wrap:hover { transform: none; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 420px) { .xioline-contact-hero { min-height: 380px !important; padding: 45px 10px !important; } .xioline-contact-hero .elementor-widget-wrap { max-width: 330px; min-height: 215px; padding: 27px 14px 29px !important; } .xioline-contact-hero .hero-main-title .elementor-heading-title { font-size: 37px !important; } .xioline-contact-hero .hero-breadcrumb .elementor-heading-title { font-size: 8px !important; letter-spacing: 1.2px !important; } }/* End custom CSS */ /* Start custom CSS for section, class: .elementor-element-edd0cce *//* ========================================================= TROPICALE CONTACT PAGE - PREMIUM MAP SECTION ========================================================= */ .tropicale-map-section { position: relative !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 70px 30px 80px !important; overflow: hidden !important; /* soft warm Tropicále background */ background: radial-gradient( circle at 15% 15%, rgba(201, 157, 137, 0.12), transparent 30% ), radial-gradient( circle at 90% 85%, rgba(116, 133, 92, 0.09), transparent 28% ), #fbf9f5 !important; } /* remove unnecessary Elementor section height */ .tropicale-map-section > .elementor-container { width: 100% !important; max-width: 1320px !important; min-height: 0 !important; margin: 0 auto !important; padding: 0 !important; } /* Column */ .tropicale-map-section .elementor-column { width: 100% !important; } /* remove column padding */ .tropicale-map-section .elementor-widget-wrap { width: 100% !important; padding: 0 !important; margin: 0 !important; background: transparent !important; } /* ========================================================= GOOGLE MAP OUTER CARD ========================================================= */ .tropicale-contact-map { position: relative !important; width: 100% !important; padding: 10px !important; margin: 0 auto !important; background: rgba(255, 255, 255, 0.82); border: 1px solid rgba(184, 137, 117, 0.24); border-radius: 28px; box-shadow: 0 25px 70px rgba(62, 48, 39, 0.10), 0 5px 20px rgba(62, 48, 39, 0.05); overflow: hidden; transition: transform 0.4s ease, box-shadow 0.4s ease; } /* very subtle hover */ .tropicale-contact-map:hover { transform: translateY(-3px); box-shadow: 0 32px 85px rgba(62, 48, 39, 0.14), 0 8px 25px rgba(62, 48, 39, 0.07); } /* ========================================================= MAP ITSELF ========================================================= */ .tropicale-contact-map .elementor-widget-container { width: 100% !important; margin: 0 !important; padding: 0 !important; border-radius: 20px !important; overflow: hidden !important; } /* Google map iframe */ .tropicale-contact-map iframe { display: block !important; width: 100% !important; max-width: 100% !important; height: 480px !important; margin: 0 !important; border: 0 !important; border-radius: 20px !important; filter: saturate(0.78) contrast(0.96) brightness(1.03); transition: filter 0.4s ease; } /* return normal map colour on hover */ .tropicale-contact-map:hover iframe { filter: saturate(1) contrast(1) brightness(1); } /* ========================================================= THIN DECORATIVE LINE ABOVE MAP ========================================================= */ .tropicale-map-section::before { content: ""; position: absolute; top: 0; left: 50%; width: min(1180px, 82%); height: 1px; transform: translateX(-50%); background: linear-gradient( 90deg, transparent, rgba(184, 137, 117, 0.45), transparent ); } /* ========================================================= SUBTLE DECORATIVE GLOW ========================================================= */ .tropicale-map-section::after { content: ""; position: absolute; width: 280px; height: 280px; right: -130px; bottom: -150px; border: 1px solid rgba(184, 137, 117, 0.10); border-radius: 50%; box-shadow: 0 0 0 35px rgba(184, 137, 117, 0.025), 0 0 0 70px rgba(184, 137, 117, 0.018); pointer-events: none; } /* make map stay above decoration */ .tropicale-map-section .elementor-container, .tropicale-map-section .tropicale-contact-map { position: relative; z-index: 2; } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1024px) { .tropicale-map-section { padding: 55px 24px 65px !important; } .tropicale-contact-map { padding: 8px !important; border-radius: 24px; } .tropicale-contact-map .elementor-widget-container { border-radius: 17px !important; } .tropicale-contact-map iframe { height: 420px !important; border-radius: 17px !important; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .tropicale-map-section { padding: 40px 15px 50px !important; } .tropicale-map-section > .elementor-container { width: 100% !important; } .tropicale-contact-map { width: 100% !important; padding: 6px !important; border-radius: 20px; box-shadow: 0 18px 45px rgba(62, 48, 39, 0.10); } .tropicale-contact-map .elementor-widget-container { border-radius: 15px !important; } .tropicale-contact-map iframe { width: 100% !important; height: 340px !important; border-radius: 15px !important; } .tropicale-contact-map:hover { transform: none; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 480px) { .tropicale-map-section { padding: 32px 12px 40px !important; } .tropicale-contact-map iframe { height: 300px !important; } }/* End custom CSS */ /* Start custom CSS for section, class: .elementor-element-4b3b582e *//* ========================================================= TROPICALE CONTACT + FORM SECTION Main class: tropicale-contact-main ========================================================= */ .tropicale-contact-main { position: relative !important; overflow: hidden !important; width: 100% !important; padding: 95px 35px !important; margin: 0 !important; background: radial-gradient( circle at 8% 10%, rgba(181, 136, 111, 0.09), transparent 28% ), radial-gradient( circle at 92% 90%, rgba(103, 120, 79, 0.06), transparent 30% ), #f7f2e9 !important; } /* ========================================================= MAIN CONTAINER ========================================================= */ .tropicale-contact-main > .elementor-container { width: 100% !important; max-width: 1240px !important; margin: 0 auto !important; display: flex !important; align-items: stretch !important; gap: 70px; } /* ========================================================= BOTH COLUMNS ========================================================= */ .tropicale-contact-main > .elementor-container > .elementor-column { position: relative; } /* LEFT COLUMN */ .tropicale-contact-main > .elementor-container > .elementor-column:first-child { width: 45% !important; padding-right: 50px !important; } /* RIGHT COLUMN */ .tropicale-contact-main > .elementor-container > .elementor-column:last-child { width: 55% !important; } /* remove Elementor unwanted backgrounds */ .tropicale-contact-main .elementor-widget-wrap { background: transparent !important; } /* ========================================================= VERTICAL DIVIDER ========================================================= */ .tropicale-contact-main > .elementor-container > .elementor-column:first-child::after { content: ""; position: absolute; top: 3%; right: -35px; width: 1px; height: 94%; background: linear-gradient( 180deg, transparent, rgba(136, 104, 86, 0.22), transparent ); } /* ========================================================= MAIN HEADINGS ========================================================= */ .tropicale-contact-main .elementor-widget-heading { margin-bottom: 0 !important; } .tropicale-contact-main .elementor-heading-title { color: #241b17 !important; font-family: "Cormorant Garamond", "Playfair Display", Georgia, serif !important; font-size: clamp(43px, 4vw, 58px) !important; font-weight: 500 !important; line-height: 1.05 !important; letter-spacing: -1px !important; } /* ========================================================= LEFT HEADING ALIGNMENT ========================================================= */ .tropicale-contact-main > .elementor-container > .elementor-column:first-child .elementor-heading-title { text-align: left !important; } /* ========================================================= RIGHT HEADING ========================================================= */ .tropicale-contact-main > .elementor-container > .elementor-column:last-child .elementor-heading-title { text-align: left !important; } /* ========================================================= CURRENT ORANGE UNDERLINE IMAGE ========================================================= */ .tropicale-contact-main .elementor-column:first-child .elementor-widget-image { width: 90px !important; margin: 18px 0 30px !important; } /* hide old line image */ .tropicale-contact-main .elementor-column:first-child .elementor-widget-image img { display: none !important; } /* create premium thin line */ .tropicale-contact-main .elementor-column:first-child .elementor-widget-image::before { content: ""; display: block; width: 72px; height: 1px; background: linear-gradient( 90deg, #a87660, rgba(168,118,96,0) ); } /* ========================================================= PARAGRAPH TEXT ========================================================= */ .tropicale-contact-main .elementor-widget-text-editor { margin-bottom: 35px !important; } .tropicale-contact-main .elementor-widget-text-editor, .tropicale-contact-main .elementor-widget-text-editor p { color: #62574f !important; font-size: 15px !important; font-weight: 400; line-height: 1.75 !important; letter-spacing: 0 !important; margin-top: 0 !important; } /* left description */ .tropicale-contact-main .elementor-column:first-child .elementor-widget-text-editor { max-width: 510px; } /* right description */ .tropicale-contact-main .elementor-column:last-child .elementor-widget-text-editor { margin-top: 13px !important; margin-bottom: 30px !important; max-width: 570px; } /* ========================================================= CONTACT ICON BOXES ========================================================= */ .tropicale-contact-main .elementor-column:first-child .elementor-widget-icon-box { margin: 0 0 24px !important; } .tropicale-contact-main .elementor-column:first-child .elementor-icon-box-wrapper { display: flex !important; align-items: flex-start !important; text-align: left !important; padding: 0 !important; background: transparent !important; } /* icon spacing */ .tropicale-contact-main .elementor-column:first-child .elementor-icon-box-icon { margin-right: 19px !important; margin-top: 3px !important; } /* remove orange */ .tropicale-contact-main .elementor-column:first-child .elementor-icon { background: transparent !important; border: none !important; color: #9b705c !important; } /* font awesome */ .tropicale-contact-main .elementor-column:first-child .elementor-icon i { color: #9b705c !important; font-size: 24px !important; } /* SVG */ .tropicale-contact-main .elementor-column:first-child .elementor-icon svg { width: 24px !important; height: 24px !important; fill: #9b705c !important; } /* icon box title */ .tropicale-contact-main .elementor-column:first-child .elementor-icon-box-title { margin: 0 0 4px !important; color: #29211d !important; font-size: 16px !important; font-weight: 600 !important; line-height: 1.3 !important; } /* description */ .tropicale-contact-main .elementor-column:first-child .elementor-icon-box-description { color: #62574f !important; font-size: 14px !important; line-height: 1.65 !important; max-width: 400px; } /* ========================================================= RIGHT FORM AREA ========================================================= */ .tropicale-contact-main .elementor-column:last-child .elementor-widget-form { position: relative; margin-top: 5px !important; padding: 38px 40px 40px !important; background: rgba(255,255,255,0.68) !important; border: 1px solid rgba(154,112,92,0.15); border-radius: 22px; box-shadow: 0 20px 55px rgba(72,55,46,0.07), inset 0 1px 0 rgba(255,255,255,0.75); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); } /* ========================================================= FORM LABELS ========================================================= */ .tropicale-contact-main .elementor-form .elementor-field-label { color: #51453e !important; font-size: 12px !important; font-weight: 600 !important; line-height: 1.4 !important; letter-spacing: 1.1px !important; text-transform: uppercase; margin-bottom: 8px !important; } /* ========================================================= FORM FIELDS ========================================================= */ .tropicale-contact-main .elementor-form .elementor-field { width: 100% !important; min-height: 52px !important; padding: 12px 15px !important; color: #2d2824 !important; font-size: 14px !important; background: rgba(255,255,255,0.82) !important; border: 1px solid rgba(105,90,80,0.20) !important; border-radius: 5px !important; box-shadow: none !important; transition: border-color .3s ease, background .3s ease, box-shadow .3s ease; } /* placeholder */ .tropicale-contact-main .elementor-form .elementor-field::placeholder { color: #9d948d !important; opacity: 1; } /* focus */ .tropicale-contact-main .elementor-form .elementor-field:focus { outline: none !important; border-color: #9b705c !important; background: #ffffff !important; box-shadow: 0 0 0 3px rgba(155,112,92,0.07) !important; } /* textarea */ .tropicale-contact-main .elementor-form textarea.elementor-field { min-height: 135px !important; resize: vertical; } /* spacing between fields */ .tropicale-contact-main .elementor-form .elementor-field-group { margin-bottom: 19px !important; } /* ========================================================= SEND BUTTON ========================================================= */ .tropicale-contact-main .elementor-form .elementor-button { width: 100% !important; min-height: 55px !important; padding: 14px 30px !important; background: #2f2925 !important; color: #ffffff !important; border: 1px solid #2f2925 !important; border-radius: 4px !important; font-size: 12px !important; font-weight: 600 !important; letter-spacing: 3px !important; text-transform: uppercase !important; box-shadow: none !important; transition: background .3s ease, color .3s ease, transform .3s ease, border-color .3s ease; } /* button hover */ .tropicale-contact-main .elementor-form .elementor-button:hover { background: #9b705c !important; border-color: #9b705c !important; color: #ffffff !important; transform: translateY(-2px); } /* ========================================================= DECORATION LEFT TOP ========================================================= */ .tropicale-contact-main::before { content: ""; position: absolute; width: 125px; height: 125px; left: 4%; top: 65px; opacity: .30; background-image: radial-gradient( circle, #9d887b 1.2px, transparent 1.3px ); background-size: 11px 11px; pointer-events: none; } /* ========================================================= BOTTOM DECORATIVE LINE ========================================================= */ .tropicale-contact-main::after { content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: min(1000px, 75%); height: 1px; background: linear-gradient( 90deg, transparent, rgba(155,112,92,.25), transparent ); } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1024px) { .tropicale-contact-main { padding: 75px 28px !important; } .tropicale-contact-main > .elementor-container { gap: 45px; } .tropicale-contact-main > .elementor-container > .elementor-column:first-child { padding-right: 20px !important; } .tropicale-contact-main > .elementor-container > .elementor-column:first-child::after { right: -22px; } .tropicale-contact-main .elementor-column:last-child .elementor-widget-form { padding: 30px 28px 32px !important; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .tropicale-contact-main { padding: 55px 18px 60px !important; } .tropicale-contact-main > .elementor-container { display: block !important; } .tropicale-contact-main > .elementor-container > .elementor-column:first-child, .tropicale-contact-main > .elementor-container > .elementor-column:last-child { width: 100% !important; padding: 0 !important; } /* remove vertical divider */ .tropicale-contact-main > .elementor-container > .elementor-column:first-child::after { display: none; } /* first column space */ .tropicale-contact-main > .elementor-container > .elementor-column:first-child { margin-bottom: 60px !important; } .tropicale-contact-main .elementor-heading-title { font-size: 40px !important; line-height: 1.08 !important; } .tropicale-contact-main .elementor-widget-text-editor, .tropicale-contact-main .elementor-widget-text-editor p { font-size: 14px !important; line-height: 1.7 !important; } /* form card */ .tropicale-contact-main .elementor-column:last-child .elementor-widget-form { margin-top: 20px !important; padding: 27px 20px 30px !important; border-radius: 17px; } .tropicale-contact-main .elementor-form .elementor-field { min-height: 50px !important; font-size: 14px !important; } .tropicale-contact-main .elementor-form textarea.elementor-field { min-height: 125px !important; } .tropicale-contact-main::before { display: none; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 420px) { .tropicale-contact-main { padding: 48px 15px 52px !important; } .tropicale-contact-main .elementor-heading-title { font-size: 35px !important; } .tropicale-contact-main .elementor-column:last-child .elementor-widget-form { padding: 24px 16px 26px !important; } .tropicale-contact-main .elementor-icon-box-description { font-size: 13px !important; } }/* End custom CSS */