.elementor-30 .elementor-element.elementor-element-53fcd05{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-30 .elementor-element.elementor-element-34b9aca > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-30 .elementor-element.elementor-element-0ea1ca3{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-30 .elementor-element.elementor-element-a8e7f8e{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-30 .elementor-element.elementor-element-4088000{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-30 .elementor-element.elementor-element-7e334a2{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-30 .elementor-element.elementor-element-ccd629a{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-30 .elementor-element.elementor-element-07afcba{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-30 .elementor-element.elementor-element-36df99e{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}@media(max-width:767px){.elementor-30 .elementor-element.elementor-element-4088000{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-30 .elementor-element.elementor-element-07afcba{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}}/* Start custom CSS for html, class: .elementor-element-34b9aca */ /* ========================================================== SHOW LIVE ROUTE CARD ON TABLET + MOBILE ADD THIS AT THE VERY END OF YOUR CSS ========================================================== */ @media (max-width:1050px){ .lalag-route-card{ display:block !important; position:relative !important; right:auto !important; left:auto !important; bottom:auto !important; top:auto !important; width:calc(100% - 40px) !important; max-width:520px; margin:35px auto 0 !important; padding:20px; z-index:6; background: linear-gradient( 145deg, rgba(6,6,5,.96), rgba(18,16,10,.92) ); border: 1px solid rgba(218,179,84,.30); box-shadow: 0 22px 55px rgba(0,0,0,.35); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); overflow:hidden; } } /* ========================================================== PHONE ========================================================== */ @media (max-width:680px){ .lalag-route-card{ display:block !important; width:calc(100% - 40px) !important; max-width:440px; margin:28px auto 0 !important; padding:18px 17px; animation: lalaCardFloatMobile 4.8s ease-in-out infinite; } /* Icon */ .lalag-route-icon{ width:46px; height:46px; font-size:15px; flex:0 0 46px; } /* Top layout */ .lalag-route-card-top{ gap:13px; } /* LIVE ROUTE PREVIEW */ .lalag-route-eyebrow{ font-size:7px !important; letter-spacing:1.35px !important; margin-bottom:6px !important; } /* SHARJAH → LOCATION */ .lalag-route-copy strong{ font-size:11px; line-height:1.45; flex-wrap:wrap; gap:6px; } .lalag-route-copy strong i{ font-size:8px; } .lalag-rotating-place{ font-size:10px; } /* Daily service */ .lalag-route-copy > span:last-child{ margin-top:5px; font-size:7px; line-height:1.4; letter-spacing:.8px; } /* Progress route */ .lalag-route-progress{ margin: 20px 3px 7px; } .lalag-progress-dot{ width:8px; height:8px; } .lalag-progress-line{ margin:0 10px; } /* Bottom information */ .lalag-route-card-bottom{ margin-top:16px; padding-top:15px; gap:10px; font-size:6.5px; line-height:1.4; } .lalag-location-count{ font-size:6.5px; } /* Softer floating animation on phone */ @keyframes lalaCardFloatMobile{ 0%, 100%{ transform:translateY(0); } 50%{ transform:translateY(-5px); } } } /* ========================================================== VERY SMALL PHONES ========================================================== */ @media (max-width:390px){ .lalag-route-card{ width:calc(100% - 32px) !important; padding:16px 14px; margin-top:24px !important; } .lalag-route-icon{ width:42px; height:42px; flex-basis:42px; font-size:13px; } .lalag-route-card-top{ gap:10px; } .lalag-route-copy strong{ font-size:9.5px; } .lalag-rotating-place{ font-size:9px; } .lalag-route-card-bottom{ font-size:5.8px; } .lalag-location-count{ font-size:5.8px; } } /* ========================================================== REDUCE MOTION ACCESSIBILITY ========================================================== */ @media (prefers-reduced-motion:reduce){ .lalag-route-card{ animation:none !important; } } /* ========================================================== CLEAN MOBILE LIVE ROUTE CARD FIXES CONTENT / BOXES SHOWING BEHIND ========================================================== */ @media (max-width:1050px){ .lalag-route-card{ display:block !important; position:relative !important; inset:auto !important; width:calc(100% - 40px) !important; max-width:520px !important; margin:32px auto 0 !important; padding:22px !important; z-index:50 !important; /* SOLID BACKGROUND - NO CONTENT SHOWING THROUGH */ background: linear-gradient( 145deg, #070706 0%, #0c0b08 55%, #090806 100% ) !important; border:1px solid rgba(216,180,91,.42) !important; box-shadow: 0 20px 55px rgba(0,0,0,.65), 0 0 0 1px rgba(200,154,58,.04) inset !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; overflow:hidden !important; isolation:isolate !important; transform:none; } /* ------------------------------------------- REMOVE OLD EXTRA ANIMATED BORDER ------------------------------------------- */ .lalag-route-card:before{ display:none !important; content:none !important; } /* ------------------------------------------- REMOVE LARGE GLOW BEHIND CARD ------------------------------------------- */ .lalag-route-card-glow{ display:none !important; } } /* ========================================================== PHONE ========================================================== */ @media (max-width:680px){ .lalag-route-card{ display:block !important; position:relative !important; width:calc(100% - 32px) !important; max-width:none !important; margin:30px 16px 0 !important; padding:20px 18px !important; background: linear-gradient( 145deg, #050505, #0c0b08 ) !important; border: 1px solid rgba(216,180,91,.40) !important; box-shadow: 0 18px 45px rgba(0,0,0,.70) !important; animation:none !important; } /* TOP */ .lalag-route-card-top{ display:flex; align-items:center; gap:14px; } /* GOLD ROUTE ICON */ .lalag-route-icon{ width:48px !important; height:48px !important; flex:0 0 48px; display:flex; align-items:center; justify-content:center; font-size:15px !important; background: linear-gradient( 135deg, #9b7020, #efce68, #bd8c28 ) !important; } /* TEXT AREA */ .lalag-route-copy{ min-width:0; flex:1; } /* LIVE ROUTE PREVIEW */ .lalag-route-eyebrow{ display:block !important; margin-bottom:7px !important; font-size:7px !important; font-weight:700 !important; letter-spacing:1.5px !important; color: rgba(255,255,255,.48) !important; } /* SHARJAH → DESTINATION */ .lalag-route-copy strong{ display:flex !important; align-items:center; flex-wrap:wrap; gap:7px; min-height:auto; font-size:11px !important; line-height:1.35; color:#fff; } .lalag-route-copy strong i{ color:#e5c461 !important; font-size:9px !important; } .lalag-rotating-place{ color:#f2d784 !important; font-size:10px !important; font-weight:800; } /* DAILY PICK & DROP */ .lalag-route-copy > span:last-child{ display:block; margin-top:7px; color: rgba(255,255,255,.40); font-size:6.8px; font-weight:600; letter-spacing:.9px; } /* ====================================================== ROUTE PROGRESS ====================================================== */ .lalag-route-progress{ display:flex; align-items:center; width:100%; margin: 22px 0 8px !important; } .lalag-progress-dot{ width:8px; height:8px; flex:0 0 8px; } .lalag-progress-dot.start{ background:#fff; box-shadow: 0 0 0 5px rgba(255,255,255,.08); } .lalag-progress-dot.end{ background:#f2d784; box-shadow: 0 0 0 5px rgba(216,180,91,.10), 0 0 12px rgba(242,215,132,.30); } .lalag-progress-line{ height:1px; flex:1; margin:0 11px; background: rgba(255,255,255,.16); overflow:hidden; } /* ====================================================== BOTTOM AREA ====================================================== */ .lalag-route-card-bottom{ display:flex !important; align-items:center; justify-content:space-between; margin-top:18px !important; padding-top:16px !important; gap:12px; border-top: 1px solid rgba(255,255,255,.10); color: rgba(255,255,255,.48); font-size:6.5px !important; line-height:1.4; letter-spacing:.65px; } .lalag-route-card-bottom span:first-child{ display:flex; align-items:center; gap:7px; flex:1; } .lalag-route-card-bottom span:first-child i{ color:#e5c461 !important; font-size:8px; } .lalag-location-count{ flex-shrink:0; color: rgba(255,255,255,.48) !important; font-size:6.5px !important; white-space:nowrap; } } /* ========================================================== SMALL PHONE ========================================================== */ @media (max-width:390px){ .lalag-route-card{ width:calc(100% - 28px) !important; margin: 25px 14px 0 !important; padding: 17px 14px !important; } .lalag-route-icon{ width:43px !important; height:43px !important; flex-basis:43px; font-size:14px !important; } .lalag-route-card-top{ gap:11px; } .lalag-route-copy strong{ font-size:10px !important; } .lalag-rotating-place{ font-size:9px !important; } .lalag-route-eyebrow{ font-size:6.3px !important; } .lalag-route-copy > span:last-child{ font-size:6px; } .lalag-route-card-bottom{ font-size:5.7px !important; } .lalag-location-count{ font-size:5.7px !important; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-09a4429 *//* ============================================================ LALA G GROUP COMPLETE TYPOGRAPHY + SIZE + ICON LOCK FOR "WHY CHOOSE LALA G" WHITE SECTION Paste AFTER all other CSS ============================================================= */ /* ============================================================ LOAD MONTSERRAT + FONT AWESOME ============================================================= */ @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&display=swap'); @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css'); /* ============================================================ GLOBAL SECTION RESET ============================================================= */ .lalag-why, .lalag-why *, .elementor .lalag-why, .elementor .lalag-why *{ box-sizing:border-box !important; } /* FORCE MONTSERRAT THROUGHOUT SECTION */ .lalag-why, .lalag-why h1, .lalag-why h2, .lalag-why h3, .lalag-why h4, .lalag-why h5, .lalag-why h6, .lalag-why p, .lalag-why span, .lalag-why div, .lalag-why a, .lalag-why strong, .lalag-why button, .elementor .lalag-why, .elementor .lalag-why h1, .elementor .lalag-why h2, .elementor .lalag-why h3, .elementor .lalag-why p, .elementor .lalag-why span{ font-family:"Montserrat", Arial, sans-serif !important; } /* REMOVE ELEMENTOR DEFAULT MARGINS */ .lalag-why h1, .lalag-why h2, .lalag-why h3, .lalag-why h4, .lalag-why p{ margin-top:0 !important; } .lalag-why h2, .lalag-why h3{ padding:0 !important; } /* ============================================================ MAIN SECTION ============================================================= */ .lalag-why{ position:relative !important; width:100% !important; padding: 120px 0 95px !important; margin:0 !important; overflow:hidden !important; background: radial-gradient( circle at 90% 15%, rgba(216,180,91,.13), transparent 24% ), radial-gradient( circle at 4% 85%, rgba(200,154,58,.07), transparent 25% ), #FFFFFF !important; color:#080808 !important; font-family:"Montserrat", Arial, sans-serif !important; } /* ============================================================ MAIN CONTAINER ============================================================= */ .lalag-why-container{ position:relative !important; z-index:3 !important; width:min(1280px,92%) !important; max-width:1280px !important; margin: 0 auto !important; padding: 0 !important; } /* ============================================================ MAIN GRID ============================================================= */ .lalag-why-grid{ display:grid !important; grid-template-columns: .88fr 1.32fr !important; align-items:center !important; gap:75px !important; } /* ============================================================ LEFT CONTENT ============================================================= */ .lalag-why-content{ width:100% !important; max-width:475px !important; } /* ============================================================ SMALL GOLD LABEL ============================================================= */ .lalag-why-label{ display:inline-flex !important; align-items:center !important; gap:11px !important; margin: 0 0 23px 0 !important; padding:0 !important; color:#A77823 !important; font-family:"Montserrat", Arial, sans-serif !important; font-size:8px !important; line-height:1.4 !important; font-weight:800 !important; letter-spacing:2.4px !important; text-transform:uppercase !important; } /* LABEL GOLD LINE */ .lalag-why-label-line{ position:relative !important; display:block !important; width:35px !important; min-width:35px !important; height:1px !important; overflow:hidden !important; background: rgba(200,154,58,.30) !important; } /* ============================================================ MAIN HEADING ============================================================= */ .lalag-why-title{ display:block !important; width:100% !important; max-width:520px !important; margin:0 !important; padding:0 !important; color:#080808 !important; font-family:"Montserrat", Arial, sans-serif !important; font-size: clamp(42px,4.6vw,70px) !important; line-height:.98 !important; font-weight:800 !important; letter-spacing:-3.2px !important; text-transform:uppercase !important; text-decoration:none !important; font-style:normal !important; } /* ============================================================ GOLD HEADING ============================================================= */ .lalag-why-title-gold{ display:block !important; margin-top:9px !important; font-family:"Montserrat", Arial, sans-serif !important; font-size:inherit !important; line-height:inherit !important; font-weight:800 !important; letter-spacing:inherit !important; text-transform:uppercase !important; color:#C89A3A !important; background: linear-gradient( 100deg, #785115 0%, #B8872A 18%, #E0BD60 37%, #FFE9A1 49%, #C89A3A 65%, #9A6E20 82%, #D8B45B 100% ) !important; background-size: 220% auto !important; -webkit-background-clip:text !important; background-clip:text !important; -webkit-text-fill-color: transparent !important; } /* ============================================================ DESCRIPTION ============================================================= */ .lalag-why-description{ display:block !important; width:100% !important; max-width:455px !important; margin: 27px 0 0 0 !important; padding:0 !important; color:#707070 !important; font-family:"Montserrat", Arial, sans-serif !important; font-size:12px !important; line-height:1.95 !important; font-weight:400 !important; letter-spacing:0 !important; text-transform:none !important; } .lalag-why-description strong{ color:#151515 !important; font-family:"Montserrat", Arial, sans-serif !important; font-size:inherit !important; line-height:inherit !important; font-weight:700 !important; } /* ============================================================ SMALL SHARJAH → DUBAI ROUTE ============================================================= */ .lalag-why-route{ display:flex !important; align-items:center !important; gap:11px !important; margin-top:30px !important; } .lalag-why-route-point{ display:block !important; width:8px !important; min-width:8px !important; height:8px !important; border-radius:50% !important; background:#C89A3A !important; box-shadow: 0 0 0 5px rgba(200,154,58,.10), 0 0 15px rgba(200,154,58,.22) !important; } .lalag-why-route-line{ position:relative !important; display:block !important; width:46px !important; min-width:46px !important; height:1px !important; background: rgba(200,154,58,.25) !important; } .lalag-why-route span{ color:#303030 !important; font-family:"Montserrat", Arial, sans-serif !important; font-size:8px !important; line-height:1.3 !important; font-weight:800 !important; letter-spacing:1.4px !important; text-transform:uppercase !important; } /* ============================================================ FEATURE GRID ============================================================= */ .lalag-feature-grid{ width:100% !important; display:grid !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap:16px !important; } /* ============================================================ FEATURE CARDS ============================================================= */ .lalag-feature-card{ position:relative !important; display:block !important; width:100% !important; min-height:245px !important; padding: 31px 28px !important; margin:0 !important; overflow:hidden !important; border: 1px solid #ECE7DD !important; border-radius:0 !important; background: linear-gradient( 145deg, #FFFFFF, #FBFAF7 ) !important; box-shadow: 0 14px 40px rgba(20,16,8,.055) !important; } /* ============================================================ FEATURE ICON BOX ============================================================= */ .lalag-feature-icon{ position:relative !important; z-index:2 !important; display:flex !important; align-items:center !important; justify-content:center !important; width:54px !important; min-width:54px !important; height:54px !important; margin: 0 0 27px 0 !important; padding:0 !important; color:#0A0804 !important; background: linear-gradient( 135deg, #936A20 0%, #D8B45B 38%, #F2D784 57%, #B68128 100% ) !important; box-shadow: 0 12px 28px rgba(200,154,58,.18) !important; } /* ============================================================ FONT AWESOME ICON FIX ============================================================= */ /* IMPORTANT: This forces Font Awesome icons to display correctly even if Elementor applies its own font-family. */ .lalag-why .fa, .lalag-why .fas, .lalag-why .fa-solid{ font-family: "Font Awesome 6 Free" !important; font-style:normal !important; font-variant:normal !important; text-rendering:auto !important; line-height:1 !important; font-weight:900 !important; display:inline-block !important; } .lalag-why .fab, .lalag-why .fa-brands{ font-family: "Font Awesome 6 Brands" !important; font-style:normal !important; font-variant:normal !important; text-rendering:auto !important; line-height:1 !important; font-weight:400 !important; display:inline-block !important; } /* ICON SIZE */ .lalag-feature-icon i, .lalag-feature-icon .fa-solid, .lalag-feature-icon .fas{ color:#0A0804 !important; font-family: "Font Awesome 6 Free" !important; font-size:17px !important; line-height:1 !important; font-weight:900 !important; width:auto !important; height:auto !important; } /* ============================================================ CARD NUMBER ============================================================= */ .lalag-feature-number{ position:absolute !important; top:26px !important; right:26px !important; margin:0 !important; padding:0 !important; color: rgba(138,98,30,.21) !important; font-family:"Montserrat", Arial, sans-serif !important; font-size:10px !important; line-height:1 !important; font-weight:800 !important; letter-spacing:1px !important; } /* ============================================================ CARD HEADING ============================================================= */ .lalag-feature-title{ position:relative !important; z-index:2 !important; display:block !important; margin:0 !important; padding:0 !important; color:#101010 !important; font-family:"Montserrat", Arial, sans-serif !important; font-size:15px !important; line-height:1.4 !important; font-weight:700 !important; letter-spacing:0 !important; text-transform:none !important; } /* ============================================================ CARD DESCRIPTION ============================================================= */ .lalag-feature-text{ position:relative !important; z-index:2 !important; display:block !important; width:100% !important; max-width:270px !important; margin: 12px 0 0 0 !important; padding:0 !important; color:#77736C !important; font-family:"Montserrat", Arial, sans-serif !important; font-size:9px !important; line-height:1.85 !important; font-weight:500 !important; letter-spacing:0 !important; text-transform:none !important; } /* ============================================================ STATISTICS CONTAINER ============================================================= */ .lalag-stats{ position:relative !important; width:100% !important; margin: 78px 0 0 0 !important; padding:0 !important; display:grid !important; grid-template-columns: repeat(4,minmax(0,1fr)) !important; background:#090909 !important; border: 1px solid rgba(200,154,58,.16) !important; box-shadow: 0 22px 55px rgba(0,0,0,.10) !important; overflow:hidden !important; } /* ============================================================ EACH STAT ============================================================= */ .lalag-stat{ position:relative !important; display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; min-height:128px !important; padding: 25px !important; margin:0 !important; text-align:center !important; } /* ============================================================ STAT NUMBER ============================================================= */ .lalag-stat strong{ display:block !important; margin:0 !important; padding:0 !important; font-family:"Montserrat", Arial, sans-serif !important; font-size: clamp(25px,2.5vw,38px) !important; line-height:1 !important; font-weight:800 !important; letter-spacing:-1.2px !important; color:#F2D784 !important; background: linear-gradient( 105deg, #A87924, #F2D784, #C89A3A ) !important; -webkit-background-clip:text !important; background-clip:text !important; -webkit-text-fill-color: transparent !important; } /* ============================================================ STAT LABEL ============================================================= */ .lalag-stat span{ display:block !important; margin: 10px 0 0 0 !important; padding:0 !important; color: rgba(255,255,255,.48) !important; font-family:"Montserrat", Arial, sans-serif !important; font-size:7px !important; line-height:1.4 !important; font-weight:700 !important; letter-spacing:1.45px !important; text-transform:uppercase !important; } /* ============================================================ TABLET ============================================================= */ @media(max-width:1000px){ .lalag-why{ padding: 95px 0 75px !important; } .lalag-why-grid{ grid-template-columns: 1fr !important; gap: 52px !important; } .lalag-why-content{ max-width: 650px !important; } .lalag-why-title{ max-width: 670px !important; } .lalag-why-description{ max-width: 580px !important; } } /* ============================================================ MOBILE — 680PX AND BELOW ============================================================= */ @media(max-width:680px){ .lalag-why{ padding: 72px 0 58px !important; } .lalag-why-container{ width:100% !important; max-width:none !important; padding: 0 20px !important; } .lalag-why-grid{ gap: 38px !important; } /* LABEL */ .lalag-why-label{ margin-bottom: 17px !important; font-size: 6.5px !important; line-height: 1.4 !important; letter-spacing: 1.7px !important; } .lalag-why-label-line{ width: 26px !important; min-width: 26px !important; } /* MAIN TITLE */ .lalag-why-title{ font-size: clamp(34px,10vw,46px) !important; line-height: 1 !important; letter-spacing: -1.8px !important; } .lalag-why-title-gold{ margin-top: 6px !important; } /* DESCRIPTION */ .lalag-why-description{ margin-top: 20px !important; max-width: 100% !important; font-size: 10px !important; line-height: 1.8 !important; } /* ROUTE */ .lalag-why-route{ margin-top: 23px !important; } .lalag-why-route span{ font-size: 6.5px !important; line-height: 1.4 !important; letter-spacing: 1px !important; } /* FEATURE CARDS */ .lalag-feature-grid{ grid-template-columns: 1fr !important; gap: 11px !important; } .lalag-feature-card{ min-height:auto !important; padding: 24px 21px !important; } .lalag-feature-icon{ width: 47px !important; min-width: 47px !important; height: 47px !important; margin-bottom: 20px !important; } .lalag-feature-icon i, .lalag-feature-icon .fas, .lalag-feature-icon .fa-solid{ font-size: 14px !important; } .lalag-feature-title{ font-size: 13px !important; line-height: 1.4 !important; } .lalag-feature-text{ max-width: 100% !important; margin-top: 10px !important; font-size: 8px !important; line-height: 1.75 !important; } .lalag-feature-number{ top: 20px !important; right: 20px !important; font-size: 8px !important; } /* STATS */ .lalag-stats{ margin-top: 50px !important; grid-template-columns: repeat(2,1fr) !important; } .lalag-stat{ min-height: 110px !important; padding: 22px 10px !important; } .lalag-stat strong{ font-size: 27px !important; line-height: 1 !important; } .lalag-stat span{ margin-top: 8px !important; font-size: 6px !important; line-height: 1.4 !important; letter-spacing: 1px !important; } } /* ============================================================ VERY SMALL PHONES ============================================================= */ @media(max-width:390px){ .lalag-why-container{ padding: 0 16px !important; } .lalag-why-title{ font-size: 32px !important; line-height: 1 !important; letter-spacing: -1.4px !important; } .lalag-feature-card{ padding: 22px 18px !important; } .lalag-feature-title{ font-size: 12.5px !important; } .lalag-feature-text{ font-size: 8px !important; } .lalag-stat strong{ font-size: 24px !important; } } /* ============================================================ END — LALA G STYLE LOCK ============================================================= *//* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-7d8da7f *//* ============================================================ LALA G ROUTES COMPLETE ELEMENTOR TYPOGRAPHY + SIZE + STYLE LOCK ------------------------------------------------------------ DESKTOP + TABLET + MOBILE ============================================================= */ /* ============================================================ 01. LOAD MONTSERRAT ============================================================= */ @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&display=swap'); /* ============================================================ 02. MAIN SECTION RESET ============================================================= */ .lalag-routes2, .lalag-routes2 *, .elementor .lalag-routes2, .elementor .lalag-routes2 *{ box-sizing:border-box; } /* DO NOT LET ELEMENTOR CHANGE SECTION FONT */ .lalag-routes2{ font-family:"Montserrat", Arial, sans-serif !important; } /* ============================================================ 03. FORCE MONTSERRAT ON TEXT ONLY ============================================================= */ .elementor .lalag-routes2 h1, .elementor .lalag-routes2 h2, .elementor .lalag-routes2 h3, .elementor .lalag-routes2 h4, .elementor .lalag-routes2 h5, .elementor .lalag-routes2 h6, .elementor .lalag-routes2 p, .elementor .lalag-routes2 span, .elementor .lalag-routes2 strong, .elementor .lalag-routes2 a, .elementor .lalag-routes2 button, .lalag-routes2 h1, .lalag-routes2 h2, .lalag-routes2 h3, .lalag-routes2 h4, .lalag-routes2 h5, .lalag-routes2 h6, .lalag-routes2 p, .lalag-routes2 span, .lalag-routes2 strong, .lalag-routes2 a, .lalag-routes2 button{ font-family:"Montserrat", Arial, sans-serif !important; } /* ============================================================ 04. REMOVE ELEMENTOR DEFAULT TYPOGRAPHY MARGINS ============================================================= */ .elementor .lalag-routes2 h1, .elementor .lalag-routes2 h2, .elementor .lalag-routes2 h3, .elementor .lalag-routes2 h4, .elementor .lalag-routes2 h5, .elementor .lalag-routes2 h6, .elementor .lalag-routes2 p{ margin-block-start:0 !important; margin-block-end:0 !important; } .lalag-routes2 h1, .lalag-routes2 h2, .lalag-routes2 h3, .lalag-routes2 h4, .lalag-routes2 h5, .lalag-routes2 h6, .lalag-routes2 p{ margin-top:0 !important; margin-bottom:0 !important; } /* ============================================================ 05. REMOVE ELEMENTOR LINK SETTINGS ============================================================= */ .elementor .lalag-routes2 a, .elementor .lalag-routes2 a:hover, .elementor .lalag-routes2 a:focus, .elementor .lalag-routes2 a:visited{ text-decoration:none !important; } /* ============================================================ 06. SECTION ============================================================= */ .lalag-routes2{ --lg-black:#090909; --lg-gold:#C89A3A; --lg-gold-dark:#8A621E; --lg-gold-rich:#D8B45B; --lg-gold-light:#F2D784; --lg-background:#FAF9F6; --lg-white:#FFFFFF; --lg-text:#141414; --lg-muted:#716D66; --lg-border:#EBE5D9; position:relative !important; width:100% !important; max-width:none !important; margin:0 !important; padding: 115px 0 100px !important; overflow:hidden !important; background: radial-gradient( circle at 94% 8%, rgba(200,154,58,.11), transparent 23% ), radial-gradient( circle at 4% 94%, rgba(216,180,91,.08), transparent 26% ), #FAF9F6 !important; color:#141414 !important; } /* ============================================================ 07. INNER WIDTH ============================================================= */ .lalag-routes2-container{ position:relative !important; z-index:3 !important; width:92% !important; max-width:1280px !important; margin: 0 auto !important; padding:0 !important; } /* ============================================================ 08. HEADER GRID ============================================================= */ .lalag-routes2-header{ display:grid !important; grid-template-columns: minmax(0,1fr) minmax(320px,.78fr) !important; align-items:end !important; gap:60px !important; margin: 0 0 55px !important; padding:0 !important; } /* ============================================================ 09. SMALL GOLD LABEL ============================================================= */ .lalag-routes2-label{ display:flex !important; align-items:center !important; gap:11px !important; margin: 0 0 19px !important; padding:0 !important; color:#9B6D1E !important; font-family: "Montserrat", Arial, sans-serif !important; font-size:8px !important; font-weight:800 !important; line-height:1.2 !important; letter-spacing:2.3px !important; text-transform:uppercase !important; } /* LABEL GOLD LINE */ .lalag-routes2-label-line{ position:relative !important; display:block !important; width:37px !important; min-width:37px !important; height:1px !important; overflow:hidden !important; background: rgba(200,154,58,.30) !important; } .lalag-routes2-label-line:after{ content:"" !important; position:absolute !important; top:0 !important; left:-90% !important; width:70% !important; height:1px !important; background: linear-gradient( 90deg, transparent, #C89A3A, #F2D784 ) !important; animation: lalagLabelMove 2.6s ease-in-out infinite !important; } @keyframes lalagLabelMove{ 0%{ left:-90%; } 55%{ left:110%; } 100%{ left:110%; } } /* ============================================================ 10. MAIN SECTION HEADING ============================================================= */ .elementor .lalag-routes2 .lalag-routes2-title, .lalag-routes2 .lalag-routes2-title{ display:block !important; max-width:760px !important; margin:0 !important; padding:0 !important; color:#090909 !important; font-family: "Montserrat", Arial, sans-serif !important; font-size: clamp( 42px, 4.7vw, 70px ) !important; font-weight:800 !important; font-style:normal !important; line-height:1 !important; letter-spacing:-3.1px !important; text-transform:uppercase !important; text-decoration:none !important; } /* GOLD SECOND LINE */ .elementor .lalag-routes2 .lalag-routes2-title-gold, .lalag-routes2 .lalag-routes2-title-gold{ display:block !important; margin-top:7px !important; font-family: "Montserrat", Arial, sans-serif !important; font-size:inherit !important; font-weight:800 !important; line-height:1 !important; letter-spacing:inherit !important; text-transform:uppercase !important; color:#C89A3A !important; background: linear-gradient( 100deg, #785115 0%, #B9872D 20%, #E0BD60 38%, #FFF0AE 50%, #C89A3A 67%, #8A621E 85%, #D8B45B 100% ) !important; background-size: 230% auto !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; animation: lalagGoldText 6s linear infinite !important; } @keyframes lalagGoldText{ from{ background-position: 0% center; } to{ background-position: 230% center; } } /* ============================================================ 11. HEADER DESCRIPTION ============================================================= */ .elementor .lalag-routes2 .lalag-routes2-intro, .lalag-routes2 .lalag-routes2-intro{ display:block !important; width:100% !important; max-width:500px !important; margin: 0 0 5px auto !important; padding:0 !important; color:#716D66 !important; font-family: "Montserrat", Arial, sans-serif !important; font-size:12px !important; font-weight:400 !important; line-height:1.9 !important; letter-spacing:0 !important; text-transform:none !important; } .elementor .lalag-routes2 .lalag-routes2-intro strong, .lalag-routes2 .lalag-routes2-intro strong{ color:#202020 !important; font-weight:700 !important; } /* ============================================================ 12. SHARJAH → DUBAI ROUTE BAR ============================================================= */ .lalag-network-bar{ position:relative !important; display:flex !important; align-items:center !important; justify-content: space-between !important; width:100% !important; gap:20px !important; margin: 0 0 27px !important; padding: 17px 20px !important; border: 1px solid rgba(200,154,58,.22) !important; background: rgba(255,255,255,.82) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; box-shadow: 0 10px 35px rgba(29,23,10,.04) !important; } .lalag-network-route{ display:flex !important; align-items:center !important; gap:11px !important; } /* SHARJAH */ .lalag-network-start{ color:#141414 !important; font-size:9px !important; font-weight:800 !important; line-height:1 !important; letter-spacing:.5px !important; text-transform:uppercase !important; white-space:nowrap !important; } /* DUBAI */ .lalag-network-end{ color:#9A6B1D !important; font-size:9px !important; font-weight:800 !important; line-height:1 !important; letter-spacing:.5px !important; text-transform:uppercase !important; white-space:nowrap !important; } /* NETWORK LINE */ .lalag-network-track{ position:relative !important; display:block !important; width:115px !important; height:1px !important; overflow:hidden !important; background: rgba(200,154,58,.25) !important; } .lalag-network-track:after{ content:"" !important; position:absolute !important; top:0 !important; left:-45% !important; width:40% !important; height:1px !important; background: linear-gradient( 90deg, transparent, #F2D784, transparent ) !important; animation: lalagRouteTravel 2.2s linear infinite !important; } @keyframes lalagRouteTravel{ to{ left:120%; } } /* 9 DESTINATIONS TEXT */ .lalag-network-count{ color:#827B70 !important; font-size:8px !important; font-weight:700 !important; line-height:1.4 !important; letter-spacing:1.2px !important; text-transform:uppercase !important; } /* ============================================================ 13. ROUTES GRID ============================================================= */ .lalag-routes2-grid{ display:grid !important; grid-template-columns: repeat(3,minmax(0,1fr)) !important; gap:16px !important; width:100% !important; margin:0 !important; padding:0 !important; } /* ============================================================ 14. ROUTE CARD ============================================================= */ .lalag-route2-card{ position:relative !important; display:block !important; width:100% !important; min-width:0 !important; min-height:330px !important; margin:0 !important; padding: 29px !important; overflow:hidden !important; border: 1px solid #EBE5D9 !important; border-radius:0 !important; background: linear-gradient( 145deg, #FFFFFF 0%, #FFFFFF 58%, #FBF8F1 100% ) !important; box-shadow: 0 14px 42px rgba(30,24,12,.05) !important; transition: transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s ease, border-color .45s ease !important; } /* CARD GOLD TOP BORDER */ .lalag-route2-card:before{ content:"" !important; position:absolute !important; top:0 !important; left:0 !important; width:0 !important; height:2px !important; background: linear-gradient( 90deg, #8A621E, #F2D784, #C89A3A ) !important; transition: width .55s ease !important; } /* CARD GLOW */ .lalag-route2-card:after{ content:"" !important; position:absolute !important; width:220px !important; height:220px !important; top:-145px !important; right:-145px !important; border-radius:50% !important; background: radial-gradient( circle, rgba(216,180,91,.19), transparent 68% ) !important; opacity:.3 !important; transform: scale(.7) !important; transition: opacity .5s ease, transform .5s ease !important; pointer-events:none !important; } /* CARD HOVER */ .lalag-route2-card:hover{ transform: translateY(-9px) !important; border-color: rgba(200,154,58,.38) !important; box-shadow: 0 30px 70px rgba(52,38,12,.11) !important; } .lalag-route2-card:hover:before{ width:100% !important; } .lalag-route2-card:hover:after{ opacity:1 !important; transform: scale(1.2) !important; } /* ============================================================ 15. CARD TOP ============================================================= */ .lalag-route2-top{ position:relative !important; z-index:3 !important; display:flex !important; align-items: flex-start !important; justify-content: space-between !important; gap:20px !important; margin:0 !important; padding:0 !important; } /* ============================================================ 16. SVG ICON ============================================================= */ .lalag-route2-icon{ position:relative !important; display:flex !important; align-items:center !important; justify-content:center !important; flex: 0 0 57px !important; width:57px !important; height:57px !important; margin:0 !important; padding:0 !important; color:#13100B !important; background: linear-gradient( 135deg, #9A6D20 0%, #DAB658 38%, #F6DD91 59%, #B78228 100% ) !important; box-shadow: 0 13px 30px rgba(200,154,58,.20) !important; transition: transform .45s ease, box-shadow .45s ease !important; } /* VERY IMPORTANT: Force Elementor not to resize SVG */ .lalag-route2-icon svg{ display:block !important; width:24px !important; height:24px !important; max-width:24px !important; min-width:24px !important; max-height:24px !important; margin:0 !important; padding:0 !important; stroke: currentColor !important; fill:none !important; stroke-width: 1.8 !important; stroke-linecap: round !important; stroke-linejoin: round !important; } .lalag-route2-card:hover .lalag-route2-icon{ transform: translateY(-3px) rotate(-5deg) scale(1.06) !important; box-shadow: 0 18px 38px rgba(200,154,58,.28) !important; } /* ============================================================ 17. CARD NUMBER ============================================================= */ .lalag-route2-index{ color: rgba(138,98,30,.23) !important; font-size:10px !important; font-weight:800 !important; line-height:1 !important; letter-spacing:1px !important; } /* ============================================================ 18. CARD CONTENT ============================================================= */ .lalag-route2-content{ position:relative !important; z-index:3 !important; display:block !important; margin: 27px 0 0 !important; padding:0 !important; } /* DAILY PICK & DROP */ .lalag-route2-from{ display:block !important; margin: 0 0 8px !important; padding:0 !important; color:#A07120 !important; font-size:7px !important; font-weight:800 !important; line-height:1.2 !important; letter-spacing: 1.55px !important; text-transform: uppercase !important; } /* ============================================================ 19. ROUTE TITLE ============================================================= */ .elementor .lalag-routes2 .lalag-route2-title, .lalag-routes2 .lalag-route2-title{ display:block !important; margin:0 !important; padding:0 !important; color:#111111 !important; font-family: "Montserrat", Arial, sans-serif !important; font-size:18px !important; font-weight:800 !important; font-style:normal !important; line-height:1.35 !important; letter-spacing: -.45px !important; text-transform:none !important; } /* ============================================================ 20. LOCATION SUBTITLE ============================================================= */ .lalag-route2-subtitle{ display:block !important; margin: 7px 0 0 !important; padding:0 !important; color:#999188 !important; font-size:8px !important; font-weight:600 !important; line-height:1.4 !important; letter-spacing:0 !important; text-transform:none !important; } /* ============================================================ 21. CARD DESCRIPTION ============================================================= */ .elementor .lalag-routes2 .lalag-route2-description, .lalag-routes2 .lalag-route2-description{ display:block !important; max-width:none !important; margin: 20px 0 0 !important; padding:0 !important; color:#716D66 !important; font-size:9.5px !important; font-weight:500 !important; line-height:1.82 !important; letter-spacing:0 !important; text-transform:none !important; } /* ============================================================ 22. CARD FOOTER ============================================================= */ .lalag-route2-footer{ position:absolute !important; z-index:4 !important; left:29px !important; right:29px !important; bottom:26px !important; display:flex !important; align-items:center !important; justify-content: space-between !important; gap:12px !important; margin:0 !important; padding:0 !important; } /* ============================================================ 23. CARD TAG ============================================================= */ .lalag-route2-tag{ display:inline-flex !important; align-items:center !important; justify-content:center !important; width:auto !important; min-height:28px !important; margin:0 !important; padding: 0 12px !important; color:#98691D !important; border: 1px solid rgba(200,154,58,.27) !important; border-radius: 100px !important; background: #FFFCF5 !important; font-size:6.5px !important; font-weight:800 !important; line-height:1 !important; letter-spacing: .45px !important; text-transform: uppercase !important; white-space: nowrap !important; } /* ============================================================ 24. CARD ARROW ============================================================= */ .lalag-route2-arrow{ display:flex !important; align-items:center !important; justify-content:center !important; flex: 0 0 31px !important; width:31px !important; height:31px !important; margin:0 !important; padding:0 !important; border-radius:50% !important; color:#9B6D20 !important; border: 1px solid rgba(200,154,58,.24) !important; background:#FFFFFF !important; transition: transform .35s ease, background .35s ease, color .35s ease !important; } .lalag-route2-arrow svg{ display:block !important; width:14px !important; height:14px !important; max-width:14px !important; margin:0 !important; stroke: currentColor !important; fill:none !important; stroke-width: 1.8 !important; stroke-linecap: round !important; stroke-linejoin: round !important; } .lalag-route2-card:hover .lalag-route2-arrow{ transform: translateX(3px) !important; color:#080808 !important; background: #F2D784 !important; } /* ============================================================ 25. BOTTOM CTA ============================================================= */ .lalag-routes2-bottom{ position:relative !important; display:flex !important; align-items:center !important; justify-content: space-between !important; gap:35px !important; width:100% !important; margin: 45px 0 0 !important; padding: 33px 36px !important; overflow:hidden !important; background: #090909 !important; border: 1px solid rgba(200,154,58,.23) !important; box-shadow: 0 20px 50px rgba(0,0,0,.10) !important; } /* ============================================================ 26. CTA SMALL LABEL ============================================================= */ .lalag-routes2-bottom-copy span{ display:block !important; margin: 0 0 7px !important; color:#D8B45B !important; font-size:7px !important; font-weight:800 !important; line-height:1.2 !important; letter-spacing: 1.8px !important; text-transform: uppercase !important; } /* ============================================================ 27. CTA MAIN HEADING ============================================================= */ .lalag-routes2-bottom-copy strong{ display:block !important; margin:0 !important; color:#FFFFFF !important; font-size: clamp( 18px, 2vw, 27px ) !important; font-weight:700 !important; line-height:1.35 !important; letter-spacing: -.7px !important; } /* ============================================================ 28. CTA BUTTON ============================================================= */ .elementor .lalag-routes2 .lalag-routes2-btn, .lalag-routes2 .lalag-routes2-btn{ position:relative !important; z-index:3 !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:9px !important; flex-shrink:0 !important; min-height:52px !important; margin:0 !important; padding: 0 24px !important; overflow:hidden !important; border:none !important; border-radius:0 !important; color:#090704 !important; background: linear-gradient( 115deg, #8A621E, #D4AA49 28%, #F2D784 50%, #C89A3A 74%, #8A621E ) !important; font-family: "Montserrat", Arial, sans-serif !important; font-size:8px !important; font-weight:800 !important; line-height:1 !important; letter-spacing: 1px !important; text-transform: uppercase !important; text-decoration: none !important; transition: transform .35s ease, box-shadow .35s ease !important; } /* BUTTON ICON */ .lalag-routes2-btn svg{ display:block !important; width:14px !important; height:14px !important; max-width:14px !important; flex: 0 0 14px !important; fill: currentColor !important; } /* BUTTON TEXT */ .lalag-routes2-btn span{ color:#090704 !important; font-size:8px !important; font-weight:800 !important; line-height:1 !important; letter-spacing: 1px !important; } /* ============================================================ 29. DESKTOP ANIMATION ============================================================= */ .lalag-routes2-header, .lalag-network-bar, .lalag-route2-card, .lalag-routes2-bottom{ opacity:0; transform: translateY(28px); animation: lalagRouteReveal .85s cubic-bezier(.2,.7,.2,1) forwards; } .lalag-routes2-header{ animation-delay:.05s; } .lalag-network-bar{ animation-delay:.13s; } .lalag-route2-card:nth-child(1){ animation-delay:.18s; } .lalag-route2-card:nth-child(2){ animation-delay:.24s; } .lalag-route2-card:nth-child(3){ animation-delay:.30s; } .lalag-route2-card:nth-child(4){ animation-delay:.36s; } .lalag-route2-card:nth-child(5){ animation-delay:.42s; } .lalag-route2-card:nth-child(6){ animation-delay:.48s; } .lalag-route2-card:nth-child(7){ animation-delay:.54s; } .lalag-route2-card:nth-child(8){ animation-delay:.60s; } .lalag-route2-card:nth-child(9){ animation-delay:.66s; } .lalag-routes2-bottom{ animation-delay:.74s; } @keyframes lalagRouteReveal{ to{ opacity:1; transform: translateY(0); } } /* ============================================================ 30. TABLET ============================================================= */ @media (max-width:1050px){ .lalag-routes2{ padding: 90px 0 78px !important; } .lalag-routes2-container{ width:90% !important; } .lalag-routes2-header{ grid-template-columns: 1fr !important; gap:25px !important; margin-bottom: 42px !important; } .lalag-routes2-title{ font-size: clamp( 40px, 6vw, 58px ) !important; letter-spacing: -2.4px !important; } .lalag-routes2-intro{ max-width: 700px !important; margin: 0 !important; font-size: 11px !important; } .lalag-routes2-grid{ grid-template-columns: repeat( 2, minmax(0,1fr) ) !important; } } /* ============================================================ 31. MOBILE ============================================================= */ @media (max-width:680px){ .lalag-routes2{ padding: 68px 0 58px !important; } .lalag-routes2-container{ width:100% !important; max-width:none !important; padding: 0 20px !important; } /* HEADER */ .lalag-routes2-header{ display:block !important; margin-bottom: 34px !important; } /* SMALL LABEL */ .lalag-routes2-label{ margin-bottom: 15px !important; font-size: 6.3px !important; line-height:1.2 !important; letter-spacing: 1.5px !important; } .lalag-routes2-label-line{ width:27px !important; min-width:27px !important; } /* MAIN TITLE */ .elementor .lalag-routes2 .lalag-routes2-title, .lalag-routes2 .lalag-routes2-title{ max-width:100% !important; font-size: clamp( 32px, 9.5vw, 44px ) !important; font-weight: 800 !important; line-height: 1.03 !important; letter-spacing: -1.7px !important; } .lalag-routes2-title-gold{ margin-top: 6px !important; } /* DESCRIPTION */ .elementor .lalag-routes2 .lalag-routes2-intro, .lalag-routes2 .lalag-routes2-intro{ max-width:100% !important; margin: 21px 0 0 !important; font-size: 9.5px !important; font-weight: 400 !important; line-height: 1.8 !important; } /* ROUTE NETWORK BAR */ .lalag-network-bar{ display:flex !important; flex-direction: column !important; align-items: flex-start !important; gap:11px !important; margin-bottom: 19px !important; padding: 15px !important; } .lalag-network-route{ width:100% !important; } .lalag-network-start, .lalag-network-end{ font-size: 7px !important; } .lalag-network-track{ flex:1 !important; width:auto !important; } .lalag-network-count{ font-size: 6px !important; letter-spacing: .9px !important; } /* ONE CARD PER ROW */ .lalag-routes2-grid{ grid-template-columns: 1fr !important; gap: 11px !important; } /* CARD */ .lalag-route2-card{ min-height: 310px !important; padding: 23px 21px !important; } /* ICON */ .lalag-route2-icon{ flex: 0 0 49px !important; width: 49px !important; height: 49px !important; } .lalag-route2-icon svg{ width: 20px !important; height: 20px !important; min-width: 20px !important; max-width: 20px !important; } /* CARD NUMBER */ .lalag-route2-index{ font-size: 8px !important; } /* CARD CONTENT */ .lalag-route2-content{ margin-top: 22px !important; } /* PICK DROP TEXT */ .lalag-route2-from{ margin-bottom: 7px !important; font-size: 6px !important; letter-spacing: 1.2px !important; } /* ROUTE TITLE */ .elementor .lalag-routes2 .lalag-route2-title, .lalag-routes2 .lalag-route2-title{ font-size: 16px !important; font-weight: 800 !important; line-height: 1.35 !important; letter-spacing: -.3px !important; } /* LOCATION */ .lalag-route2-subtitle{ margin-top: 6px !important; font-size: 7px !important; line-height: 1.4 !important; } /* DESCRIPTION */ .elementor .lalag-routes2 .lalag-route2-description, .lalag-routes2 .lalag-route2-description{ margin-top: 16px !important; font-size: 8.5px !important; font-weight: 500 !important; line-height: 1.75 !important; } /* FOOTER */ .lalag-route2-footer{ left: 21px !important; right: 21px !important; bottom: 21px !important; } .lalag-route2-tag{ min-height: 26px !important; padding: 0 10px !important; font-size: 5.8px !important; } .lalag-route2-arrow{ width: 29px !important; height: 29px !important; flex: 0 0 29px !important; } /* BOTTOM CTA */ .lalag-routes2-bottom{ display:flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 20px !important; margin-top: 34px !important; padding: 25px 21px !important; } .lalag-routes2-bottom-copy span{ font-size: 6px !important; letter-spacing: 1.3px !important; } .lalag-routes2-bottom-copy strong{ font-size: 19px !important; font-weight: 700 !important; line-height: 1.35 !important; letter-spacing: -.4px !important; } .elementor .lalag-routes2 .lalag-routes2-btn, .lalag-routes2 .lalag-routes2-btn{ width:100% !important; min-height: 51px !important; padding: 0 16px !important; font-size: 7.5px !important; } } /* ============================================================ 32. SMALL MOBILE ============================================================= */ @media (max-width:390px){ .lalag-routes2-container{ padding: 0 16px !important; } .elementor .lalag-routes2 .lalag-routes2-title{ font-size: 30px !important; letter-spacing: -1.4px !important; } .lalag-route2-card{ padding: 21px 18px !important; } .lalag-route2-footer{ left: 18px !important; right: 18px !important; } } /* ============================================================ 33. SVG ELEMENTOR PROTECTION ============================================================= */ .elementor .lalag-routes2 svg{ vertical-align: middle !important; } .elementor .lalag-routes2 svg:not(:root){ overflow: visible !important; } /* ============================================================ 34. PREVENT THEME FROM APPLYING HEADING COLORS ============================================================= */ .elementor-widget-html .lalag-routes2 h2{ color:#090909 !important; } .elementor-widget-html .lalag-routes2 h3{ color:#111111 !important; } .elementor-widget-html .lalag-routes2 p{ color:#716D66 !important; } /* ============================================================ 35. REDUCED MOTION ============================================================= */ @media (prefers-reduced-motion:reduce){ .lalag-routes2-header, .lalag-network-bar, .lalag-route2-card, .lalag-routes2-bottom{ opacity:1 !important; transform:none !important; animation:none !important; } .lalag-routes2-title-gold, .lalag-routes2-label-line:after, .lalag-network-track:after{ animation:none !important; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-8e5cd4e *//* ============================================================ LALA G GROUP RESERVATION SECTION — FINAL STYLE LOCK ELEMENTOR / WORDPRESS SAFE DARK LUXURY VERSION ============================================================= */ /* ============================================================ LOAD REQUIRED FONTS + ICONS ============================================================= */ @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&display=swap'); @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css'); /* ============================================================ ROOT / RESET ============================================================= */ .lalag-reservation, .lalag-reservation *{ box-sizing:border-box !important; } .lalag-reservation{ --lala-black:#050505; --lala-black-2:#090909; --lala-black-3:#11100D; --lala-gold:#C89A3A; --lala-gold-rich:#D8B45B; --lala-gold-light:#F2D784; --lala-gold-dark:#8A621E; --lala-white:#FFFFFF; --lala-muted:rgba(255,255,255,.58); --lala-border: rgba(216,180,91,.18); position:relative !important; width:100% !important; max-width:100% !important; margin:0 !important; padding:120px 0 105px !important; overflow:hidden !important; color:#FFFFFF !important; background: radial-gradient( circle at 82% 15%, rgba(216,180,91,.13), transparent 25% ), radial-gradient( circle at 10% 88%, rgba(200,154,58,.08), transparent 28% ), linear-gradient( 135deg, #050505 0%, #080807 48%, #0E0D0A 100% ) !important; font-family: "Montserrat", Arial, sans-serif !important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ============================================================ FONT LOCK DO NOT INCLUDE HERE — ICONS NEED FONT AWESOME ============================================================= */ .lalag-reservation h1, .lalag-reservation h2, .lalag-reservation h3, .lalag-reservation h4, .lalag-reservation h5, .lalag-reservation h6, .lalag-reservation p, .lalag-reservation span, .lalag-reservation strong, .lalag-reservation label, .lalag-reservation div, .lalag-reservation a, .lalag-reservation button, .lalag-reservation input, .lalag-reservation select, .lalag-reservation textarea{ font-family: "Montserrat", Arial, sans-serif !important; } /* ============================================================ FONT AWESOME LOCK VERY IMPORTANT FOR ELEMENTOR ============================================================= */ .lalag-reservation .fa, .lalag-reservation .fas, .lalag-reservation .fa-solid{ font-family: "Font Awesome 6 Free" !important; font-weight:900 !important; font-style:normal !important; font-variant:normal !important; text-rendering:auto !important; line-height:1 !important; } .lalag-reservation .far, .lalag-reservation .fa-regular{ font-family: "Font Awesome 6 Free" !important; font-weight:400 !important; font-style:normal !important; font-variant:normal !important; text-rendering:auto !important; line-height:1 !important; } .lalag-reservation .fab, .lalag-reservation .fa-brands{ font-family: "Font Awesome 6 Brands" !important; font-weight:400 !important; font-style:normal !important; font-variant:normal !important; text-rendering:auto !important; line-height:1 !important; } .lalag-reservation i{ display:inline-block !important; visibility:visible !important; opacity:1 !important; } /* ============================================================ LINKS ============================================================= */ .lalag-reservation a{ color:inherit !important; text-decoration:none !important; } /* ============================================================ BACKGROUND GRID ============================================================= */ .lalag-reservation-grid-bg{ position:absolute !important; z-index:0 !important; inset:0 !important; width:100% !important; height:100% !important; opacity:.18 !important; pointer-events:none !important; background-image: linear-gradient( rgba(255,255,255,.035) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255,255,255,.035) 1px, transparent 1px ) !important; background-size: 70px 70px !important; } /* ============================================================ ORBIT ============================================================= */ .lalag-reservation-orbit{ position:absolute !important; z-index:1 !important; width:620px !important; height:620px !important; right:-380px !important; top:80px !important; border-radius:50% !important; border: 1px solid rgba(216,180,91,.11) !important; pointer-events:none !important; animation: lalaReservationOrbit 28s linear infinite !important; } .lalag-reservation-orbit:before{ content:"" !important; position:absolute !important; inset:85px !important; border-radius:50% !important; border: 1px solid rgba(216,180,91,.07) !important; } .lalag-reservation-orbit:after{ content:"" !important; position:absolute !important; inset:185px !important; border-radius:50% !important; background: radial-gradient( circle, rgba(216,180,91,.06), transparent 65% ) !important; } @keyframes lalaReservationOrbit{ to{ transform:rotate(360deg); } } /* ============================================================ MAIN CONTAINER ============================================================= */ .lalag-reservation-container{ position:relative !important; z-index:5 !important; width:min(1240px,92%) !important; max-width:1240px !important; margin: 0 auto !important; padding:0 !important; } /* ============================================================ HEADER ============================================================= */ .lalag-reservation-header{ display:grid !important; grid-template-columns: minmax(0,1.1fr) minmax(300px,.75fr) !important; align-items:end !important; gap:70px !important; width:100% !important; margin: 0 0 55px !important; padding:0 !important; } /* ============================================================ SMALL HEADER LABEL ============================================================= */ .lalag-reservation-label{ display:flex !important; align-items:center !important; gap:11px !important; width:max-content !important; max-width:100% !important; margin: 0 0 18px !important; padding:0 !important; color: #F2D784 !important; font-size: 8px !important; font-weight: 800 !important; line-height: 1.3 !important; letter-spacing: 2.3px !important; text-transform: uppercase !important; } .lalag-reservation-label-line{ position:relative !important; display:block !important; flex: 0 0 38px !important; width:38px !important; height:1px !important; overflow:hidden !important; background: rgba(216,180,91,.25) !important; } .lalag-reservation-label-line:after{ content:"" !important; position:absolute !important; top:0 !important; left:-100% !important; width:75% !important; height:1px !important; background: linear-gradient( 90deg, transparent, #F2D784, transparent ) !important; animation: lalaReservationLine 2.6s ease-in-out infinite !important; } @keyframes lalaReservationLine{ 0%{ left:-100%; } 65%, 100%{ left:120%; } } /* ============================================================ MAIN TITLE ============================================================= */ .lalag-reservation .lalag-reservation-title{ display:block !important; width:100% !important; max-width:760px !important; margin:0 !important; padding:0 !important; color:#FFFFFF !important; font-family: "Montserrat", Arial, sans-serif !important; font-size: clamp( 43px, 5vw, 74px ) !important; font-weight: 800 !important; line-height: .98 !important; letter-spacing: -3.5px !important; text-align:left !important; text-transform: uppercase !important; } .lalag-reservation-title-white{ display:block !important; margin:0 !important; padding:0 !important; color:#FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; } /* ============================================================ GOLD ANIMATED TITLE ============================================================= */ .lalag-reservation .lalag-reservation-title-gold{ display:block !important; margin: 8px 0 0 !important; padding:0 !important; color: transparent !important; background: linear-gradient( 100deg, #805719 0%, #D2A746 22%, #F7DE8F 42%, #FFF2B8 50%, #C89A3A 68%, #D8B45B 82%, #805719 100% ) !important; background-size: 230% auto !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; animation: lalaReservationGold 6s linear infinite !important; } @keyframes lalaReservationGold{ to{ background-position: 230% center; } } /* ============================================================ HEADER DESCRIPTION ============================================================= */ .lalag-reservation .lalag-reservation-intro{ width:100% !important; max-width:480px !important; margin: 0 0 5px auto !important; padding:0 !important; color: rgba(255,255,255,.58) !important; font-size: 12px !important; font-weight: 400 !important; line-height: 1.9 !important; letter-spacing: 0 !important; text-align:left !important; } .lalag-reservation .lalag-reservation-intro strong{ color:#FFFFFF !important; font-size:inherit !important; font-weight: 700 !important; line-height: inherit !important; } /* ============================================================ MAIN BOOKING LAYOUT ============================================================= */ .lalag-booking-layout{ position:relative !important; display:grid !important; grid-template-columns: minmax(300px,.72fr) minmax(0,1.28fr) !important; align-items:stretch !important; width:100% !important; min-height: 670px !important; margin:0 !important; padding:0 !important; overflow:hidden !important; border: 1px solid rgba(216,180,91,.18) !important; border-radius: 0 !important; background: #070707 !important; box-shadow: 0 35px 100px rgba(0,0,0,.40) !important; } /* ============================================================ LEFT BOOKING SIDE ============================================================= */ .lalag-booking-info{ position:relative !important; display:block !important; min-width:0 !important; margin:0 !important; padding: 45px 39px !important; overflow:hidden !important; color:#FFFFFF !important; background: linear-gradient( 150deg, rgba(216,180,91,.10), rgba(255,255,255,.025) 55%, rgba(255,255,255,.01) ) !important; border-right: 1px solid rgba(216,180,91,.15) !important; } .lalag-booking-info:before{ content:"" !important; position:absolute !important; z-index:0 !important; width:350px !important; height:350px !important; left:-190px !important; bottom:-190px !important; border-radius:50% !important; background: rgba(216,180,91,.10) !important; filter: blur(70px) !important; pointer-events:none !important; } /* ============================================================ LEFT SMALL LABEL ============================================================= */ .lalag-booking-mini-label{ position:relative !important; z-index:2 !important; display:block !important; margin:0 !important; color: #D8B45B !important; font-size: 7px !important; font-weight: 800 !important; line-height: 1.3 !important; letter-spacing: 2px !important; text-transform: uppercase !important; } /* ============================================================ LEFT TITLE ============================================================= */ .lalag-reservation .lalag-booking-info-title{ position:relative !important; z-index:2 !important; display:block !important; max-width:350px !important; margin: 14px 0 16px !important; padding:0 !important; color: #FFFFFF !important; font-size: clamp( 25px, 2.6vw, 37px ) !important; font-weight: 700 !important; line-height: 1.18 !important; letter-spacing: -1.3px !important; text-transform:none !important; } /* ============================================================ LEFT DESCRIPTION ============================================================= */ .lalag-booking-info-text{ position:relative !important; z-index:2 !important; display:block !important; max-width:360px !important; margin:0 !important; padding:0 !important; color: rgba(255,255,255,.55) !important; font-size: 10px !important; font-weight: 400 !important; line-height: 1.85 !important; letter-spacing:0 !important; } /* ============================================================ BOOKING STEPS ============================================================= */ .lalag-booking-steps{ position:relative !important; z-index:3 !important; display:block !important; width:100% !important; margin: 39px 0 0 !important; padding:0 !important; } .lalag-booking-step{ position:relative !important; display:flex !important; align-items:flex-start !important; gap:16px !important; width:100% !important; margin:0 !important; padding: 0 0 27px !important; } .lalag-booking-step:last-child{ padding-bottom: 0 !important; } .lalag-booking-step:not(:last-child):before{ content:"" !important; position:absolute !important; left:18px !important; top:37px !important; bottom:0 !important; width:1px !important; background: rgba(216,180,91,.18) !important; } /* ============================================================ STEP NUMBER ============================================================= */ .lalag-booking-step-number{ position:relative !important; z-index:3 !important; flex: 0 0 37px !important; width:37px !important; height:37px !important; display:flex !important; align-items:center !important; justify-content:center !important; margin:0 !important; padding:0 !important; border-radius: 50% !important; color: #080704 !important; background: linear-gradient( 135deg, #8A621E, #D8B45B, #F2D784 ) !important; box-shadow: 0 7px 22px rgba(200,154,58,.18) !important; font-size: 8px !important; font-weight: 900 !important; line-height: 1 !important; letter-spacing: 0 !important; } /* ============================================================ STEP COPY ============================================================= */ .lalag-booking-step-copy{ display:block !important; flex:1 !important; min-width:0 !important; margin:0 !important; padding: 3px 0 0 !important; } .lalag-booking-step-copy strong{ display:block !important; margin:0 !important; color: #FFFFFF !important; font-size: 10px !important; font-weight: 700 !important; line-height: 1.35 !important; letter-spacing: 0 !important; } .lalag-booking-step-copy span{ display:block !important; margin: 5px 0 0 !important; color: rgba(255,255,255,.42) !important; font-size: 7.5px !important; font-weight: 400 !important; line-height: 1.55 !important; letter-spacing: 0 !important; } /* ============================================================ ROUTE PREVIEW ============================================================= */ .lalag-booking-route-preview{ position:relative !important; z-index:3 !important; display:block !important; width:100% !important; margin: 24px 0 0 !important; padding: 20px !important; border: 1px solid rgba(216,180,91,.16) !important; background: rgba(0,0,0,.22) !important; } .lalag-booking-preview-top{ display:flex !important; align-items:center !important; justify-content: space-between !important; gap:15px !important; width:100% !important; margin: 0 0 17px !important; padding:0 !important; } .lalag-booking-preview-top span{ display:inline-flex !important; margin:0 !important; color: rgba(255,255,255,.4) !important; font-size: 6.5px !important; font-weight: 800 !important; line-height: 1.2 !important; letter-spacing: 1.4px !important; text-transform: uppercase !important; } .lalag-booking-live{ align-items:center !important; gap:6px !important; color: #F2D784 !important; } .lalag-booking-live i{ color: #F2D784 !important; font-size: 6px !important; animation: lalaLivePulse 1.7s ease-in-out infinite !important; } @keyframes lalaLivePulse{ 50%{ opacity:.35; } } /* ============================================================ SHARJAH → DUBAI ROUTE ============================================================= */ .lalag-booking-preview-route{ display:flex !important; align-items:center !important; gap:12px !important; width:100% !important; margin:0 !important; padding:0 !important; } .lalag-preview-city{ display:block !important; flex:0 0 auto !important; margin:0 !important; color: #FFFFFF !important; font-size: 10px !important; font-weight: 800 !important; line-height: 1.2 !important; letter-spacing: 0 !important; white-space: nowrap !important; } .lalag-preview-city:last-child{ color: #F2D784 !important; } .lalag-preview-line{ position:relative !important; display:block !important; flex:1 !important; min-width:20px !important; height:1px !important; margin:0 !important; overflow:hidden !important; background: rgba(255,255,255,.12) !important; } .lalag-preview-line:after{ content:"" !important; position:absolute !important; top:0 !important; left:-60px !important; width:50px !important; height:1px !important; background: linear-gradient( 90deg, transparent, #F2D784, transparent ) !important; animation: lalaPreviewRoute 2.2s linear infinite !important; } @keyframes lalaPreviewRoute{ to{ left:115%; } } /* ============================================================ RIGHT FORM PANEL ============================================================= */ .lalag-booking-form-wrap{ position:relative !important; display:block !important; min-width:0 !important; margin:0 !important; padding: 43px 45px 42px !important; color: #FFFFFF !important; background: rgba(7,7,7,.94) !important; backdrop-filter: blur(18px) !important; -webkit-backdrop-filter: blur(18px) !important; } /* ============================================================ FORM HEADER ============================================================= */ .lalag-form-heading{ display:block !important; width:100% !important; margin: 0 0 30px !important; padding:0 !important; } .lalag-form-heading > span{ display:block !important; margin: 0 0 7px !important; color: #D8B45B !important; font-size: 7px !important; font-weight: 800 !important; line-height: 1.2 !important; letter-spacing: 1.8px !important; text-transform: uppercase !important; } .lalag-form-heading > strong{ display:block !important; margin:0 !important; color: #FFFFFF !important; font-size: 23px !important; font-weight: 700 !important; line-height: 1.25 !important; letter-spacing: -.7px !important; } /* ============================================================ FORM ============================================================= */ #lalagReservationForm{ display:block !important; width:100% !important; margin:0 !important; padding:0 !important; } .lalag-form-grid{ display:grid !important; grid-template-columns: repeat( 2, minmax(0,1fr) ) !important; gap: 18px 15px !important; width:100% !important; margin:0 !important; padding:0 !important; } .lalag-form-group{ position:relative !important; display:block !important; min-width:0 !important; width:100% !important; margin:0 !important; padding:0 !important; } .lalag-form-group.full{ grid-column: 1 / -1 !important; } /* ============================================================ LABELS ============================================================= */ .lalag-reservation .lalag-form-label{ display:block !important; width:100% !important; margin: 0 0 8px !important; padding:0 !important; color: rgba(255,255,255,.45) !important; font-size: 6.5px !important; font-weight: 800 !important; line-height: 1.3 !important; letter-spacing: 1px !important; text-transform: uppercase !important; } /* ============================================================ FORM INPUT RESET ============================================================= */ .lalag-reservation .lalag-form-input, .lalag-reservation .lalag-form-select, .lalag-reservation .lalag-form-textarea{ display:block !important; width:100% !important; max-width:100% !important; margin:0 !important; border: 1px solid rgba(255,255,255,.11) !important; border-radius: 0 !important; outline: none !important; color: #FFFFFF !important; background-color: rgba(255,255,255,.035) !important; box-shadow: none !important; font-family: "Montserrat", Arial, sans-serif !important; font-size: 10px !important; font-weight: 500 !important; line-height: 1.4 !important; letter-spacing: 0 !important; text-transform: none !important; transition: border-color .3s ease, background .3s ease, box-shadow .3s ease !important; } /* ============================================================ NORMAL INPUT / SELECT ============================================================= */ .lalag-reservation .lalag-form-input, .lalag-reservation .lalag-form-select{ height: 53px !important; min-height: 53px !important; padding: 0 15px !important; } /* ============================================================ TEXTAREA ============================================================= */ .lalag-reservation .lalag-form-textarea{ min-height: 105px !important; padding: 15px !important; resize: vertical !important; } /* ============================================================ PLACEHOLDERS ============================================================= */ .lalag-reservation .lalag-form-input::placeholder, .lalag-reservation .lalag-form-textarea::placeholder{ color: rgba(255,255,255,.27) !important; opacity:1 !important; font-size: 10px !important; font-weight: 500 !important; } /* ============================================================ FOCUS ============================================================= */ .lalag-reservation .lalag-form-input:focus, .lalag-reservation .lalag-form-select:focus, .lalag-reservation .lalag-form-textarea:focus{ border-color: rgba(242,215,132,.55) !important; background-color: rgba(216,180,91,.05) !important; box-shadow: 0 0 0 3px rgba(200,154,58,.05) !important; } /* ============================================================ SELECT ============================================================= */ .lalag-reservation .lalag-form-select{ appearance: none !important; -webkit-appearance: none !important; cursor: pointer !important; padding-right: 38px !important; background-image: linear-gradient( 45deg, transparent 50%, #D8B45B 50% ), linear-gradient( 135deg, #D8B45B 50%, transparent 50% ) !important; background-position: calc(100% - 18px) 23px, calc(100% - 13px) 23px !important; background-size: 5px 5px, 5px 5px !important; background-repeat: no-repeat !important; } .lalag-form-select option{ color: #FFFFFF !important; background: #111111 !important; font-family: "Montserrat", Arial, sans-serif !important; font-size: 10px !important; } /* ============================================================ INPUT WITH ICON ============================================================= */ .lalag-input-holder{ position:relative !important; display:block !important; width:100% !important; margin:0 !important; padding:0 !important; } .lalag-input-holder > i{ position:absolute !important; z-index:4 !important; left:15px !important; top:50% !important; transform: translateY(-50%) !important; margin:0 !important; color: #D8B45B !important; font-size: 10px !important; pointer-events: none !important; } .lalag-input-holder .lalag-form-input{ padding-left: 40px !important; } /* ============================================================ DATE INPUT ============================================================= */ .lalag-reservation input[type="date"]{ color-scheme: dark !important; } .lalag-reservation input[type="date"]::-webkit-calendar-picker-indicator{ cursor:pointer !important; opacity:.75 !important; filter: invert(79%) sepia(43%) saturate(546%) hue-rotate(359deg) brightness(103%) !important; } /* ============================================================ TIME BUTTON GRID ============================================================= */ .lalag-time-options{ display:grid !important; grid-template-columns: repeat(3,1fr) !important; gap:6px !important; width:100% !important; margin: 8px 0 0 !important; padding:0 !important; } /* ============================================================ TIME BUTTON ============================================================= */ .lalag-reservation .lalag-time-option{ display:flex !important; align-items:center !important; justify-content:center !important; width:100% !important; min-height: 33px !important; margin:0 !important; padding: 0 8px !important; border: 1px solid rgba(255,255,255,.10) !important; border-radius: 0 !important; outline: none !important; color: rgba(255,255,255,.50) !important; background: rgba(255,255,255,.025) !important; box-shadow: none !important; font-family: "Montserrat", Arial, sans-serif !important; font-size: 6.5px !important; font-weight: 700 !important; line-height: 1 !important; letter-spacing: 0 !important; text-transform: none !important; cursor: pointer !important; transition: .3s ease !important; } .lalag-reservation .lalag-time-option:hover, .lalag-reservation .lalag-time-option.active{ color: #090704 !important; border-color: #D8B45B !important; background: linear-gradient( 115deg, #8A621E, #D8B45B, #F2D784 ) !important; box-shadow: 0 7px 20px rgba(200,154,58,.13) !important; } /* ============================================================ FORM FOOTER ============================================================= */ .lalag-form-footer{ display:block !important; width:100% !important; margin: 25px 0 0 !important; padding: 22px 0 0 !important; border-top: 1px solid rgba(255,255,255,.08) !important; } /* ============================================================ FORM NOTE ============================================================= */ .lalag-form-note{ display:flex !important; align-items:flex-start !important; gap:8px !important; width:100% !important; margin: 0 0 16px !important; padding:0 !important; color: rgba(255,255,255,.38) !important; font-size: 7px !important; font-weight: 400 !important; line-height: 1.55 !important; } .lalag-form-note i{ flex:0 0 auto !important; margin: 2px 0 0 !important; color: #D8B45B !important; font-size: 9px !important; } .lalag-form-note span{ color: rgba(255,255,255,.38) !important; font-size: 7px !important; font-weight: 400 !important; line-height: 1.55 !important; } /* ============================================================ SUBMIT BUTTON ============================================================= */ .lalag-reservation .lalag-submit-btn{ position:relative !important; display:flex !important; align-items:center !important; justify-content:center !important; gap:11px !important; width:100% !important; min-height: 59px !important; margin:0 !important; padding: 0 20px !important; overflow:hidden !important; border: 0 !important; border-radius: 0 !important; outline: 0 !important; color: #090704 !important; background: linear-gradient( 115deg, #89631E, #C59434 20%, #F1D782 48%, #C89A3A 73%, #825F1D ) !important; box-shadow: 0 17px 40px rgba(200,154,58,.20) !important; font-family: "Montserrat", Arial, sans-serif !important; font-size: 9px !important; font-weight: 800 !important; line-height: 1 !important; letter-spacing: 1px !important; text-align:center !important; text-transform: uppercase !important; cursor: pointer !important; -webkit-tap-highlight-color: transparent !important; transition: transform .35s ease, box-shadow .35s ease !important; } /* ============================================================ BUTTON SHINE ============================================================= */ .lalag-reservation .lalag-submit-btn:before{ content:"" !important; position:absolute !important; z-index:1 !important; top:-80% !important; left:-45% !important; width:28% !important; height:270% !important; transform: rotate(20deg) !important; background: linear-gradient( 90deg, transparent, rgba(255,255,255,.58), transparent ) !important; animation: lalaSubmitShine 4.4s ease-in-out infinite !important; pointer-events:none !important; } @keyframes lalaSubmitShine{ 0%, 55%{ left:-45%; } 90%, 100%{ left:125%; } } .lalag-reservation .lalag-submit-btn:hover{ transform: translateY(-4px) !important; box-shadow: 0 23px 55px rgba(200,154,58,.32) !important; } .lalag-submit-btn > i{ position:relative !important; z-index:3 !important; display:inline-block !important; color: #090704 !important; font-size: 18px !important; line-height: 1 !important; } .lalag-submit-btn > span{ position:relative !important; z-index:3 !important; display:inline-block !important; color: #090704 !important; font-size: 9px !important; font-weight: 800 !important; line-height: 1 !important; letter-spacing: 1px !important; } /* ============================================================ WHATSAPP ICON — EXACT ICON REQUESTED ============================================================= */ .lalag-reservation .fa-brands.fa-whatsapp{ font-family: "Font Awesome 6 Brands" !important; font-weight: 400 !important; font-style: normal !important; display: inline-block !important; visibility: visible !important; } /* ============================================================ TRUST BAR ============================================================= */ .lalag-booking-trust{ display:grid !important; grid-template-columns: repeat(4,1fr) !important; width:100% !important; margin: 19px 0 0 !important; padding:0 !important; overflow:hidden !important; border: 1px solid rgba(216,180,91,.12) !important; background: rgba(255,255,255,.02) !important; } .lalag-trust-item{ display:flex !important; align-items:center !important; justify-content:center !important; gap:9px !important; min-width:0 !important; min-height: 65px !important; margin:0 !important; padding: 10px 12px !important; color: rgba(255,255,255,.50) !important; font-size: 7px !important; font-weight: 700 !important; line-height: 1.3 !important; letter-spacing: .55px !important; text-align:center !important; text-transform: uppercase !important; } .lalag-trust-item:not(:last-child){ border-right: 1px solid rgba(255,255,255,.07) !important; } .lalag-trust-item i{ flex:0 0 auto !important; color: #F2D784 !important; font-size: 11px !important; line-height: 1 !important; } /* ============================================================ LOAD ANIMATION ============================================================= */ .lalag-reservation-header, .lalag-booking-layout, .lalag-booking-trust{ opacity:0; transform: translateY(30px); animation: lalaReservationReveal .85s cubic-bezier(.2,.7,.2,1) forwards; } .lalag-reservation-header{ animation-delay:.05s; } .lalag-booking-layout{ animation-delay:.18s; } .lalag-booking-trust{ animation-delay:.28s; } @keyframes lalaReservationReveal{ to{ opacity:1; transform: translateY(0); } } /* ============================================================ LARGE LAPTOP ============================================================= */ @media(max-width:1180px){ .lalag-reservation{ padding: 100px 0 85px !important; } .lalag-reservation-container{ width: calc(100% - 50px) !important; } .lalag-reservation-header{ gap: 45px !important; } .lalag-reservation-title{ font-size: clamp( 42px, 5.5vw, 65px ) !important; } .lalag-booking-info{ padding: 40px 30px !important; } .lalag-booking-form-wrap{ padding: 40px 34px !important; } } /* ============================================================ TABLET ============================================================= */ @media(max-width:900px){ .lalag-reservation{ padding: 85px 0 70px !important; } .lalag-reservation-header{ grid-template-columns: 1fr !important; gap: 25px !important; align-items:start !important; } .lalag-reservation-intro{ max-width: 720px !important; margin: 0 !important; } .lalag-booking-layout{ grid-template-columns: 1fr !important; min-height: auto !important; } .lalag-booking-info{ padding: 38px 32px !important; border-right: 0 !important; border-bottom: 1px solid rgba(216,180,91,.15) !important; } .lalag-booking-info-text{ max-width: 600px !important; } .lalag-booking-steps{ display:grid !important; grid-template-columns: repeat(3,1fr) !important; gap: 15px !important; } .lalag-booking-step{ padding: 0 !important; } .lalag-booking-step:not(:last-child):before{ display: none !important; } .lalag-booking-form-wrap{ padding: 38px 32px !important; } } /* ============================================================ MOBILE ============================================================= */ @media(max-width:680px){ .lalag-reservation{ padding: 67px 0 55px !important; } .lalag-reservation-container{ width: 100% !important; max-width: 100% !important; padding: 0 18px !important; } .lalag-reservation-header{ gap: 19px !important; margin-bottom: 35px !important; } .lalag-reservation-label{ margin-bottom: 14px !important; font-size: 6.5px !important; letter-spacing: 1.5px !important; } .lalag-reservation-label-line{ flex-basis: 27px !important; width: 27px !important; } .lalag-reservation .lalag-reservation-title{ max-width: 100% !important; font-size: clamp( 34px, 10vw, 46px ) !important; line-height: 1 !important; letter-spacing: -1.8px !important; } .lalag-reservation-title-gold{ margin-top: 6px !important; } .lalag-reservation .lalag-reservation-intro{ max-width: 100% !important; font-size: 10px !important; line-height: 1.8 !important; } .lalag-booking-layout{ border-color: rgba(216,180,91,.20) !important; } /* LEFT */ .lalag-booking-info{ padding: 30px 22px !important; } .lalag-booking-mini-label{ font-size: 6.5px !important; } .lalag-reservation .lalag-booking-info-title{ max-width: 100% !important; margin: 12px 0 14px !important; font-size: 25px !important; line-height: 1.2 !important; letter-spacing: -.9px !important; } .lalag-booking-info-text{ max-width: 100% !important; font-size: 9px !important; line-height: 1.8 !important; } .lalag-booking-steps{ display:block !important; margin-top: 28px !important; } .lalag-booking-step{ display:flex !important; padding-bottom: 23px !important; } .lalag-booking-step:not(:last-child):before{ display:block !important; } .lalag-booking-step-number{ width: 35px !important; height: 35px !important; flex-basis: 35px !important; } .lalag-booking-step-copy strong{ font-size: 9.5px !important; } .lalag-booking-step-copy span{ font-size: 7px !important; } .lalag-booking-route-preview{ margin-top: 10px !important; padding: 17px !important; } .lalag-preview-city{ font-size: 8px !important; } /* FORM */ .lalag-booking-form-wrap{ padding: 29px 21px 30px !important; } .lalag-form-heading{ margin-bottom: 25px !important; } .lalag-form-heading > span{ font-size: 6.5px !important; } .lalag-form-heading > strong{ font-size: 20px !important; line-height: 1.3 !important; } .lalag-form-grid{ grid-template-columns: 1fr !important; gap: 16px !important; } .lalag-form-group.full{ grid-column: auto !important; } .lalag-reservation .lalag-form-label{ font-size: 6.3px !important; } .lalag-reservation .lalag-form-input, .lalag-reservation .lalag-form-select{ height: 52px !important; min-height: 52px !important; font-size: 9px !important; } .lalag-reservation .lalag-form-input::placeholder, .lalag-reservation .lalag-form-textarea::placeholder{ font-size: 9px !important; } .lalag-reservation .lalag-form-textarea{ min-height: 100px !important; font-size: 9px !important; } .lalag-time-options{ grid-template-columns: repeat(3,1fr) !important; } .lalag-reservation .lalag-time-option{ min-height: 36px !important; font-size: 6.5px !important; } .lalag-reservation .lalag-submit-btn{ min-height: 56px !important; font-size: 8px !important; } .lalag-submit-btn > span{ font-size: 8px !important; } .lalag-submit-btn > i{ font-size: 17px !important; } /* TRUST BAR */ .lalag-booking-trust{ grid-template-columns: repeat(2,1fr) !important; } .lalag-trust-item{ min-height: 57px !important; padding: 9px !important; font-size: 5.8px !important; } .lalag-trust-item:nth-child(2){ border-right: 0 !important; } .lalag-trust-item:nth-child(1), .lalag-trust-item:nth-child(2){ border-bottom: 1px solid rgba(255,255,255,.07) !important; } } /* ============================================================ SMALL MOBILE ============================================================= */ @media(max-width:390px){ .lalag-reservation-container{ padding: 0 15px !important; } .lalag-reservation .lalag-reservation-title{ font-size: 32px !important; letter-spacing: -1.4px !important; } .lalag-booking-info{ padding: 27px 18px !important; } .lalag-booking-form-wrap{ padding: 27px 17px !important; } .lalag-time-options{ gap: 5px !important; } .lalag-reservation .lalag-time-option{ min-height: 35px !important; padding: 0 4px !important; font-size: 6px !important; } .lalag-booking-preview-route{ gap: 8px !important; } .lalag-preview-city{ font-size: 7px !important; } .lalag-form-note, .lalag-form-note span{ font-size: 6.5px !important; } } /* ============================================================ TOUCH DEVICE ============================================================= */ @media(hover:none){ .lalag-submit-btn:hover{ transform: none !important; } } /* ============================================================ REDUCED MOTION ============================================================= */ @media(prefers-reduced-motion:reduce){ .lalag-reservation *, .lalag-reservation *:before, .lalag-reservation *:after{ animation: none !important; transition: none !important; } .lalag-reservation-header, .lalag-booking-layout, .lalag-booking-trust{ opacity: 1 !important; transform: none !important; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-0459fc6 *//* ============================================================ LALA G GROUP PICKUP AREAS & DAILY TIMINGS FULL CSS LOCK ELEMENTOR / WORDPRESS SAFE ============================================================= */ @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&display=swap'); @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css'); /* ============================================================ RESET + VARIABLES ============================================================= */ .lalag-timing, .lalag-timing *{ box-sizing:border-box !important; } .lalag-timing{ --lg-black:#050505; --lg-black-soft:#090908; --lg-dark:#11100D; --lg-gold:#C89A3A; --lg-gold-dark:#8A621E; --lg-gold-rich:#D8B45B; --lg-gold-light:#F2D784; --lg-white:#FFFFFF; --lg-muted:rgba(255,255,255,.55); --lg-border:rgba(216,180,91,.17); position:relative !important; width:100% !important; max-width:100% !important; margin:0 !important; padding:120px 0 105px !important; overflow:hidden !important; color:#FFFFFF !important; background: radial-gradient( circle at 88% 10%, rgba(216,180,91,.14), transparent 24% ), radial-gradient( circle at 5% 90%, rgba(200,154,58,.08), transparent 27% ), linear-gradient( 135deg, #050505 0%, #080807 52%, #0D0C09 100% ) !important; font-family: "Montserrat", Arial, sans-serif !important; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } /* ============================================================ MONTSERRAT LOCK ============================================================= */ .lalag-timing h1, .lalag-timing h2, .lalag-timing h3, .lalag-timing h4, .lalag-timing h5, .lalag-timing h6, .lalag-timing p, .lalag-timing span, .lalag-timing strong, .lalag-timing small, .lalag-timing div, .lalag-timing a, .lalag-timing button{ font-family: "Montserrat", Arial, sans-serif !important; } /* ============================================================ FONT AWESOME LOCK ============================================================= */ .lalag-timing .fa, .lalag-timing .fas, .lalag-timing .fa-solid{ font-family:"Font Awesome 6 Free" !important; font-weight:900 !important; font-style:normal !important; line-height:1 !important; } .lalag-timing .far, .lalag-timing .fa-regular{ font-family:"Font Awesome 6 Free" !important; font-weight:400 !important; font-style:normal !important; line-height:1 !important; } .lalag-timing .fab, .lalag-timing .fa-brands{ font-family:"Font Awesome 6 Brands" !important; font-weight:400 !important; font-style:normal !important; line-height:1 !important; } .lalag-timing i{ display:inline-block !important; visibility:visible !important; opacity:1 !important; } .lalag-timing a{ text-decoration:none !important; } /* ============================================================ GRID BACKGROUND ============================================================= */ .lalag-timing-grid-bg{ position:absolute !important; z-index:0 !important; inset:0 !important; width:100% !important; height:100% !important; pointer-events:none !important; opacity:.20 !important; background-image: linear-gradient( rgba(255,255,255,.025) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255,255,255,.025) 1px, transparent 1px ) !important; background-size:70px 70px !important; } /* ============================================================ ORBIT ============================================================= */ .lalag-timing-orbit{ position:absolute !important; z-index:1 !important; width:630px !important; height:630px !important; left:-420px !important; top:120px !important; border-radius:50% !important; border: 1px solid rgba(216,180,91,.10) !important; pointer-events:none !important; animation: lalaTimingOrbit 30s linear infinite !important; } .lalag-timing-orbit:before{ content:"" !important; position:absolute !important; inset:90px !important; border-radius:50% !important; border: 1px solid rgba(216,180,91,.07) !important; } .lalag-timing-orbit:after{ content:"" !important; position:absolute !important; inset:185px !important; border-radius:50% !important; border: 1px solid rgba(216,180,91,.045) !important; } @keyframes lalaTimingOrbit{ to{ transform:rotate(360deg); } } /* ============================================================ CONTAINER ============================================================= */ .lalag-timing-container{ position:relative !important; z-index:5 !important; width:min(1240px,92%) !important; max-width:1240px !important; margin:0 auto !important; padding:0 !important; } /* ============================================================ HEADER ============================================================= */ .lalag-timing-header{ display:grid !important; grid-template-columns: minmax(0,1.08fr) minmax(300px,.72fr) !important; align-items:end !important; gap:70px !important; width:100% !important; margin:0 0 58px !important; padding:0 !important; } /* ============================================================ LABEL ============================================================= */ .lalag-timing-label{ display:flex !important; align-items:center !important; gap:11px !important; width:max-content !important; max-width:100% !important; margin:0 0 18px !important; padding:0 !important; color:#F2D784 !important; font-size:8px !important; font-weight:800 !important; line-height:1.3 !important; letter-spacing:2.2px !important; text-transform:uppercase !important; } .lalag-timing-label-line{ position:relative !important; display:block !important; width:39px !important; height:1px !important; flex:0 0 39px !important; overflow:hidden !important; background: rgba(216,180,91,.28) !important; } .lalag-timing-label-line:after{ content:"" !important; position:absolute !important; top:0 !important; left:-100% !important; width:70% !important; height:100% !important; background: linear-gradient( 90deg, transparent, #F2D784, transparent ) !important; animation: lalaTimingLine 2.6s ease-in-out infinite !important; } @keyframes lalaTimingLine{ 0%{ left:-100%; } 65%, 100%{ left:120%; } } /* ============================================================ TITLE ============================================================= */ .lalag-timing .lalag-timing-title{ display:block !important; width:100% !important; max-width:760px !important; margin:0 !important; padding:0 !important; color:#FFFFFF !important; font-size: clamp(42px,4.9vw,72px) !important; font-weight:800 !important; line-height:.98 !important; letter-spacing:-3.4px !important; text-align:left !important; text-transform:uppercase !important; } .lalag-timing-title-gold{ display:block !important; margin:8px 0 0 !important; padding:0 !important; color:transparent !important; background: linear-gradient( 100deg, #805719 0%, #D2A746 22%, #F7DE8F 42%, #FFF2B8 50%, #C89A3A 68%, #D8B45B 82%, #805719 100% ) !important; background-size:230% auto !important; -webkit-background-clip:text !important; background-clip:text !important; -webkit-text-fill-color:transparent !important; animation: lalaTimingGold 6s linear infinite !important; } @keyframes lalaTimingGold{ to{ background-position:230% center; } } /* ============================================================ INTRO ============================================================= */ .lalag-timing .lalag-timing-intro{ width:100% !important; max-width:500px !important; margin:0 0 5px auto !important; padding:0 !important; color: rgba(255,255,255,.55) !important; font-size:11.5px !important; font-weight:500 !important; line-height:1.9 !important; letter-spacing:0 !important; } .lalag-timing-intro strong{ color:#FFFFFF !important; font-weight:700 !important; } /* ============================================================ MASTER ROUTE BAR ============================================================= */ .lalag-route-master{ position:relative !important; display:flex !important; align-items:center !important; justify-content:space-between !important; gap:25px !important; width:100% !important; margin:0 0 20px !important; padding:20px 24px !important; overflow:hidden !important; border: 1px solid rgba(216,180,91,.21) !important; background: rgba(255,255,255,.025) !important; backdrop-filter:blur(14px) !important; -webkit-backdrop-filter:blur(14px) !important; } .lalag-route-master:before{ content:"" !important; position:absolute !important; top:0 !important; left:-30% !important; width:20% !important; height:100% !important; transform: skewX(-20deg) !important; background: linear-gradient( 90deg, transparent, rgba(242,215,132,.055), transparent ) !important; animation: lalaMasterSweep 6s ease-in-out infinite !important; } @keyframes lalaMasterSweep{ 0%, 55%{ left:-30%; } 100%{ left:120%; } } /* ============================================================ MASTER ROUTE LEFT ============================================================= */ .lalag-route-master-left{ position:relative !important; z-index:2 !important; display:flex !important; align-items:center !important; gap:15px !important; margin:0 !important; } .lalag-route-master-icon{ width:45px !important; height:45px !important; flex:0 0 45px !important; display:flex !important; align-items:center !important; justify-content:center !important; color:#090704 !important; background: linear-gradient( 135deg, #90641E, #D5AF50, #F2D784 ) !important; box-shadow: 0 10px 27px rgba(200,154,58,.18) !important; font-size:14px !important; } .lalag-route-master-copy{ margin:0 !important; padding:0 !important; } .lalag-route-master-copy span{ display:block !important; margin:0 !important; color: rgba(255,255,255,.38) !important; font-size:6px !important; font-weight:800 !important; line-height:1.3 !important; letter-spacing:1.4px !important; text-transform:uppercase !important; } .lalag-route-master-copy strong{ display:block !important; margin:5px 0 0 !important; color:#FFFFFF !important; font-size:12px !important; font-weight:800 !important; line-height:1.25 !important; } .lalag-route-master-copy strong em{ color:#F2D784 !important; font-style:normal !important; } /* ============================================================ MASTER STATUS ============================================================= */ .lalag-route-master-status{ position:relative !important; z-index:2 !important; display:flex !important; align-items:center !important; gap:7px !important; color:#F2D784 !important; font-size:6.5px !important; font-weight:800 !important; line-height:1.3 !important; letter-spacing:1.2px !important; text-transform:uppercase !important; white-space:nowrap !important; } .lalag-route-master-status i{ color:#F2D784 !important; font-size:6px !important; animation: lalaStatusPulse 1.6s ease-in-out infinite !important; } @keyframes lalaStatusPulse{ 50%{ opacity:.3; } } /* ============================================================ MAIN TWO-COLUMN LAYOUT ============================================================= */ .lalag-timing-layout{ display:grid !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap:18px !important; width:100% !important; margin:0 !important; padding:0 !important; } /* ============================================================ PANEL ============================================================= */ .lalag-timing-panel{ position:relative !important; min-width:0 !important; margin:0 !important; padding:36px 32px !important; overflow:hidden !important; border: 1px solid rgba(216,180,91,.17) !important; background: linear-gradient( 145deg, rgba(255,255,255,.045), rgba(255,255,255,.018) ) !important; backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important; box-shadow: 0 22px 60px rgba(0,0,0,.18) !important; } .lalag-timing-panel:before{ content:"" !important; position:absolute !important; width:260px !important; height:260px !important; right:-180px !important; top:-170px !important; border-radius:50% !important; background: rgba(216,180,91,.12) !important; filter:blur(45px) !important; } /* ============================================================ PANEL TOP ============================================================= */ .lalag-panel-top{ position:relative !important; z-index:3 !important; display:flex !important; align-items:flex-start !important; justify-content:space-between !important; gap:20px !important; width:100% !important; margin:0 !important; padding:0 0 25px !important; border-bottom: 1px solid rgba(255,255,255,.08) !important; } .lalag-panel-eyebrow{ display:block !important; margin:0 0 8px !important; color:#D8B45B !important; font-size:6.5px !important; font-weight:800 !important; line-height:1.3 !important; letter-spacing:1.6px !important; text-transform:uppercase !important; } .lalag-timing .lalag-panel-title{ margin:0 !important; padding:0 !important; color:#FFFFFF !important; font-size: clamp(21px,2.2vw,30px) !important; font-weight:700 !important; line-height:1.2 !important; letter-spacing:-.8px !important; } .lalag-panel-icon{ width:51px !important; height:51px !important; flex:0 0 51px !important; display:flex !important; align-items:center !important; justify-content:center !important; color:#0A0805 !important; background: linear-gradient( 135deg, #936720, #D5B055 38%, #F5DD91 59%, #B57F27 ) !important; box-shadow: 0 13px 30px rgba(200,154,58,.20) !important; font-size:17px !important; } /* ============================================================ PICKUP LOCATION GRID ============================================================= */ .lalag-location-list{ position:relative !important; z-index:3 !important; display:grid !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap:9px !important; width:100% !important; margin:25px 0 0 !important; padding:0 !important; } .lalag-location-item{ position:relative !important; min-width:0 !important; min-height:54px !important; display:flex !important; align-items:center !important; gap:10px !important; margin:0 !important; padding:0 14px !important; overflow:hidden !important; border: 1px solid rgba(255,255,255,.09) !important; background: rgba(255,255,255,.025) !important; color: rgba(255,255,255,.67) !important; font-size:8px !important; font-weight:600 !important; line-height:1.4 !important; transition: transform .3s ease, border-color .3s ease, background .3s ease !important; } .lalag-location-item:before{ content:"" !important; position:absolute !important; left:-100% !important; top:0 !important; width:70% !important; height:100% !important; background: linear-gradient( 90deg, transparent, rgba(216,180,91,.08), transparent ) !important; transition:left .55s ease !important; } .lalag-location-item:hover{ transform: translateY(-3px) !important; border-color: rgba(242,215,132,.30) !important; background: rgba(216,180,91,.055) !important; } .lalag-location-item:hover:before{ left:120% !important; } .lalag-location-item i{ position:relative !important; z-index:2 !important; flex:0 0 auto !important; color:#F2D784 !important; font-size:8px !important; } .lalag-location-item span{ position:relative !important; z-index:2 !important; display:block !important; color: rgba(255,255,255,.67) !important; font-size:8px !important; font-weight:600 !important; } /* ============================================================ SCHEDULE ============================================================= */ .lalag-schedule-wrap{ position:relative !important; z-index:3 !important; width:100% !important; margin:25px 0 0 !important; padding:0 !important; } .lalag-schedule-block{ width:100% !important; margin:0 0 24px !important; padding:0 !important; } .lalag-schedule-block:last-child{ margin-bottom:0 !important; } .lalag-schedule-title{ display:flex !important; align-items:center !important; justify-content:space-between !important; gap:15px !important; width:100% !important; margin:0 0 10px !important; padding:0 !important; } .lalag-schedule-title-left{ display:flex !important; align-items:center !important; gap:8px !important; color:#FFFFFF !important; font-size:8px !important; font-weight:800 !important; line-height:1.3 !important; } .lalag-schedule-title-left i{ color:#D8B45B !important; font-size:10px !important; } .lalag-schedule-title small{ color: rgba(255,255,255,.32) !important; font-size:5.8px !important; font-weight:700 !important; line-height:1.3 !important; letter-spacing:.8px !important; text-transform:uppercase !important; } /* ============================================================ TIME ROW ============================================================= */ .lalag-time-row{ display:grid !important; grid-template-columns: repeat(3,minmax(0,1fr)) !important; gap:8px !important; width:100% !important; margin:0 !important; padding:0 !important; } .lalag-time-card{ position:relative !important; min-width:0 !important; min-height:76px !important; display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; margin:0 !important; padding:14px 10px !important; border: 1px solid rgba(255,255,255,.09) !important; background: rgba(255,255,255,.025) !important; transition: transform .35s ease, border-color .35s ease, background .35s ease !important; } .lalag-time-card:hover{ transform: translateY(-4px) !important; border-color: rgba(242,215,132,.35) !important; background: rgba(216,180,91,.065) !important; } .lalag-time-card strong{ display:block !important; margin:0 !important; color:#F2D784 !important; font-size:13px !important; font-weight:800 !important; line-height:1.2 !important; } .lalag-time-card span{ display:block !important; margin:4px 0 0 !important; color: rgba(255,255,255,.36) !important; font-size:5.5px !important; font-weight:700 !important; line-height:1.2 !important; letter-spacing:.8px !important; text-transform:uppercase !important; } /* ============================================================ DESTINATION SECTION ============================================================= */ .lalag-dest-section{ position:relative !important; width:100% !important; margin:19px 0 0 !important; padding:38px 34px !important; overflow:hidden !important; border: 1px solid rgba(216,180,91,.17) !important; background: linear-gradient( 135deg, rgba(216,180,91,.075), rgba(255,255,255,.022) ) !important; } .lalag-dest-section:after{ content:"" !important; position:absolute !important; width:380px !important; height:380px !important; right:-240px !important; bottom:-270px !important; border-radius:50% !important; background: radial-gradient( circle, rgba(216,180,91,.18), transparent 68% ) !important; } /* ============================================================ DESTINATION HEADER ============================================================= */ .lalag-dest-header{ position:relative !important; z-index:3 !important; display:flex !important; align-items:flex-end !important; justify-content:space-between !important; gap:30px !important; width:100% !important; margin:0 0 27px !important; padding:0 !important; } .lalag-dest-eyebrow{ display:block !important; margin:0 0 7px !important; color:#D8B45B !important; font-size:6.5px !important; font-weight:800 !important; line-height:1.3 !important; letter-spacing:1.6px !important; text-transform:uppercase !important; } .lalag-timing .lalag-dest-title{ margin:0 !important; color:#FFFFFF !important; font-size: clamp(21px,2.4vw,33px) !important; font-weight:700 !important; line-height:1.2 !important; letter-spacing:-.9px !important; } .lalag-dest-count{ color:#F2D784 !important; font-size:7px !important; font-weight:800 !important; line-height:1.3 !important; letter-spacing:1.3px !important; text-transform:uppercase !important; white-space:nowrap !important; } /* ============================================================ DESTINATION GRID ============================================================= */ .lalag-dest-grid{ position:relative !important; z-index:3 !important; display:grid !important; grid-template-columns: repeat(5,minmax(0,1fr)) !important; gap:8px !important; width:100% !important; margin:0 !important; padding:0 !important; } .lalag-dest-item{ min-width:0 !important; min-height:76px !important; display:flex !important; flex-direction:column !important; justify-content:center !important; gap:7px !important; margin:0 !important; padding:13px 11px !important; border: 1px solid rgba(255,255,255,.09) !important; background: rgba(0,0,0,.18) !important; transition: transform .35s ease, border-color .35s ease, background .35s ease !important; } .lalag-dest-item:hover{ transform: translateY(-4px) !important; border-color: rgba(242,215,132,.31) !important; background: rgba(216,180,91,.06) !important; } .lalag-dest-item i{ color:#F2D784 !important; font-size:11px !important; } .lalag-dest-item strong{ display:block !important; color:#FFFFFF !important; font-size:7.2px !important; font-weight:700 !important; line-height:1.35 !important; } .lalag-dest-item span{ display:block !important; color: rgba(255,255,255,.30) !important; font-size:5.3px !important; font-weight:600 !important; line-height:1.35 !important; } .lalag-dest-item.metro{ grid-column:span 2 !important; background: linear-gradient( 135deg, rgba(216,180,91,.10), rgba(255,255,255,.025) ) !important; border-color: rgba(216,180,91,.23) !important; } /* ============================================================ JOURNEY ============================================================= */ .lalag-journey{ position:relative !important; width:100% !important; margin:19px 0 0 !important; padding:34px !important; border: 1px solid rgba(216,180,91,.14) !important; background: rgba(255,255,255,.018) !important; } .lalag-journey-title{ width:100% !important; margin:0 0 28px !important; text-align:center !important; } .lalag-journey-title span{ display:block !important; margin:0 0 7px !important; color:#D8B45B !important; font-size:6px !important; font-weight:800 !important; letter-spacing:1.6px !important; text-transform:uppercase !important; } .lalag-journey-title strong{ display:block !important; color:#FFFFFF !important; font-size:20px !important; font-weight:700 !important; line-height:1.3 !important; } /* ============================================================ JOURNEY TRACK ============================================================= */ .lalag-journey-track{ display:grid !important; grid-template-columns: auto 1fr auto !important; align-items:center !important; gap:18px !important; width:100% !important; } .lalag-journey-point{ min-width:125px !important; text-align:center !important; } .lalag-journey-point i{ width:39px !important; height:39px !important; margin:0 auto 9px !important; display:flex !important; align-items:center !important; justify-content:center !important; border-radius:50% !important; font-size:12px !important; } .lalag-journey-point.start i{ color:#111111 !important; background:#FFFFFF !important; } .lalag-journey-point.end i{ color:#090704 !important; background: linear-gradient( 135deg, #8A621E, #D8B45B, #F2D784 ) !important; } .lalag-journey-point strong{ display:block !important; color:#FFFFFF !important; font-size:9px !important; font-weight:800 !important; } .lalag-journey-point span{ display:block !important; margin:4px 0 0 !important; color: rgba(255,255,255,.30) !important; font-size:5.5px !important; font-weight:600 !important; } /* ============================================================ JOURNEY LINE ============================================================= */ .lalag-journey-line{ position:relative !important; display:block !important; width:100% !important; height:1px !important; background: rgba(255,255,255,.12) !important; } .lalag-journey-line:before{ content:"" !important; position:absolute !important; top:-3px !important; left:0 !important; width:7px !important; height:7px !important; border-radius:50% !important; background:#FFFFFF !important; } .lalag-journey-line:after{ content:"" !important; position:absolute !important; top:-3px !important; right:0 !important; width:7px !important; height:7px !important; border-radius:50% !important; background:#F2D784 !important; box-shadow: 0 0 13px rgba(242,215,132,.40) !important; } .lalag-journey-moving{ position:absolute !important; top:0 !important; left:0 !important; width:80px !important; height:1px !important; background: linear-gradient( 90deg, transparent, #F2D784, transparent ) !important; animation: lalaJourneyMove 2.5s linear infinite !important; } @keyframes lalaJourneyMove{ from{ transform:translateX(-100px); } to{ transform:translateX(700px); } } /* ============================================================ INFO STRIP ============================================================= */ .lalag-info-strip{ display:grid !important; grid-template-columns: repeat(4,minmax(0,1fr)) !important; width:100% !important; margin:19px 0 0 !important; padding:0 !important; border: 1px solid rgba(216,180,91,.14) !important; background: rgba(255,255,255,.02) !important; } .lalag-info-item{ min-width:0 !important; min-height:88px !important; display:flex !important; align-items:center !important; justify-content:center !important; gap:11px !important; margin:0 !important; padding:18px 14px !important; } .lalag-info-item:not(:last-child){ border-right: 1px solid rgba(255,255,255,.07) !important; } .lalag-info-item i{ flex:0 0 auto !important; color:#F2D784 !important; font-size:14px !important; } .lalag-info-copy strong{ display:block !important; color:#FFFFFF !important; font-size:7.5px !important; font-weight:700 !important; } .lalag-info-copy span{ display:block !important; margin:4px 0 0 !important; color: rgba(255,255,255,.32) !important; font-size:5.5px !important; line-height:1.4 !important; } /* ============================================================ SEO SECTION ============================================================= */ .lalag-timing-seo{ display:grid !important; grid-template-columns: minmax(0,.72fr) minmax(0,1.28fr) !important; gap:55px !important; width:100% !important; margin:62px 0 0 !important; padding:50px 0 0 !important; border-top: 1px solid rgba(216,180,91,.16) !important; } .lalag-seo-side-label{ color:#D8B45B !important; font-size:6.5px !important; font-weight:800 !important; line-height:1.3 !important; letter-spacing:1.8px !important; text-transform:uppercase !important; } .lalag-timing .lalag-seo-side-title{ margin:9px 0 0 !important; max-width:400px !important; color:#FFFFFF !important; font-size: clamp(22px,2.4vw,34px) !important; font-weight:700 !important; line-height:1.2 !important; letter-spacing:-1px !important; } .lalag-seo-text p{ margin:0 0 14px !important; color: rgba(255,255,255,.47) !important; font-size:9.3px !important; font-weight:500 !important; line-height:1.9 !important; } .lalag-seo-text strong{ color: rgba(255,255,255,.90) !important; font-weight:700 !important; } /* ============================================================ FINAL CTA ============================================================= */ .lalag-timing-cta{ position:relative !important; display:flex !important; align-items:center !important; justify-content:space-between !important; gap:35px !important; width:100% !important; min-height:160px !important; margin:48px 0 0 !important; padding:35px 38px !important; overflow:hidden !important; border: 1px solid rgba(216,180,91,.27) !important; background: linear-gradient( 135deg, rgba(216,180,91,.10), rgba(255,255,255,.025) ) !important; box-shadow: 0 22px 55px rgba(0,0,0,.18) !important; } .lalag-timing-cta:before{ content:"" !important; position:absolute !important; width:340px !important; height:340px !important; right:-150px !important; top:-220px !important; border-radius:50% !important; background: radial-gradient( circle, rgba(216,180,91,.25), transparent 68% ) !important; } .lalag-timing-cta-copy{ position:relative !important; z-index:3 !important; min-width:0 !important; } .lalag-timing-cta-copy span{ display:block !important; margin:0 0 8px !important; color:#D8B45B !important; font-size:6.5px !important; font-weight:800 !important; line-height:1.3 !important; letter-spacing:1.8px !important; text-transform:uppercase !important; } .lalag-timing-cta-copy strong{ display:block !important; max-width:650px !important; color:#FFFFFF !important; font-size: clamp(20px,2.2vw,30px) !important; font-weight:700 !important; line-height:1.3 !important; letter-spacing:-.8px !important; } /* ============================================================ CTA BUTTON ============================================================= */ .lalag-timing .lalag-timing-btn{ position:relative !important; z-index:4 !important; min-height:58px !important; padding:0 27px !important; flex-shrink:0 !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:10px !important; overflow:hidden !important; border:0 !important; border-radius:0 !important; color:#090704 !important; background: linear-gradient( 115deg, #89631E, #C59434 20%, #F1D782 48%, #C89A3A 73%, #825F1D ) !important; box-shadow: 0 17px 40px rgba(200,154,58,.20) !important; font-size:8px !important; font-weight:800 !important; line-height:1 !important; letter-spacing:1px !important; text-transform:uppercase !important; text-decoration:none !important; transition: transform .35s ease, box-shadow .35s ease !important; } .lalag-timing-btn:before{ content:"" !important; position:absolute !important; top:-80% !important; left:-50% !important; width:30% !important; height:270% !important; transform: rotate(20deg) !important; background: linear-gradient( 90deg, transparent, rgba(255,255,255,.58), transparent ) !important; animation: lalaTimingButton 4.5s ease-in-out infinite !important; } @keyframes lalaTimingButton{ 0%, 55%{ left:-50%; } 92%, 100%{ left:125%; } } .lalag-timing-btn:hover{ transform: translateY(-4px) !important; box-shadow: 0 23px 55px rgba(200,154,58,.32) !important; } .lalag-timing-btn i, .lalag-timing-btn span{ position:relative !important; z-index:3 !important; } .lalag-timing-btn i{ color:#090704 !important; font-size:17px !important; } .lalag-timing-btn span{ color:#090704 !important; font-size:8px !important; font-weight:800 !important; line-height:1 !important; letter-spacing:1px !important; } /* ============================================================ WHATSAPP ICON ============================================================= */ .lalag-timing .fa-brands.fa-whatsapp{ font-family: "Font Awesome 6 Brands" !important; font-weight:400 !important; font-style:normal !important; display:inline-block !important; visibility:visible !important; } /* ============================================================ REVEAL ============================================================= */ .lalag-timing-header, .lalag-route-master, .lalag-timing-panel, .lalag-dest-section, .lalag-journey, .lalag-info-strip, .lalag-timing-seo, .lalag-timing-cta{ opacity:0; transform: translateY(28px); animation: lalaTimingReveal .85s cubic-bezier(.2,.7,.2,1) forwards; } .lalag-timing-header{ animation-delay:.05s; } .lalag-route-master{ animation-delay:.12s; } .lalag-timing-panel:nth-child(1){ animation-delay:.19s; } .lalag-timing-panel:nth-child(2){ animation-delay:.27s; } .lalag-dest-section{ animation-delay:.35s; } .lalag-journey{ animation-delay:.42s; } .lalag-info-strip{ animation-delay:.48s; } .lalag-timing-seo{ animation-delay:.54s; } .lalag-timing-cta{ animation-delay:.61s; } @keyframes lalaTimingReveal{ to{ opacity:1; transform:translateY(0); } } /* ============================================================ LAPTOP ============================================================= */ @media(max-width:1180px){ .lalag-timing{ padding: 100px 0 85px !important; } .lalag-timing-container{ width: calc(100% - 50px) !important; } .lalag-timing-header{ gap: 45px !important; } .lalag-timing-title{ font-size: clamp(40px,5vw,64px) !important; } .lalag-timing-panel{ padding: 32px 27px !important; } } /* ============================================================ TABLET ============================================================= */ @media(max-width:900px){ .lalag-timing{ padding: 85px 0 70px !important; } .lalag-timing-header{ grid-template-columns: 1fr !important; align-items:start !important; gap: 25px !important; } .lalag-timing-intro{ max-width: 760px !important; margin: 0 !important; } .lalag-timing-layout{ grid-template-columns: 1fr !important; } .lalag-dest-grid{ grid-template-columns: repeat(3,minmax(0,1fr)) !important; } .lalag-dest-item.metro{ grid-column: span 2 !important; } .lalag-timing-seo{ grid-template-columns: 1fr !important; gap: 25px !important; } } /* ============================================================ MOBILE ============================================================= */ @media(max-width:680px){ .lalag-timing{ padding: 70px 0 58px !important; } .lalag-timing-container{ width: 100% !important; max-width: 100% !important; padding: 0 18px !important; } /* HEADER */ .lalag-timing-header{ gap: 20px !important; margin-bottom: 36px !important; } .lalag-timing-label{ margin-bottom: 14px !important; font-size: 6.3px !important; letter-spacing: 1.5px !important; } .lalag-timing-label-line{ width: 27px !important; flex-basis: 27px !important; } .lalag-timing .lalag-timing-title{ font-size: clamp( 33px, 10vw, 45px ) !important; line-height: 1.01 !important; letter-spacing: -1.7px !important; } .lalag-timing .lalag-timing-intro{ max-width: 100% !important; font-size: 9.7px !important; line-height: 1.8 !important; } /* MASTER ROUTE */ .lalag-route-master{ padding: 16px !important; align-items: flex-start !important; flex-direction: column !important; } .lalag-route-master-icon{ width: 40px !important; height: 40px !important; flex-basis: 40px !important; font-size: 12px !important; } .lalag-route-master-copy strong{ font-size: 10px !important; } /* PANELS */ .lalag-timing-layout{ grid-template-columns: 1fr !important; gap: 12px !important; } .lalag-timing-panel{ padding: 27px 21px !important; } .lalag-panel-title{ font-size: 23px !important; } .lalag-panel-icon{ width: 47px !important; height: 47px !important; flex-basis: 47px !important; font-size: 15px !important; } /* LOCATIONS */ .lalag-location-list{ gap: 7px !important; } .lalag-location-item{ min-height: 50px !important; padding: 0 11px !important; font-size: 6.8px !important; } .lalag-location-item span{ font-size: 6.8px !important; } /* TIME */ .lalag-time-card{ min-height: 70px !important; padding: 12px 6px !important; } .lalag-time-card strong{ font-size: 11px !important; } .lalag-time-card span{ font-size: 5px !important; } /* DESTINATIONS */ .lalag-dest-section{ margin-top: 12px !important; padding: 27px 21px !important; } .lalag-dest-header{ align-items: flex-start !important; flex-direction: column !important; gap: 10px !important; margin-bottom: 22px !important; } .lalag-dest-title{ font-size: 23px !important; } .lalag-dest-grid{ grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 7px !important; } .lalag-dest-item{ min-height: 70px !important; } .lalag-dest-item.metro{ grid-column: 1 / -1 !important; } .lalag-dest-item strong{ font-size: 6.5px !important; } /* JOURNEY */ .lalag-journey{ margin-top: 12px !important; padding: 27px 17px !important; } .lalag-journey-title strong{ font-size: 17px !important; } .lalag-journey-track{ grid-template-columns: 1fr !important; gap: 19px !important; } .lalag-journey-line{ width: 1px !important; height: 75px !important; margin: 0 auto !important; } .lalag-journey-line:before{ top: 0 !important; left: -3px !important; } .lalag-journey-line:after{ top: auto !important; bottom: 0 !important; right: auto !important; left: -3px !important; } .lalag-journey-moving{ width: 1px !important; height: 28px !important; top: 0 !important; left: 0 !important; background: linear-gradient( 180deg, transparent, #F2D784, transparent ) !important; animation: lalaJourneyMobile 2s linear infinite !important; } @keyframes lalaJourneyMobile{ from{ transform: translateY(-35px); } to{ transform: translateY(90px); } } /* INFO */ .lalag-info-strip{ grid-template-columns: repeat(2,minmax(0,1fr)) !important; } .lalag-info-item{ min-height: 78px !important; justify-content: flex-start !important; } .lalag-info-item:nth-child(2){ border-right: 0 !important; } .lalag-info-item:nth-child(1), .lalag-info-item:nth-child(2){ border-bottom: 1px solid rgba(255,255,255,.07) !important; } /* SEO */ .lalag-timing-seo{ margin-top: 44px !important; padding-top: 38px !important; gap: 20px !important; } .lalag-seo-side-title{ font-size: 23px !important; } .lalag-seo-text p{ font-size: 8.5px !important; } /* CTA */ .lalag-timing-cta{ margin-top: 35px !important; min-height: auto !important; padding: 27px 21px !important; flex-direction: column !important; align-items: flex-start !important; } .lalag-timing-cta-copy strong{ font-size: 20px !important; } .lalag-timing .lalag-timing-btn{ width: 100% !important; min-height: 55px !important; padding: 0 18px !important; } } /* ============================================================ SMALL PHONE ============================================================= */ @media(max-width:390px){ .lalag-timing-container{ padding: 0 15px !important; } .lalag-timing .lalag-timing-title{ font-size: 31px !important; letter-spacing: -1.4px !important; } .lalag-location-list{ grid-template-columns: 1fr !important; } .lalag-time-row{ gap: 5px !important; } .lalag-time-card strong{ font-size: 10px !important; } .lalag-dest-grid{ grid-template-columns: 1fr !important; } .lalag-dest-item.metro{ grid-column: auto !important; } .lalag-route-master-status{ white-space: normal !important; } } /* ============================================================ NO HOVER MOVEMENT ON TOUCH ============================================================= */ @media(hover:none){ .lalag-location-item:hover, .lalag-time-card:hover, .lalag-dest-item:hover, .lalag-timing-btn:hover{ transform: none !important; } } /* ============================================================ REDUCED MOTION ============================================================= */ @media(prefers-reduced-motion:reduce){ .lalag-timing *, .lalag-timing *:before, .lalag-timing *:after{ animation: none !important; transition: none !important; } .lalag-timing-header, .lalag-route-master, .lalag-timing-panel, .lalag-dest-section, .lalag-journey, .lalag-info-strip, .lalag-timing-seo, .lalag-timing-cta{ opacity: 1 !important; transform: none !important; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-b35de5c *//* ============================================================ LALA G GROUP CUSTOMER REVIEWS FULL CSS LOCK ELEMENTOR / WORDPRESS SAFE ============================================================= */ @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&display=swap'); @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css'); /* ============================================================ RESET ============================================================= */ .lalag-reviews, .lalag-reviews *{ box-sizing:border-box !important; } .lalag-reviews{ --black:#080808; --gold:#C89A3A; --gold-dark:#8A621E; --gold-rich:#D8B45B; --gold-light:#F2D784; --white:#FFFFFF; --bg:#FAF9F6; --text:#151515; --muted:#77716A; --border:#ECE5D8; position:relative !important; width:100% !important; max-width:100% !important; margin:0 !important; padding:115px 0 100px !important; overflow:hidden !important; color:#151515 !important; background: radial-gradient( circle at 92% 8%, rgba(216,180,91,.12), transparent 23% ), radial-gradient( circle at 4% 90%, rgba(200,154,58,.07), transparent 27% ), #FAF9F6 !important; font-family: "Montserrat", Arial, sans-serif !important; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } /* ============================================================ MONTSERRAT LOCK ============================================================= */ .lalag-reviews h1, .lalag-reviews h2, .lalag-reviews h3, .lalag-reviews h4, .lalag-reviews h5, .lalag-reviews h6, .lalag-reviews p, .lalag-reviews span, .lalag-reviews strong, .lalag-reviews small, .lalag-reviews div, .lalag-reviews a{ font-family: "Montserrat", Arial, sans-serif !important; } /* ============================================================ FONT AWESOME LOCK ============================================================= */ .lalag-reviews .fa, .lalag-reviews .fas, .lalag-reviews .fa-solid{ font-family: "Font Awesome 6 Free" !important; font-weight:900 !important; font-style:normal !important; line-height:1 !important; } .lalag-reviews .far, .lalag-reviews .fa-regular{ font-family: "Font Awesome 6 Free" !important; font-weight:400 !important; font-style:normal !important; line-height:1 !important; } .lalag-reviews .fab, .lalag-reviews .fa-brands{ font-family: "Font Awesome 6 Brands" !important; font-weight:400 !important; font-style:normal !important; line-height:1 !important; } .lalag-reviews i{ display:inline-block !important; visibility:visible !important; opacity:1 !important; font-style:normal !important; } .lalag-reviews a{ text-decoration:none !important; } /* ============================================================ CONTAINER ============================================================= */ .lalag-reviews-container{ position:relative !important; z-index:3 !important; width:min(1240px,92%) !important; max-width:1240px !important; margin:0 auto !important; padding:0 !important; } /* ============================================================ ORBIT ============================================================= */ .lalag-review-orbit{ position:absolute !important; z-index:0 !important; width:600px !important; height:600px !important; right:-390px !important; top:80px !important; border-radius:50% !important; border: 1px solid rgba(200,154,58,.10) !important; pointer-events:none !important; animation: lalagReviewOrbit 30s linear infinite !important; } .lalag-review-orbit:before{ content:"" !important; position:absolute !important; inset:90px !important; border-radius:50% !important; border: 1px solid rgba(200,154,58,.07) !important; } .lalag-review-orbit:after{ content:"" !important; position:absolute !important; inset:190px !important; border-radius:50% !important; border: 1px solid rgba(200,154,58,.05) !important; } @keyframes lalagReviewOrbit{ to{ transform:rotate(360deg); } } /* ============================================================ HEADER ============================================================= */ .lalag-reviews-header{ display:grid !important; grid-template-columns: minmax(0,1.1fr) minmax(300px,.75fr) !important; align-items:end !important; gap:70px !important; width:100% !important; margin:0 0 55px !important; padding:0 !important; } /* ============================================================ LABEL ============================================================= */ .lalag-reviews-label{ display:flex !important; align-items:center !important; gap:11px !important; width:max-content !important; max-width:100% !important; margin:0 0 18px !important; padding:0 !important; color:#946719 !important; font-size:8px !important; font-weight:800 !important; line-height:1.3 !important; letter-spacing:2.2px !important; text-transform:uppercase !important; } .lalag-reviews-label-line{ position:relative !important; display:block !important; width:38px !important; height:1px !important; flex:0 0 38px !important; overflow:hidden !important; background: rgba(200,154,58,.28) !important; } .lalag-reviews-label-line:after{ content:"" !important; position:absolute !important; top:0 !important; left:-100% !important; width:70% !important; height:100% !important; background: linear-gradient( 90deg, transparent, #F2D784, transparent ) !important; animation: lalagReviewLine 2.6s ease-in-out infinite !important; } @keyframes lalagReviewLine{ 0%{ left:-100%; } 65%, 100%{ left:120%; } } /* ============================================================ TITLE ============================================================= */ .lalag-reviews .lalag-reviews-title{ display:block !important; width:100% !important; max-width:760px !important; margin:0 !important; padding:0 !important; color:#101010 !important; font-size: clamp( 42px, 4.9vw, 72px ) !important; font-weight:800 !important; line-height:.98 !important; letter-spacing:-3.4px !important; text-align:left !important; text-transform:uppercase !important; } .lalag-reviews-title-gold{ display:block !important; margin:8px 0 0 !important; padding:0 !important; color:transparent !important; background: linear-gradient( 100deg, #795116, #B9872D 20%, #E1BF63 39%, #FFF2B7 50%, #C89A3A 67%, #8A621E 84%, #D8B45B ) !important; background-size: 230% auto !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; animation: lalagReviewGold 6s linear infinite !important; } @keyframes lalagReviewGold{ to{ background-position: 230% center; } } /* ============================================================ INTRO ============================================================= */ .lalag-reviews .lalag-reviews-intro{ width:100% !important; max-width:500px !important; margin: 0 0 5px auto !important; padding:0 !important; color:#77716A !important; font-size:11.5px !important; font-weight:500 !important; line-height:1.9 !important; letter-spacing:0 !important; } .lalag-reviews-intro strong{ color:#1D1D1D !important; font-weight:700 !important; } /* ============================================================ TOP BAR ============================================================= */ .lalag-review-topbar{ position:relative !important; display:flex !important; align-items:center !important; justify-content: space-between !important; gap:30px !important; width:100% !important; margin:0 0 20px !important; padding: 25px 27px !important; overflow:hidden !important; background: #090909 !important; border: 1px solid rgba(200,154,58,.24) !important; box-shadow: 0 18px 45px rgba(0,0,0,.10) !important; } .lalag-review-topbar:before{ content:"" !important; position:absolute !important; width:320px !important; height:320px !important; right:-150px !important; top:-210px !important; border-radius:50% !important; background: radial-gradient( circle, rgba(216,180,91,.25), transparent 68% ) !important; } /* ============================================================ RATING ============================================================= */ .lalag-review-rating{ position:relative !important; z-index:2 !important; display:flex !important; align-items:center !important; gap:17px !important; } .lalag-rating-icon{ width:53px !important; height:53px !important; flex:0 0 53px !important; display:flex !important; align-items:center !important; justify-content:center !important; color:#080704 !important; background: linear-gradient( 135deg, #8A621E, #D8B45B, #F2D784 ) !important; font-size:18px !important; } .lalag-rating-icon i{ color:#080704 !important; font-size:18px !important; } .lalag-rating-copy span{ display:block !important; margin:0 !important; color:#D8B45B !important; font-size:6.5px !important; font-weight:800 !important; line-height:1.3 !important; letter-spacing:1.6px !important; text-transform:uppercase !important; } .lalag-rating-copy strong{ display:block !important; margin:5px 0 0 !important; color:#FFFFFF !important; font-size:20px !important; font-weight:700 !important; line-height:1.3 !important; } /* ============================================================ TOPBAR TAGS ============================================================= */ .lalag-topbar-tags{ position:relative !important; z-index:2 !important; display:flex !important; flex-wrap:wrap !important; justify-content:flex-end !important; gap:7px !important; } .lalag-topbar-tag{ min-height:29px !important; padding: 0 11px !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:6px !important; border: 1px solid rgba(216,180,91,.20) !important; border-radius:100px !important; color: rgba(255,255,255,.58) !important; background: rgba(255,255,255,.025) !important; font-size:5.7px !important; font-weight:700 !important; line-height:1 !important; } .lalag-topbar-tag i{ color:#F2D784 !important; font-size:6px !important; } /* ============================================================ REVIEWS GRID ============================================================= */ .lalag-reviews-grid{ display:grid !important; grid-template-columns: repeat( 3, minmax(0,1fr) ) !important; gap:16px !important; width:100% !important; margin:0 !important; padding:0 !important; } /* ============================================================ REVIEW CARD ============================================================= */ .lalag-review-card{ position:relative !important; min-width:0 !important; min-height:385px !important; margin:0 !important; padding: 28px 27px !important; overflow:hidden !important; border: 1px solid #ECE5D8 !important; background: linear-gradient( 145deg, #FFFFFF 0%, #FFFFFF 60%, #FBF8F1 100% ) !important; box-shadow: 0 14px 42px rgba(30,24,12,.05) !important; transition: transform .45s ease, border-color .45s ease, box-shadow .45s ease !important; } .lalag-review-card:before{ content:"" !important; position:absolute !important; top:0 !important; left:0 !important; width:0 !important; height:2px !important; background: linear-gradient( 90deg, #8A621E, #F2D784, #C89A3A ) !important; transition: width .55s ease !important; } .lalag-review-card:after{ content:"" !important; position:absolute !important; width:220px !important; height:220px !important; right:-150px !important; top:-150px !important; border-radius:50% !important; background: radial-gradient( circle, rgba(216,180,91,.20), transparent 68% ) !important; opacity:.25 !important; transform: scale(.7) !important; transition: opacity .45s ease, transform .45s ease !important; } .lalag-review-card:hover{ transform: translateY(-9px) !important; border-color: rgba(200,154,58,.38) !important; box-shadow: 0 30px 70px rgba(52,38,12,.11) !important; } .lalag-review-card:hover:before{ width:100% !important; } .lalag-review-card:hover:after{ opacity:1 !important; transform: scale(1.2) !important; } /* ============================================================ QUOTE ============================================================= */ .lalag-review-quote{ position:absolute !important; z-index:1 !important; right:24px !important; top:18px !important; color: rgba(138,98,30,.07) !important; font-size:55px !important; } /* ============================================================ USER ============================================================= */ .lalag-review-user{ position:relative !important; z-index:3 !important; display:flex !important; align-items:center !important; gap:12px !important; margin:0 !important; padding:0 !important; } /* ============================================================ AVATAR ============================================================= */ .lalag-review-avatar{ width:48px !important; height:48px !important; flex:0 0 48px !important; display:flex !important; align-items:center !important; justify-content:center !important; margin:0 !important; padding:0 !important; border-radius:50% !important; color:#090704 !important; background: linear-gradient( 135deg, #936720, #D5B055 38%, #F5DD91 59%, #B57F27 ) !important; box-shadow: 0 9px 25px rgba(200,154,58,.19) !important; font-size:11px !important; font-weight:900 !important; line-height:1 !important; } /* ============================================================ CUSTOMER NAME ============================================================= */ .lalag-review-person strong{ display:block !important; margin:0 !important; color:#151515 !important; font-size:10.5px !important; font-weight:800 !important; line-height:1.3 !important; } .lalag-review-person span{ display:block !important; margin:4px 0 0 !important; color:#999188 !important; font-size:5.7px !important; font-weight:700 !important; line-height:1.3 !important; letter-spacing:.55px !important; text-transform:uppercase !important; } /* ============================================================ STARS ============================================================= */ .lalag-review-stars{ position:relative !important; z-index:3 !important; display:flex !important; align-items:center !important; gap:3px !important; margin: 24px 0 0 !important; padding:0 !important; color:#C58F31 !important; } .lalag-review-stars i{ color:#C58F31 !important; font-size:10px !important; } /* ============================================================ REVIEW TEXT ============================================================= */ .lalag-reviews .lalag-review-text{ position:relative !important; z-index:3 !important; display:block !important; margin: 17px 0 0 !important; padding:0 !important; color:#625E58 !important; font-size:9.4px !important; font-weight:500 !important; line-height:1.85 !important; letter-spacing:0 !important; } /* ============================================================ VERIFIED ============================================================= */ .lalag-review-verified{ position:relative !important; z-index:3 !important; display:inline-flex !important; align-items:center !important; gap:6px !important; margin: 17px 0 0 !important; padding:0 !important; color:#9A6B20 !important; font-size:5.5px !important; font-weight:800 !important; line-height:1.3 !important; letter-spacing:.5px !important; text-transform:uppercase !important; } .lalag-review-verified i{ color:#9A6B20 !important; font-size:7px !important; } /* ============================================================ ROUTE FOOTER ============================================================= */ .lalag-review-route{ position:absolute !important; z-index:3 !important; left:27px !important; right:27px !important; bottom:24px !important; display:flex !important; align-items:center !important; justify-content: space-between !important; gap:12px !important; margin:0 !important; padding: 16px 0 0 !important; border-top: 1px solid #EEE8DD !important; } .lalag-review-route-name{ display:flex !important; align-items:center !important; gap:7px !important; min-width:0 !important; color:#8C641F !important; font-size:5.9px !important; font-weight:800 !important; line-height:1.3 !important; letter-spacing:.4px !important; text-transform:uppercase !important; } .lalag-review-route-name i{ color:#B78228 !important; font-size:7px !important; } .lalag-review-service{ color:#A49E94 !important; font-size:5.2px !important; font-weight:700 !important; line-height:1.3 !important; text-transform:uppercase !important; text-align:right !important; } /* ============================================================ TRUST STRIP ============================================================= */ .lalag-review-trust{ display:grid !important; grid-template-columns: repeat( 4, minmax(0,1fr) ) !important; width:100% !important; margin: 19px 0 0 !important; padding:0 !important; background: #FFFFFF !important; border: 1px solid #ECE5D8 !important; box-shadow: 0 12px 35px rgba(30,24,12,.04) !important; } .lalag-review-trust-item{ min-width:0 !important; min-height:100px !important; display:flex !important; align-items:center !important; justify-content:center !important; gap:11px !important; margin:0 !important; padding: 20px !important; } .lalag-review-trust-item:not(:last-child){ border-right: 1px solid #ECE5D8 !important; } /* ============================================================ TRUST ICON ============================================================= */ .lalag-review-trust-icon{ width:38px !important; height:38px !important; flex:0 0 38px !important; display:flex !important; align-items:center !important; justify-content:center !important; color:#090704 !important; background: linear-gradient( 135deg, #A47423, #E2BF66 ) !important; font-size:11px !important; } .lalag-review-trust-icon i{ color:#090704 !important; font-size:11px !important; } /* ============================================================ TRUST COPY ============================================================= */ .lalag-review-trust-copy strong{ display:block !important; margin:0 !important; color:#151515 !important; font-size:8px !important; font-weight:800 !important; line-height:1.3 !important; } .lalag-review-trust-copy span{ display:block !important; margin: 4px 0 0 !important; color:#969087 !important; font-size:5.5px !important; font-weight:500 !important; line-height:1.4 !important; } /* ============================================================ FINAL CTA ============================================================= */ .lalag-review-cta{ position:relative !important; display:flex !important; align-items:center !important; justify-content: space-between !important; gap:35px !important; width:100% !important; min-height:180px !important; margin: 19px 0 0 !important; padding: 35px 38px !important; overflow:hidden !important; background: linear-gradient( 135deg, #080808, #0C0B09 60%, #151107 ) !important; border: 1px solid rgba(216,180,91,.24) !important; } .lalag-review-cta:before{ content:"" !important; position:absolute !important; inset:0 !important; opacity:.20 !important; background-image: linear-gradient( rgba(255,255,255,.025) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255,255,255,.025) 1px, transparent 1px ) !important; background-size: 60px 60px !important; } .lalag-review-cta:after{ content:"" !important; position:absolute !important; width:350px !important; height:350px !important; right:-160px !important; top:-220px !important; border-radius:50% !important; background: radial-gradient( circle, rgba(216,180,91,.25), transparent 68% ) !important; } /* ============================================================ CTA COPY ============================================================= */ .lalag-review-cta-copy{ position:relative !important; z-index:3 !important; min-width:0 !important; } .lalag-review-cta-copy span{ display:block !important; margin: 0 0 8px !important; color:#D8B45B !important; font-size:6.5px !important; font-weight:800 !important; line-height:1.3 !important; letter-spacing:1.8px !important; text-transform:uppercase !important; } .lalag-review-cta-copy strong{ display:block !important; max-width:650px !important; margin:0 !important; color:#FFFFFF !important; font-size: clamp( 21px, 2.5vw, 32px ) !important; font-weight:700 !important; line-height:1.3 !important; letter-spacing:-.9px !important; } /* ============================================================ CTA BUTTON ============================================================= */ .lalag-reviews .lalag-review-btn{ position:relative !important; z-index:4 !important; min-height:58px !important; padding: 0 27px !important; flex-shrink:0 !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:10px !important; overflow:hidden !important; border:0 !important; border-radius:0 !important; color:#090704 !important; background: linear-gradient( 115deg, #89631E, #C59434 20%, #F1D782 48%, #C89A3A 73%, #825F1D ) !important; box-shadow: 0 17px 40px rgba(200,154,58,.20) !important; font-size:8px !important; font-weight:800 !important; line-height:1 !important; letter-spacing:1px !important; text-transform:uppercase !important; white-space:nowrap !important; text-decoration:none !important; transition: transform .35s ease, box-shadow .35s ease !important; } /* ============================================================ BUTTON SHINE ============================================================= */ .lalag-review-btn:before{ content:"" !important; position:absolute !important; z-index:1 !important; top:-80% !important; left:-45% !important; width:28% !important; height:270% !important; transform: rotate(20deg) !important; background: linear-gradient( 90deg, transparent, rgba(255,255,255,.58), transparent ) !important; animation: lalagReviewShine 4.5s ease-in-out infinite !important; } @keyframes lalagReviewShine{ 0%, 55%{ left:-45%; } 90%, 100%{ left:125%; } } .lalag-review-btn:hover{ transform: translateY(-4px) !important; box-shadow: 0 23px 55px rgba(200,154,58,.32) !important; } .lalag-review-btn i, .lalag-review-btn span{ position:relative !important; z-index:3 !important; } .lalag-review-btn i{ color:#090704 !important; font-size:17px !important; } .lalag-review-btn span{ color:#090704 !important; font-size:8px !important; font-weight:800 !important; line-height:1 !important; letter-spacing:1px !important; } /* ============================================================ WHATSAPP ICON EXACT ============================================================= */ .lalag-reviews .fa-brands.fa-whatsapp{ font-family: "Font Awesome 6 Brands" !important; font-weight:400 !important; font-style:normal !important; display:inline-block !important; visibility:visible !important; opacity:1 !important; } /* ============================================================ ENTRANCE ANIMATION ============================================================= */ .lalag-reviews-header, .lalag-review-topbar, .lalag-review-card, .lalag-review-trust, .lalag-review-cta{ opacity:0; transform: translateY(28px); animation: lalagReviewReveal .85s cubic-bezier(.2,.7,.2,1) forwards; } .lalag-reviews-header{ animation-delay:.05s; } .lalag-review-topbar{ animation-delay:.12s; } .lalag-review-card:nth-child(1){ animation-delay:.18s; } .lalag-review-card:nth-child(2){ animation-delay:.25s; } .lalag-review-card:nth-child(3){ animation-delay:.32s; } .lalag-review-card:nth-child(4){ animation-delay:.39s; } .lalag-review-card:nth-child(5){ animation-delay:.46s; } .lalag-review-card:nth-child(6){ animation-delay:.53s; } .lalag-review-trust{ animation-delay:.60s; } .lalag-review-cta{ animation-delay:.67s; } @keyframes lalagReviewReveal{ to{ opacity:1; transform: translateY(0); } } /* ============================================================ LAPTOP ============================================================= */ @media(max-width:1180px){ .lalag-reviews{ padding: 100px 0 85px !important; } .lalag-reviews-container{ width: calc(100% - 50px) !important; } .lalag-reviews-header{ gap: 45px !important; } .lalag-reviews-title{ font-size: clamp( 40px, 5vw, 64px ) !important; } } /* ============================================================ TABLET ============================================================= */ @media(max-width:900px){ .lalag-reviews{ padding: 85px 0 70px !important; } .lalag-reviews-header{ grid-template-columns: 1fr !important; align-items:start !important; gap: 25px !important; } .lalag-reviews-intro{ max-width: 720px !important; margin: 0 !important; } .lalag-reviews-grid{ grid-template-columns: repeat( 2, minmax(0,1fr) ) !important; } .lalag-review-topbar{ align-items: flex-start !important; flex-direction: column !important; } .lalag-topbar-tags{ justify-content: flex-start !important; } } /* ============================================================ MOBILE ============================================================= */ @media(max-width:680px){ .lalag-reviews{ padding: 70px 0 58px !important; } .lalag-reviews-container{ width: 100% !important; max-width: 100% !important; padding: 0 18px !important; } /* HEADER */ .lalag-reviews-header{ gap: 20px !important; margin-bottom: 36px !important; } .lalag-reviews-label{ margin-bottom: 14px !important; font-size: 6.2px !important; letter-spacing: 1.4px !important; } .lalag-reviews-label-line{ width: 27px !important; flex-basis: 27px !important; } .lalag-reviews .lalag-reviews-title{ font-size: clamp( 33px, 10vw, 45px ) !important; line-height: 1.01 !important; letter-spacing: -1.7px !important; } .lalag-reviews .lalag-reviews-intro{ max-width: 100% !important; font-size: 9.7px !important; line-height: 1.8 !important; } /* TOPBAR */ .lalag-review-topbar{ padding: 20px 18px !important; gap: 18px !important; flex-direction: column !important; align-items: flex-start !important; } .lalag-rating-icon{ width: 47px !important; height: 47px !important; flex-basis: 47px !important; } .lalag-rating-copy strong{ font-size: 16px !important; } .lalag-topbar-tags{ justify-content: flex-start !important; } /* ======================================================== MOBILE SWIPE ========================================================= */ .lalag-reviews-grid{ display:flex !important; grid-template-columns: none !important; gap: 11px !important; overflow-x: auto !important; overflow-y: visible !important; width: 100% !important; padding: 0 1px 12px !important; scroll-snap-type: x mandatory !important; scrollbar-width: none !important; -webkit-overflow-scrolling: touch !important; } .lalag-reviews-grid::-webkit-scrollbar{ display:none !important; } .lalag-review-card{ flex: 0 0 86% !important; width: 86% !important; min-height: 365px !important; padding: 24px 21px !important; scroll-snap-align: start !important; } .lalag-review-avatar{ width: 44px !important; height: 44px !important; flex-basis: 44px !important; font-size: 10px !important; } .lalag-review-person strong{ font-size: 9.5px !important; } .lalag-review-person span{ font-size: 5.3px !important; } .lalag-review-stars{ margin-top: 21px !important; } .lalag-reviews .lalag-review-text{ font-size: 8.5px !important; line-height: 1.8 !important; } .lalag-review-route{ left: 21px !important; right: 21px !important; bottom: 21px !important; } .lalag-review-route-name{ font-size: 5.3px !important; } .lalag-review-service{ font-size: 4.8px !important; } /* TRUST */ .lalag-review-trust{ grid-template-columns: repeat( 2, minmax(0,1fr) ) !important; } .lalag-review-trust-item{ min-height: 88px !important; justify-content: flex-start !important; padding: 15px !important; } .lalag-review-trust-item:nth-child(2){ border-right: 0 !important; } .lalag-review-trust-item:nth-child(1), .lalag-review-trust-item:nth-child(2){ border-bottom: 1px solid #ECE5D8 !important; } .lalag-review-trust-copy strong{ font-size: 7px !important; } .lalag-review-trust-copy span{ font-size: 5px !important; } /* CTA */ .lalag-review-cta{ min-height: auto !important; padding: 27px 21px !important; flex-direction: column !important; align-items: flex-start !important; } .lalag-review-cta-copy strong{ font-size: 20px !important; } .lalag-reviews .lalag-review-btn{ width: 100% !important; min-height: 55px !important; padding: 0 18px !important; } } /* ============================================================ SMALL PHONES ============================================================= */ @media(max-width:390px){ .lalag-reviews-container{ padding: 0 15px !important; } .lalag-reviews .lalag-reviews-title{ font-size: 31px !important; letter-spacing: -1.4px !important; } .lalag-review-card{ flex-basis: 91% !important; width: 91% !important; } .lalag-review-route{ align-items: flex-start !important; flex-direction: column !important; gap: 5px !important; } } /* ============================================================ TOUCH DEVICES ============================================================= */ @media(hover:none){ .lalag-review-card:hover, .lalag-review-btn:hover{ transform: none !important; } } /* ============================================================ REDUCED MOTION ============================================================= */ @media(prefers-reduced-motion:reduce){ .lalag-reviews *, .lalag-reviews *:before, .lalag-reviews *:after{ animation: none !important; transition: none !important; } .lalag-reviews-header, .lalag-review-topbar, .lalag-review-card, .lalag-review-trust, .lalag-review-cta{ opacity: 1 !important; transform: none !important; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-f90562f *//* ============================================================ LALA G GROUP FAQ SECTION FULL CSS LOCK ELEMENTOR / WORDPRESS SAFE ============================================================= */ @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&display=swap'); @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css'); /* ============================================================ RESET ============================================================= */ .lalag-faq, .lalag-faq *{ box-sizing:border-box !important; } .lalag-faq{ --faq-black:#050505; --faq-dark:#0A0908; --faq-gold:#C89A3A; --faq-gold-dark:#8A621E; --faq-gold-rich:#D8B45B; --faq-gold-light:#F2D784; --faq-white:#FFFFFF; --faq-muted: rgba(255,255,255,.52); --faq-border: rgba(216,180,91,.16); position:relative !important; width:100% !important; max-width:100% !important; margin:0 !important; padding: 120px 0 105px !important; overflow:hidden !important; color:#FFFFFF !important; background: radial-gradient( circle at 90% 8%, rgba(216,180,91,.13), transparent 24% ), radial-gradient( circle at 5% 90%, rgba(200,154,58,.075), transparent 28% ), linear-gradient( 135deg, #050505 0%, #080807 52%, #0D0C09 100% ) !important; font-family: "Montserrat", Arial, sans-serif !important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ============================================================ MONTSERRAT LOCK ============================================================= */ .lalag-faq h1, .lalag-faq h2, .lalag-faq h3, .lalag-faq h4, .lalag-faq h5, .lalag-faq h6, .lalag-faq p, .lalag-faq span, .lalag-faq strong, .lalag-faq small, .lalag-faq button, .lalag-faq a, .lalag-faq div{ font-family: "Montserrat", Arial, sans-serif !important; } /* ============================================================ FONT AWESOME LOCK ============================================================= */ .lalag-faq .fa, .lalag-faq .fas, .lalag-faq .fa-solid{ font-family: "Font Awesome 6 Free" !important; font-weight:900 !important; font-style:normal !important; font-variant:normal !important; line-height:1 !important; } .lalag-faq .far, .lalag-faq .fa-regular{ font-family: "Font Awesome 6 Free" !important; font-weight:400 !important; font-style:normal !important; font-variant:normal !important; line-height:1 !important; } .lalag-faq .fab, .lalag-faq .fa-brands{ font-family: "Font Awesome 6 Brands" !important; font-weight:400 !important; font-style:normal !important; font-variant:normal !important; line-height:1 !important; } .lalag-faq i{ display:inline-block !important; visibility:visible !important; opacity:1 !important; font-style:normal !important; } .lalag-faq a{ text-decoration:none !important; } /* ============================================================ BACKGROUND GRID ============================================================= */ .lalag-faq-grid-bg{ position:absolute !important; z-index:0 !important; inset:0 !important; width:100% !important; height:100% !important; opacity:.19 !important; pointer-events:none !important; background-image: linear-gradient( rgba(255,255,255,.025) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255,255,255,.025) 1px, transparent 1px ) !important; background-size: 70px 70px !important; } /* ============================================================ DECORATIVE ORBIT ============================================================= */ .lalag-faq-orbit{ position:absolute !important; z-index:1 !important; width:620px !important; height:620px !important; left:-420px !important; top:180px !important; border-radius:50% !important; border: 1px solid rgba(216,180,91,.10) !important; pointer-events:none !important; animation: lalagFaqOrbit 30s linear infinite !important; } .lalag-faq-orbit:before{ content:"" !important; position:absolute !important; inset:90px !important; border-radius:50% !important; border: 1px solid rgba(216,180,91,.07) !important; } .lalag-faq-orbit:after{ content:"" !important; position:absolute !important; inset:190px !important; border-radius:50% !important; border: 1px solid rgba(216,180,91,.045) !important; } @keyframes lalagFaqOrbit{ to{ transform:rotate(360deg); } } /* ============================================================ CONTAINER ============================================================= */ .lalag-faq-container{ position:relative !important; z-index:5 !important; width:min(1240px,92%) !important; max-width:1240px !important; margin:0 auto !important; padding:0 !important; } /* ============================================================ HEADER ============================================================= */ .lalag-faq-header{ display:grid !important; grid-template-columns: minmax(0,1.08fr) minmax(300px,.72fr) !important; align-items:end !important; gap:70px !important; width:100% !important; margin: 0 0 58px !important; padding:0 !important; } /* ============================================================ SMALL LABEL ============================================================= */ .lalag-faq-label{ display:flex !important; align-items:center !important; gap:11px !important; width:max-content !important; max-width:100% !important; margin: 0 0 18px !important; padding:0 !important; color:#F2D784 !important; font-size:8px !important; font-weight:800 !important; line-height:1.3 !important; letter-spacing:2.2px !important; text-transform:uppercase !important; } .lalag-faq-label-line{ position:relative !important; display:block !important; width:39px !important; height:1px !important; flex: 0 0 39px !important; overflow:hidden !important; background: rgba(216,180,91,.28) !important; } .lalag-faq-label-line:after{ content:"" !important; position:absolute !important; top:0 !important; left:-100% !important; width:70% !important; height:100% !important; background: linear-gradient( 90deg, transparent, #F2D784, transparent ) !important; animation: lalagFaqLine 2.6s ease-in-out infinite !important; } @keyframes lalagFaqLine{ 0%{ left:-100%; } 65%, 100%{ left:120%; } } /* ============================================================ TITLE ============================================================= */ .lalag-faq .lalag-faq-title{ display:block !important; width:100% !important; max-width:790px !important; margin:0 !important; padding:0 !important; color:#FFFFFF !important; font-size: clamp( 42px, 4.9vw, 72px ) !important; font-weight:800 !important; line-height:.98 !important; letter-spacing:-3.4px !important; text-align:left !important; text-transform:uppercase !important; } /* ============================================================ GOLD TITLE ============================================================= */ .lalag-faq-title-gold{ display:block !important; margin: 8px 0 0 !important; padding:0 !important; color:transparent !important; background: linear-gradient( 100deg, #805719 0%, #D2A746 22%, #F7DE8F 42%, #FFF2B8 50%, #C89A3A 68%, #D8B45B 82%, #805719 100% ) !important; background-size: 230% auto !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; animation: lalagFaqGold 6s linear infinite !important; } @keyframes lalagFaqGold{ to{ background-position: 230% center; } } /* ============================================================ INTRO ============================================================= */ .lalag-faq .lalag-faq-intro{ width:100% !important; max-width:500px !important; margin: 0 0 5px auto !important; padding:0 !important; color: rgba(255,255,255,.52) !important; font-size:11.5px !important; font-weight:500 !important; line-height:1.9 !important; letter-spacing:0 !important; } .lalag-faq-intro strong{ color:#FFFFFF !important; font-weight:700 !important; } /* ============================================================ QUICK INFO STRIP ============================================================= */ .lalag-faq-quick{ display:grid !important; grid-template-columns: repeat( 4, minmax(0,1fr) ) !important; width:100% !important; margin: 0 0 20px !important; padding:0 !important; border: 1px solid rgba(216,180,91,.16) !important; background: rgba(255,255,255,.025) !important; } .lalag-faq-quick-item{ min-width:0 !important; min-height:83px !important; display:flex !important; align-items:center !important; justify-content:center !important; gap:11px !important; margin:0 !important; padding: 15px !important; } .lalag-faq-quick-item:not(:last-child){ border-right: 1px solid rgba(255,255,255,.07) !important; } /* QUICK ICON */ .lalag-faq-quick-icon{ width:38px !important; height:38px !important; flex: 0 0 38px !important; display:flex !important; align-items:center !important; justify-content:center !important; color:#090704 !important; background: linear-gradient( 135deg, #936720, #D5B055, #F2D784 ) !important; font-size:11px !important; } .lalag-faq-quick-icon i{ color:#090704 !important; font-size:11px !important; } /* QUICK COPY */ .lalag-faq-quick-copy strong{ display:block !important; margin:0 !important; color:#FFFFFF !important; font-size:7.5px !important; font-weight:800 !important; line-height:1.3 !important; } .lalag-faq-quick-copy span{ display:block !important; margin: 4px 0 0 !important; color: rgba(255,255,255,.34) !important; font-size:5.5px !important; font-weight:500 !important; line-height:1.4 !important; } /* ============================================================ MAIN FAQ LAYOUT ============================================================= */ .lalag-faq-layout{ display:grid !important; grid-template-columns: minmax(270px,.62fr) minmax(0,1.38fr) !important; gap:18px !important; align-items:start !important; width:100% !important; margin:0 !important; padding:0 !important; } /* ============================================================ SIDEBAR ============================================================= */ .lalag-faq-sidebar{ position:sticky !important; top:25px !important; min-width:0 !important; margin:0 !important; padding: 35px 31px !important; overflow:hidden !important; border: 1px solid rgba(216,180,91,.18) !important; background: linear-gradient( 145deg, rgba(216,180,91,.085), rgba(255,255,255,.022) ) !important; box-shadow: 0 22px 60px rgba(0,0,0,.18) !important; } .lalag-faq-sidebar:before{ content:"" !important; position:absolute !important; z-index:0 !important; width:320px !important; height:320px !important; left:-200px !important; bottom:-200px !important; border-radius:50% !important; background: radial-gradient( circle, rgba(216,180,91,.17), transparent 68% ) !important; } /* ============================================================ SIDEBAR ICON ============================================================= */ .lalag-faq-side-icon{ position:relative !important; z-index:2 !important; width:57px !important; height:57px !important; display:flex !important; align-items:center !important; justify-content:center !important; color:#090704 !important; background: linear-gradient( 135deg, #8A621E, #D8B45B, #F2D784 ) !important; box-shadow: 0 12px 30px rgba(200,154,58,.22) !important; font-size:18px !important; } .lalag-faq-side-icon i{ color:#090704 !important; font-size:18px !important; } /* ============================================================ SIDEBAR LABEL ============================================================= */ .lalag-faq-side-label{ position:relative !important; z-index:2 !important; display:block !important; margin: 29px 0 0 !important; color:#D8B45B !important; font-size:6.5px !important; font-weight:800 !important; line-height:1.3 !important; letter-spacing:1.7px !important; text-transform:uppercase !important; } /* ============================================================ SIDEBAR TITLE ============================================================= */ .lalag-faq .lalag-faq-side-title{ position:relative !important; z-index:2 !important; display:block !important; margin: 9px 0 0 !important; padding:0 !important; color:#FFFFFF !important; font-size: clamp( 23px, 2.4vw, 33px ) !important; font-weight:700 !important; line-height:1.18 !important; letter-spacing:-1px !important; } /* ============================================================ SIDEBAR TEXT ============================================================= */ .lalag-faq .lalag-faq-side-text{ position:relative !important; z-index:2 !important; margin: 17px 0 0 !important; padding:0 !important; color: rgba(255,255,255,.46) !important; font-size:9px !important; font-weight:500 !important; line-height:1.85 !important; } /* ============================================================ SIDEBAR ROUTE ============================================================= */ .lalag-faq-route{ position:relative !important; z-index:2 !important; width:100% !important; margin: 30px 0 0 !important; padding: 19px !important; border: 1px solid rgba(216,180,91,.16) !important; background: rgba(0,0,0,.20) !important; } .lalag-faq-route-label{ display:block !important; margin: 0 0 15px !important; color: rgba(255,255,255,.32) !important; font-size:5.7px !important; font-weight:800 !important; line-height:1.3 !important; letter-spacing:1.2px !important; text-transform:uppercase !important; } .lalag-faq-route-line{ display:flex !important; align-items:center !important; gap:10px !important; width:100% !important; } .lalag-faq-route-city{ display:block !important; flex:0 0 auto !important; color:#FFFFFF !important; font-size:8px !important; font-weight:800 !important; line-height:1.2 !important; white-space:nowrap !important; } .lalag-faq-route-city:last-child{ color:#F2D784 !important; } /* ============================================================ ROUTE TRACK ============================================================= */ .lalag-faq-track{ position:relative !important; display:block !important; flex:1 !important; min-width:20px !important; height:1px !important; overflow:hidden !important; background: rgba(255,255,255,.12) !important; } .lalag-faq-track:after{ content:"" !important; position:absolute !important; top:0 !important; left:-50px !important; width:45px !important; height:1px !important; background: linear-gradient( 90deg, transparent, #F2D784, transparent ) !important; animation: lalagFaqTrack 2.2s linear infinite !important; } @keyframes lalagFaqTrack{ to{ left:115%; } } /* ============================================================ SIDEBAR HELP ============================================================= */ .lalag-faq-help{ position:relative !important; z-index:2 !important; width:100% !important; margin: 27px 0 0 !important; padding: 24px 0 0 !important; border-top: 1px solid rgba(255,255,255,.08) !important; } .lalag-faq-help span{ display:block !important; margin:0 !important; color: rgba(255,255,255,.34) !important; font-size:6px !important; font-weight:700 !important; line-height:1.3 !important; letter-spacing:.9px !important; text-transform:uppercase !important; } .lalag-faq-help strong{ display:block !important; margin: 6px 0 0 !important; color:#FFFFFF !important; font-size:11px !important; font-weight:700 !important; line-height:1.45 !important; } /* ============================================================ FAQ LIST ============================================================= */ .lalag-faq-list{ display:flex !important; flex-direction:column !important; gap:9px !important; width:100% !important; margin:0 !important; padding:0 !important; } /* ============================================================ FAQ ITEM ============================================================= */ .lalag-faq-item{ position:relative !important; width:100% !important; margin:0 !important; overflow:hidden !important; border: 1px solid rgba(255,255,255,.09) !important; background: rgba(255,255,255,.025) !important; transition: border-color .35s ease, background .35s ease !important; } .lalag-faq-item:before{ content:"" !important; position:absolute !important; z-index:2 !important; left:0 !important; top:0 !important; width:2px !important; height:0 !important; background: linear-gradient( 180deg, #F2D784, #8A621E ) !important; transition: height .45s ease !important; } .lalag-faq-item.active{ border-color: rgba(216,180,91,.30) !important; background: linear-gradient( 135deg, rgba(216,180,91,.07), rgba(255,255,255,.025) ) !important; } .lalag-faq-item.active:before{ height:100% !important; } /* ============================================================ FAQ QUESTION BUTTON ============================================================= */ .lalag-faq .lalag-faq-question{ width:100% !important; min-height:84px !important; margin:0 !important; padding: 18px 21px !important; display:grid !important; grid-template-columns: auto minmax(0,1fr) auto !important; align-items:center !important; gap:15px !important; border:0 !important; border-radius:0 !important; outline:none !important; box-shadow:none !important; cursor:pointer !important; text-align:left !important; color:#FFFFFF !important; background: transparent !important; appearance:none !important; -webkit-appearance:none !important; } /* ============================================================ FAQ NUMBER ============================================================= */ .lalag-faq-number{ width:34px !important; height:34px !important; flex: 0 0 34px !important; display:flex !important; align-items:center !important; justify-content:center !important; margin:0 !important; border-radius:50% !important; color:#F2D784 !important; background: rgba(216,180,91,.075) !important; border: 1px solid rgba(216,180,91,.16) !important; font-size:6.5px !important; font-weight:800 !important; line-height:1 !important; } /* ============================================================ QUESTION TEXT ============================================================= */ .lalag-faq-question-text{ display:block !important; min-width:0 !important; margin:0 !important; color: rgba(255,255,255,.88) !important; font-size:10px !important; font-weight:700 !important; line-height:1.55 !important; letter-spacing:0 !important; } /* ============================================================ TOGGLE ICON ============================================================= */ .lalag-faq-toggle{ width:34px !important; height:34px !important; flex: 0 0 34px !important; display:flex !important; align-items:center !important; justify-content:center !important; margin:0 !important; border-radius:50% !important; color:#F2D784 !important; background: rgba(255,255,255,.035) !important; border: 1px solid rgba(255,255,255,.08) !important; font-size:9px !important; transition: transform .35s ease, color .35s ease, background .35s ease !important; } .lalag-faq-toggle i{ color:inherit !important; font-size:9px !important; } .lalag-faq-item.active .lalag-faq-toggle{ transform: rotate(45deg) !important; color:#080704 !important; background: linear-gradient( 135deg, #A97824, #F2D784 ) !important; border-color: transparent !important; } .lalag-faq-item.active .lalag-faq-toggle i{ color:#080704 !important; } /* ============================================================ FAQ ANSWER ============================================================= */ .lalag-faq-answer{ max-height:0; overflow:hidden !important; opacity:0; transition: max-height .45s ease, opacity .35s ease !important; } .lalag-faq-answer-inner{ margin:0 !important; padding: 0 70px 25px 70px !important; color: rgba(255,255,255,.50) !important; font-size:9px !important; font-weight:500 !important; line-height:1.9 !important; } .lalag-faq-answer-inner strong{ color: rgba(255,255,255,.88) !important; font-weight:700 !important; } .lalag-faq-item.active .lalag-faq-answer{ opacity:1 !important; } /* ============================================================ SEO SECTION ============================================================= */ .lalag-faq-seo{ display:grid !important; grid-template-columns: minmax(0,.7fr) minmax(0,1.3fr) !important; gap:55px !important; width:100% !important; margin: 62px 0 0 !important; padding: 50px 0 0 !important; border-top: 1px solid rgba(216,180,91,.15) !important; } .lalag-faq-seo-label{ display:block !important; margin:0 !important; color:#D8B45B !important; font-size:6.5px !important; font-weight:800 !important; line-height:1.3 !important; letter-spacing:1.8px !important; text-transform:uppercase !important; } .lalag-faq .lalag-faq-seo-title{ margin: 9px 0 0 !important; max-width:410px !important; color:#FFFFFF !important; font-size: clamp( 22px, 2.5vw, 34px ) !important; font-weight:700 !important; line-height:1.2 !important; letter-spacing:-1px !important; } .lalag-faq-seo-copy p{ margin: 0 0 14px !important; color: rgba(255,255,255,.45) !important; font-size:9.3px !important; font-weight:500 !important; line-height:1.9 !important; } .lalag-faq-seo-copy strong{ color: rgba(255,255,255,.90) !important; font-weight:700 !important; } /* ============================================================ FINAL CTA ============================================================= */ .lalag-faq-cta{ position:relative !important; display:flex !important; align-items:center !important; justify-content: space-between !important; gap:35px !important; width:100% !important; min-height:160px !important; margin: 48px 0 0 !important; padding: 35px 38px !important; overflow:hidden !important; border: 1px solid rgba(216,180,91,.26) !important; background: linear-gradient( 135deg, rgba(216,180,91,.10), rgba(255,255,255,.025) ) !important; } .lalag-faq-cta:before{ content:"" !important; position:absolute !important; width:350px !important; height:350px !important; right:-160px !important; top:-220px !important; border-radius:50% !important; background: radial-gradient( circle, rgba(216,180,91,.25), transparent 68% ) !important; } /* ============================================================ CTA COPY ============================================================= */ .lalag-faq-cta-copy{ position:relative !important; z-index:3 !important; min-width:0 !important; } .lalag-faq-cta-copy span{ display:block !important; margin: 0 0 8px !important; color:#D8B45B !important; font-size:6.5px !important; font-weight:800 !important; line-height:1.3 !important; letter-spacing:1.8px !important; text-transform:uppercase !important; } .lalag-faq-cta-copy strong{ display:block !important; max-width:690px !important; margin:0 !important; color:#FFFFFF !important; font-size: clamp( 20px, 2.3vw, 30px ) !important; font-weight:700 !important; line-height:1.3 !important; letter-spacing:-.8px !important; } /* ============================================================ WHATSAPP BUTTON ============================================================= */ .lalag-faq .lalag-faq-btn{ position:relative !important; z-index:4 !important; min-height:58px !important; padding: 0 27px !important; flex-shrink:0 !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:10px !important; overflow:hidden !important; border:0 !important; border-radius:0 !important; color:#090704 !important; background: linear-gradient( 115deg, #89631E, #C59434 20%, #F1D782 48%, #C89A3A 73%, #825F1D ) !important; box-shadow: 0 17px 40px rgba(200,154,58,.20) !important; font-size:8px !important; font-weight:800 !important; line-height:1 !important; letter-spacing:1px !important; text-transform:uppercase !important; white-space:nowrap !important; text-decoration:none !important; transition: transform .35s ease, box-shadow .35s ease !important; } /* BUTTON SHINE */ .lalag-faq-btn:before{ content:"" !important; position:absolute !important; z-index:1 !important; top:-80% !important; left:-45% !important; width:28% !important; height:270% !important; transform: rotate(20deg) !important; background: linear-gradient( 90deg, transparent, rgba(255,255,255,.58), transparent ) !important; animation: lalagFaqShine 4.5s ease-in-out infinite !important; } @keyframes lalagFaqShine{ 0%, 55%{ left:-45%; } 90%, 100%{ left:125%; } } .lalag-faq-btn:hover{ transform: translateY(-4px) !important; box-shadow: 0 23px 55px rgba(200,154,58,.32) !important; } .lalag-faq-btn i, .lalag-faq-btn span{ position:relative !important; z-index:3 !important; } .lalag-faq-btn i{ color:#090704 !important; font-size:17px !important; } .lalag-faq-btn span{ color:#090704 !important; font-size:8px !important; font-weight:800 !important; line-height:1 !important; letter-spacing:1px !important; } /* ============================================================ WHATSAPP ICON EXACT ============================================================= */ .lalag-faq .fa-brands.fa-whatsapp{ font-family: "Font Awesome 6 Brands" !important; font-weight:400 !important; font-style:normal !important; display:inline-block !important; visibility:visible !important; opacity:1 !important; } /* ============================================================ REVEAL ANIMATIONS ============================================================= */ .lalag-faq-header, .lalag-faq-quick, .lalag-faq-sidebar, .lalag-faq-list, .lalag-faq-seo, .lalag-faq-cta{ opacity:0; transform: translateY(28px); animation: lalagFaqReveal .85s cubic-bezier(.2,.7,.2,1) forwards; } .lalag-faq-header{ animation-delay:.05s; } .lalag-faq-quick{ animation-delay:.12s; } .lalag-faq-sidebar{ animation-delay:.20s; } .lalag-faq-list{ animation-delay:.27s; } .lalag-faq-seo{ animation-delay:.35s; } .lalag-faq-cta{ animation-delay:.42s; } @keyframes lalagFaqReveal{ to{ opacity:1; transform: translateY(0); } } /* ============================================================ LAPTOP ============================================================= */ @media(max-width:1180px){ .lalag-faq{ padding: 100px 0 85px !important; } .lalag-faq-container{ width: calc(100% - 50px) !important; } .lalag-faq-header{ gap: 45px !important; } .lalag-faq-title{ font-size: clamp( 40px, 5vw, 64px ) !important; } .lalag-faq-sidebar{ padding: 32px 27px !important; } } /* ============================================================ TABLET ============================================================= */ @media(max-width:900px){ .lalag-faq{ padding: 85px 0 70px !important; } .lalag-faq-header{ grid-template-columns: 1fr !important; align-items:start !important; gap: 25px !important; } .lalag-faq-intro{ max-width: 760px !important; margin: 0 !important; } .lalag-faq-layout{ grid-template-columns: 1fr !important; } .lalag-faq-sidebar{ position:relative !important; top:auto !important; } .lalag-faq-seo{ grid-template-columns: 1fr !important; gap: 25px !important; } } /* ============================================================ MOBILE ============================================================= */ @media(max-width:680px){ .lalag-faq{ padding: 70px 0 58px !important; } .lalag-faq-container{ width:100% !important; max-width:100% !important; padding: 0 18px !important; } /* HEADER */ .lalag-faq-header{ gap: 20px !important; margin-bottom: 36px !important; } .lalag-faq-label{ margin-bottom: 14px !important; font-size: 6.2px !important; letter-spacing: 1.4px !important; } .lalag-faq-label-line{ width: 27px !important; flex-basis: 27px !important; } .lalag-faq .lalag-faq-title{ font-size: clamp( 33px, 10vw, 45px ) !important; line-height: 1.01 !important; letter-spacing: -1.7px !important; } .lalag-faq .lalag-faq-intro{ max-width: 100% !important; font-size: 9.7px !important; line-height: 1.8 !important; } /* QUICK INFO */ .lalag-faq-quick{ grid-template-columns: repeat( 2, minmax(0,1fr) ) !important; } .lalag-faq-quick-item{ min-height: 76px !important; justify-content: flex-start !important; padding: 13px !important; } .lalag-faq-quick-item:nth-child(2){ border-right: 0 !important; } .lalag-faq-quick-item:nth-child(1), .lalag-faq-quick-item:nth-child(2){ border-bottom: 1px solid rgba(255,255,255,.07) !important; } .lalag-faq-quick-copy strong{ font-size: 6.7px !important; } .lalag-faq-quick-copy span{ font-size: 5px !important; } /* SIDEBAR */ .lalag-faq-sidebar{ padding: 27px 21px !important; } .lalag-faq-side-icon{ width: 51px !important; height: 51px !important; font-size: 16px !important; } .lalag-faq-side-icon i{ font-size: 16px !important; } .lalag-faq-side-label{ margin-top: 24px !important; font-size: 6px !important; } .lalag-faq .lalag-faq-side-title{ font-size: 24px !important; } .lalag-faq .lalag-faq-side-text{ font-size: 8.5px !important; line-height: 1.8 !important; } /* FAQ QUESTION */ .lalag-faq .lalag-faq-question{ min-height: 78px !important; padding: 16px 15px !important; gap: 10px !important; } .lalag-faq-number{ width: 30px !important; height: 30px !important; flex-basis: 30px !important; font-size: 6px !important; } .lalag-faq-question-text{ font-size: 8.7px !important; line-height: 1.55 !important; } .lalag-faq-toggle{ width: 30px !important; height: 30px !important; flex-basis: 30px !important; font-size: 8px !important; } .lalag-faq-toggle i{ font-size: 8px !important; } /* ANSWER */ .lalag-faq-answer-inner{ padding: 0 55px 21px 55px !important; font-size: 8.2px !important; line-height: 1.8 !important; } /* SEO */ .lalag-faq-seo{ margin-top: 44px !important; padding-top: 38px !important; gap: 20px !important; } .lalag-faq .lalag-faq-seo-title{ font-size: 23px !important; } .lalag-faq-seo-copy p{ font-size: 8.5px !important; } /* CTA */ .lalag-faq-cta{ margin-top: 35px !important; min-height: auto !important; padding: 27px 21px !important; flex-direction: column !important; align-items: flex-start !important; } .lalag-faq-cta-copy strong{ font-size: 20px !important; } .lalag-faq .lalag-faq-btn{ width: 100% !important; min-height: 55px !important; padding: 0 18px !important; } } /* ============================================================ SMALL PHONE ============================================================= */ @media(max-width:390px){ .lalag-faq-container{ padding: 0 15px !important; } .lalag-faq .lalag-faq-title{ font-size: 31px !important; letter-spacing: -1.4px !important; } .lalag-faq-answer-inner{ padding: 0 15px 20px 55px !important; } .lalag-faq-route{ padding: 16px !important; } .lalag-faq-route-city{ font-size: 7px !important; } } /* ============================================================ TOUCH DEVICES ============================================================= */ @media(hover:none){ .lalag-faq-btn:hover{ transform:none !important; } } /* ============================================================ REDUCED MOTION ============================================================= */ @media(prefers-reduced-motion:reduce){ .lalag-faq *, .lalag-faq *:before, .lalag-faq *:after{ animation:none !important; transition:none !important; } .lalag-faq-header, .lalag-faq-quick, .lalag-faq-sidebar, .lalag-faq-list, .lalag-faq-seo, .lalag-faq-cta{ opacity:1 !important; transform:none !important; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-4fb8527 *//* ============================================================ LALA G GROUP FINAL CTA + GOOGLE MAP LIGHT LUXURY VERSION ============================================================= */ @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&display=swap'); @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css'); /* ============================================================ MAIN SECTION ============================================================= */ .lalag-final, .lalag-final *{ box-sizing:border-box !important; } .lalag-final{ --lf-gold:#C89A3A; --lf-gold-dark:#8A621E; --lf-gold-rich:#D8B45B; --lf-gold-light:#F2D784; --lf-white:#FFFFFF; --lf-bg:#FAF8F3; --lf-bg-soft:#F5F0E7; --lf-text:#171717; --lf-muted:#77716A; --lf-border:#E8DFCF; position:relative !important; width:100% !important; padding:110px 0 0 !important; overflow:hidden !important; color:#171717 !important; background: radial-gradient( circle at 88% 8%, rgba(216,180,91,.15), transparent 24% ), radial-gradient( circle at 7% 90%, rgba(200,154,58,.09), transparent 28% ), linear-gradient( 135deg, #FFFFFF 0%, #FAF8F3 50%, #F6F1E8 100% ) !important; font-family: "Montserrat", Arial, sans-serif !important; } /* ============================================================ FONT LOCK ============================================================= */ .lalag-final h1, .lalag-final h2, .lalag-final h3, .lalag-final p, .lalag-final span, .lalag-final strong, .lalag-final small, .lalag-final a, .lalag-final div{ font-family: "Montserrat", Arial, sans-serif !important; } /* ============================================================ FONT AWESOME ============================================================= */ .lalag-final .fa-solid{ font-family:"Font Awesome 6 Free" !important; font-weight:900 !important; } .lalag-final .fa-regular{ font-family:"Font Awesome 6 Free" !important; font-weight:400 !important; } .lalag-final .fa-brands{ font-family:"Font Awesome 6 Brands" !important; font-weight:400 !important; } .lalag-final i{ font-style:normal !important; visibility:visible !important; } .lalag-final a{ text-decoration:none !important; } /* ============================================================ BACKGROUND GRID ============================================================= */ .lalag-final-grid{ position:absolute !important; inset:0 !important; opacity:.38 !important; pointer-events:none !important; background-image: linear-gradient( rgba(138,98,30,.04) 1px, transparent 1px ), linear-gradient( 90deg, rgba(138,98,30,.04) 1px, transparent 1px ) !important; background-size:70px 70px !important; } /* ============================================================ DECORATIVE ORBIT ============================================================= */ .lalag-final-orbit{ position:absolute !important; width:640px !important; height:640px !important; right:-420px !important; top:80px !important; border-radius:50% !important; border: 1px solid rgba(200,154,58,.14) !important; pointer-events:none !important; animation: lalagFinalOrbit 30s linear infinite !important; } .lalag-final-orbit:before{ content:""; position:absolute; inset:90px; border-radius:50%; border: 1px solid rgba(200,154,58,.10); } .lalag-final-orbit:after{ content:""; position:absolute; inset:190px; border-radius:50%; border: 1px solid rgba(200,154,58,.07); } @keyframes lalagFinalOrbit{ to{ transform:rotate(360deg); } } /* ============================================================ CONTAINER ============================================================= */ .lalag-final-container{ position:relative !important; z-index:4 !important; width:min(1240px,92%) !important; max-width:1240px !important; margin:0 auto !important; } /* ============================================================ HEADER ============================================================= */ .lalag-final-header{ display:grid !important; grid-template-columns: 1.08fr .72fr !important; align-items:end !important; gap:70px !important; margin-bottom:55px !important; } .lalag-final-label{ display:flex !important; align-items:center !important; gap:11px !important; margin-bottom:18px !important; color:#95691E !important; font-size:8px !important; font-weight:800 !important; letter-spacing:2.2px !important; text-transform:uppercase !important; } .lalag-final-label-line{ position:relative !important; width:39px !important; height:1px !important; overflow:hidden !important; background: rgba(200,154,58,.32) !important; } .lalag-final-label-line:after{ content:""; position:absolute; left:-100%; width:75%; height:100%; background: linear-gradient( 90deg, transparent, #C89A3A, transparent ); animation: lalagFinalLine 2.6s ease-in-out infinite; } @keyframes lalagFinalLine{ 0%{ left:-100%; } 65%, 100%{ left:120%; } } /* ============================================================ TITLE ============================================================= */ .lalag-final-title{ margin:0 !important; max-width:800px !important; color:#171717 !important; font-size: clamp(42px,4.9vw,72px) !important; font-weight:800 !important; line-height:.98 !important; letter-spacing:-3.4px !important; text-transform:uppercase !important; } .lalag-final-title-gold{ display:block !important; margin-top:8px !important; color:transparent !important; background: linear-gradient( 100deg, #795116, #B9872D 20%, #E1BF63 39%, #FFF2B7 50%, #C89A3A 67%, #8A621E 84%, #D8B45B ) !important; background-size:230% auto !important; -webkit-background-clip:text !important; background-clip:text !important; -webkit-text-fill-color:transparent !important; animation: lalagFinalGold 6s linear infinite !important; } @keyframes lalagFinalGold{ to{ background-position:230% center; } } .lalag-final-intro{ max-width:500px !important; margin:0 0 5px auto !important; color:#77716A !important; font-size:11.5px !important; font-weight:500 !important; line-height:1.9 !important; } .lalag-final-intro strong{ color:#222222 !important; } /* ============================================================ CONTACT + MAP ============================================================= */ .lalag-final-main{ display:grid !important; grid-template-columns: .82fr 1.18fr !important; min-height:570px !important; overflow:hidden !important; border: 1px solid #E4D9C7 !important; background:#FFFFFF !important; box-shadow: 0 28px 75px rgba(67,48,13,.10) !important; } /* ============================================================ CONTACT SIDE ============================================================= */ .lalag-final-contact{ position:relative !important; padding:42px 38px !important; overflow:hidden !important; background: linear-gradient( 145deg, #FFFFFF 0%, #FCF9F3 58%, #F6EFE3 100% ) !important; border-right: 1px solid #E8DFCF !important; } .lalag-final-contact:after{ content:""; position:absolute; width:340px; height:340px; left:-220px; bottom:-210px; border-radius:50%; background: radial-gradient( circle, rgba(216,180,91,.20), transparent 68% ); } .lalag-contact-mini{ position:relative; z-index:3; color:#9B6D20 !important; font-size:6.5px !important; font-weight:800 !important; letter-spacing:1.7px !important; text-transform:uppercase !important; } .lalag-contact-title{ position:relative; z-index:3; max-width:430px; margin:11px 0 0 !important; color:#171717 !important; font-size: clamp(25px,2.7vw,37px) !important; font-weight:750 !important; line-height:1.16 !important; letter-spacing:-1.2px !important; } .lalag-contact-text{ position:relative; z-index:3; max-width:430px; margin:16px 0 0 !important; color:#77716A !important; font-size:9.2px !important; font-weight:500 !important; line-height:1.8 !important; } /* ============================================================ ROUTE BOX ============================================================= */ .lalag-final-route{ position:relative; z-index:3; margin-top:28px !important; padding:18px !important; border: 1px solid rgba(200,154,58,.24) !important; background: #FFFCF6 !important; } .lalag-final-route-label{ display:flex !important; align-items:center !important; justify-content:space-between !important; margin-bottom:16px !important; } .lalag-final-route-label span{ color:#979087 !important; font-size:5.7px !important; font-weight:800 !important; letter-spacing:1.1px !important; text-transform:uppercase !important; } .lalag-final-route-label strong{ display:flex !important; align-items:center !important; gap:5px !important; color:#9D6B1B !important; font-size:5.5px !important; font-weight:800 !important; text-transform:uppercase !important; } .lalag-final-route-label strong i{ color:#C89A3A !important; font-size:5px !important; } .lalag-final-route-line{ display:flex !important; align-items:center !important; gap:11px !important; } .lalag-final-city{ color:#171717 !important; font-size:9px !important; font-weight:800 !important; white-space:nowrap !important; } .lalag-final-city:last-child{ color:#A57322 !important; } .lalag-final-track{ position:relative !important; flex:1 !important; height:1px !important; overflow:hidden !important; background: rgba(138,98,30,.18) !important; } .lalag-final-track:after{ content:""; position:absolute; left:-60px; width:55px; height:1px; background: linear-gradient( 90deg, transparent, #C89A3A, transparent ); animation: lalagFinalTrack 2.3s linear infinite; } @keyframes lalagFinalTrack{ to{ left:115%; } } /* ============================================================ LOCATION ============================================================= */ .lalag-final-location{ position:relative; z-index:3; margin-top:24px !important; display:flex !important; align-items:flex-start !important; gap:12px !important; padding-bottom:23px !important; border-bottom: 1px solid #EAE3D7 !important; } .lalag-final-location-icon{ width:39px !important; height:39px !important; flex:0 0 39px !important; display:flex !important; align-items:center !important; justify-content:center !important; color:#090704 !important; background: linear-gradient( 135deg, #987025, #D8B45B, #F2D784 ) !important; font-size:11px !important; } .lalag-final-location-copy span{ display:block !important; color:#9B948B !important; font-size:5.5px !important; font-weight:800 !important; letter-spacing:1.1px !important; text-transform:uppercase !important; } .lalag-final-location-copy strong{ display:block !important; margin-top:5px !important; color:#171717 !important; font-size:10px !important; font-weight:700 !important; } .lalag-final-location-copy small{ display:block !important; margin-top:4px !important; color:#8A847B !important; font-size:6px !important; line-height:1.5 !important; } /* ============================================================ PHONE ROWS ============================================================= */ .lalag-final-phones{ position:relative; z-index:3; display:grid !important; grid-template-columns:1fr !important; gap:8px !important; margin-top:22px !important; } .lalag-phone-row{ display:grid !important; grid-template-columns: 1fr auto auto !important; align-items:center !important; gap:7px !important; min-height:63px !important; padding:9px 9px 9px 15px !important; border: 1px solid #E8E0D3 !important; background:#FFFFFF !important; box-shadow: 0 8px 25px rgba(70,50,15,.04) !important; } .lalag-phone-number span{ display:block !important; color:#9C958C !important; font-size:5px !important; font-weight:800 !important; letter-spacing:1px !important; text-transform:uppercase !important; } .lalag-phone-number strong{ display:block !important; margin-top:5px !important; color:#171717 !important; font-size:10px !important; font-weight:800 !important; } /* ============================================================ CALL + WHATSAPP ICON BUTTONS ============================================================= */ .lalag-contact-action{ width:37px !important; height:37px !important; display:flex !important; align-items:center !important; justify-content:center !important; border: 1px solid rgba(200,154,58,.24) !important; color:#9C6B1D !important; background:#FFF9EC !important; font-size:11px !important; transition:.3s ease !important; } .lalag-contact-action:hover{ transform: translateY(-3px) !important; color:#090704 !important; background: linear-gradient( 135deg, #A67622, #F2D784 ) !important; } /* ============================================================ MAIN CTA ============================================================= */ .lalag-final-primary{ position:relative !important; z-index:3 !important; width:100% !important; min-height:57px !important; margin-top:13px !important; padding:0 20px !important; display:flex !important; align-items:center !important; justify-content:center !important; gap:10px !important; overflow:hidden !important; color:#090704 !important; background: linear-gradient( 115deg, #89631E, #C59434 20%, #F1D782 48%, #C89A3A 73%, #825F1D ) !important; box-shadow: 0 17px 40px rgba(200,154,58,.20) !important; font-size:8px !important; font-weight:800 !important; letter-spacing:1px !important; text-transform:uppercase !important; } .lalag-final-primary:before{ content:""; position:absolute; top:-80%; left:-45%; width:28%; height:270%; transform:rotate(20deg); background: linear-gradient( 90deg, transparent, rgba(255,255,255,.60), transparent ); animation: lalagFinalShine 4.5s ease-in-out infinite; } @keyframes lalagFinalShine{ 0%, 55%{ left:-45%; } 90%, 100%{ left:125%; } } .lalag-final-primary i, .lalag-final-primary span{ position:relative; z-index:3; color:#090704 !important; } .lalag-final-primary i{ font-size:17px !important; } /* ============================================================ MAP ============================================================= */ .lalag-final-map{ position:relative !important; min-height:570px !important; overflow:hidden !important; background:#F2EEE7 !important; } .lalag-final-map iframe{ position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; border:0 !important; } /* ============================================================ MAP BADGE ============================================================= */ .lalag-map-badge{ position:absolute !important; z-index:5 !important; left:22px !important; top:22px !important; max-width:300px !important; padding:15px 17px !important; background: rgba(255,255,255,.95) !important; border: 1px solid rgba(200,154,58,.30) !important; box-shadow: 0 15px 40px rgba(53,39,12,.12) !important; backdrop-filter: blur(14px) !important; } .lalag-map-badge span{ display:block !important; color:#A06F20 !important; font-size:5.5px !important; font-weight:800 !important; letter-spacing:1.2px !important; text-transform:uppercase !important; } .lalag-map-badge strong{ display:block !important; margin-top:5px !important; color:#171717 !important; font-size:11px !important; font-weight:700 !important; } .lalag-map-badge p{ margin:6px 0 0 !important; color:#77716A !important; font-size:6.3px !important; line-height:1.55 !important; } /* ============================================================ SERVICE STRIP ============================================================= */ .lalag-final-strip{ display:grid !important; grid-template-columns: repeat(4,1fr) !important; margin-top:18px !important; border: 1px solid #E8DFD0 !important; background:#FFFFFF !important; box-shadow: 0 12px 35px rgba(44,32,10,.04) !important; } .lalag-final-strip-item{ min-height:82px !important; padding:15px !important; display:flex !important; align-items:center !important; justify-content:center !important; gap:10px !important; } .lalag-final-strip-item:not(:last-child){ border-right: 1px solid #EAE3D8 !important; } .lalag-final-strip-item i{ color:#B47D26 !important; font-size:12px !important; } .lalag-final-strip-copy strong{ display:block !important; color:#171717 !important; font-size:7px !important; font-weight:700 !important; } .lalag-final-strip-copy span{ display:block !important; margin-top:4px !important; color:#918A81 !important; font-size:5.2px !important; line-height:1.4 !important; } /* ============================================================ BOTTOM FOOTER LINE ============================================================= */ .lalag-final-bottom{ margin-top:55px !important; padding:27px 0 !important; border-top: 1px solid #E8E0D4 !important; display:flex !important; align-items:center !important; justify-content:space-between !important; gap:30px !important; color:#999188 !important; font-size:5.7px !important; font-weight:600 !important; letter-spacing:.4px !important; } .lalag-final-bottom strong{ color:#4D4943 !important; font-weight:700 !important; } /* ============================================================ TABLET ============================================================= */ @media(max-width:1050px){ .lalag-final{ padding-top: 95px !important; } .lalag-final-header{ grid-template-columns: 1fr !important; gap: 25px !important; } .lalag-final-intro{ max-width: 760px !important; margin: 0 !important; } } /* ============================================================ MOBILE / TABLET MAP ============================================================= */ @media(max-width:800px){ .lalag-final-main{ grid-template-columns: 1fr !important; } .lalag-final-contact{ border-right: 0 !important; border-bottom: 1px solid #E8DFCF !important; } .lalag-final-map{ min-height: 430px !important; } } /* ============================================================ MOBILE ============================================================= */ @media(max-width:680px){ .lalag-final{ padding-top: 70px !important; } .lalag-final-container{ width: 100% !important; padding: 0 18px !important; } .lalag-final-header{ gap: 20px !important; margin-bottom: 35px !important; } .lalag-final-label{ margin-bottom: 14px !important; font-size: 6.2px !important; letter-spacing: 1.4px !important; } .lalag-final-label-line{ width: 27px !important; } .lalag-final-title{ font-size: clamp( 33px, 10vw, 45px ) !important; line-height: 1.01 !important; letter-spacing: -1.7px !important; } .lalag-final-intro{ font-size: 9.5px !important; line-height: 1.8 !important; } .lalag-final-contact{ padding: 29px 21px !important; } .lalag-contact-title{ font-size: 25px !important; } .lalag-contact-text{ font-size: 8.5px !important; } .lalag-final-map{ min-height: 370px !important; } .lalag-map-badge{ left: 15px !important; top: 15px !important; max-width: calc(100% - 30px) !important; } .lalag-final-strip{ grid-template-columns: repeat(2,1fr) !important; } .lalag-final-strip-item{ justify-content: flex-start !important; } .lalag-final-strip-item:nth-child(2){ border-right: 0 !important; } .lalag-final-strip-item:nth-child(1), .lalag-final-strip-item:nth-child(2){ border-bottom: 1px solid #EAE3D8 !important; } .lalag-final-bottom{ margin-top: 40px !important; flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; } } /* ============================================================ SMALL PHONE ============================================================= */ @media(max-width:390px){ .lalag-final-container{ padding: 0 15px !important; } .lalag-final-title{ font-size: 31px !important; } .lalag-contact-action{ width: 34px !important; height: 34px !important; } }/* End custom CSS */