.elementor-kit-7{--e-global-color-primary:#EF7622;--e-global-color-secondary:#FFCC33;--e-global-color-text:#000000;--e-global-color-accent:#EF7622;--e-global-color-023bcf3:#000000;--e-global-color-da93cd6:#79797A;--e-global-color-8f4596a:#FFFFFF;--e-global-color-3f4927e:#F3F3F4;--e-global-color-71c76c0:#CECECE;--e-global-color-17052e6:#FFF6EC;--e-global-color-dabf520:#FCFCFC;--e-global-typography-primary-font-family:"Avenir";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Avenir";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Helvetica";--e-global-typography-text-font-size:0.85em;--e-global-typography-text-font-weight:400;--e-global-typography-text-text-transform:none;--e-global-typography-text-font-style:normal;--e-global-typography-text-text-decoration:none;--e-global-typography-text-line-height:1.45em;--e-global-typography-text-letter-spacing:0.02em;--e-global-typography-accent-font-family:"Helvetica";--e-global-typography-accent-font-size:0.85em;--e-global-typography-accent-font-weight:500;--e-global-typography-accent-text-transform:none;--e-global-typography-accent-font-style:normal;--e-global-typography-accent-text-decoration:none;--e-global-typography-accent-line-height:1.45em;--e-global-typography-accent-letter-spacing:0.02em;--e-global-typography-2d6f356-font-family:"Avenir";--e-global-typography-2d6f356-font-size:2.5em;--e-global-typography-2d6f356-font-weight:600;--e-global-typography-2d6f356-text-transform:none;--e-global-typography-2d6f356-font-style:normal;--e-global-typography-2d6f356-text-decoration:none;--e-global-typography-2d6f356-line-height:1.1em;--e-global-typography-2d6f356-letter-spacing:0.02em;--e-global-typography-53a1edc-font-family:"Avenir";--e-global-typography-53a1edc-font-size:2.3em;--e-global-typography-53a1edc-font-weight:600;--e-global-typography-53a1edc-text-transform:none;--e-global-typography-53a1edc-font-style:normal;--e-global-typography-53a1edc-text-decoration:none;--e-global-typography-53a1edc-line-height:1.05em;--e-global-typography-53a1edc-letter-spacing:0.02em;--e-global-typography-11ef12d-font-family:"Avenir";--e-global-typography-11ef12d-font-size:1.75em;--e-global-typography-11ef12d-font-weight:600;--e-global-typography-11ef12d-text-transform:none;--e-global-typography-11ef12d-font-style:normal;--e-global-typography-11ef12d-text-decoration:none;--e-global-typography-11ef12d-line-height:1.3em;--e-global-typography-11ef12d-letter-spacing:0.01em;--e-global-typography-9bc19a6-font-family:"Avenir";--e-global-typography-9bc19a6-font-size:1.55em;--e-global-typography-9bc19a6-font-weight:500;--e-global-typography-9bc19a6-text-transform:none;--e-global-typography-9bc19a6-font-style:normal;--e-global-typography-9bc19a6-text-decoration:none;--e-global-typography-9bc19a6-line-height:1.5em;--e-global-typography-9bc19a6-letter-spacing:0.02em;--e-global-typography-3ef1b96-font-family:"Avenir";--e-global-typography-3ef1b96-font-size:1.05em;--e-global-typography-3ef1b96-font-weight:500;--e-global-typography-3ef1b96-text-transform:none;--e-global-typography-3ef1b96-font-style:normal;--e-global-typography-3ef1b96-text-decoration:none;--e-global-typography-3ef1b96-line-height:1.35em;--e-global-typography-3ef1b96-letter-spacing:0px;--e-global-typography-8b765cc-font-family:"Avenir";--e-global-typography-8b765cc-font-size:1.25em;--e-global-typography-8b765cc-font-weight:600;--e-global-typography-8b765cc-text-transform:none;--e-global-typography-8b765cc-font-style:normal;--e-global-typography-8b765cc-text-decoration:none;--e-global-typography-8b765cc-line-height:1.25em;--e-global-typography-8b765cc-letter-spacing:0em;--e-global-typography-28b7290-font-family:"Avenir";--e-global-typography-28b7290-font-size:1.125em;--e-global-typography-28b7290-font-weight:400;--e-global-typography-28b7290-text-transform:none;--e-global-typography-28b7290-font-style:normal;--e-global-typography-28b7290-text-decoration:none;--e-global-typography-28b7290-line-height:1.25em;--e-global-typography-28b7290-letter-spacing:0px;--e-global-typography-9f68927-font-family:"Avenir";--e-global-typography-9f68927-font-size:1.125em;--e-global-typography-9f68927-font-weight:600;--e-global-typography-9f68927-text-transform:none;--e-global-typography-9f68927-font-style:normal;--e-global-typography-9f68927-text-decoration:none;--e-global-typography-9f68927-line-height:1.3em;--e-global-typography-9f68927-letter-spacing:0em;--e-global-typography-6da587b-font-family:"Avenir";--e-global-typography-6da587b-font-size:2.5em;--e-global-typography-6da587b-font-weight:600;--e-global-typography-6da587b-text-transform:none;--e-global-typography-6da587b-font-style:normal;--e-global-typography-6da587b-text-decoration:none;--e-global-typography-6da587b-line-height:1.05em;--e-global-typography-6da587b-letter-spacing:0.02em;--e-global-typography-776c210-font-family:"Helvetica";--e-global-typography-776c210-font-size:0.7em;--e-global-typography-776c210-font-weight:400;--e-global-typography-776c210-text-transform:none;--e-global-typography-776c210-font-style:normal;--e-global-typography-776c210-text-decoration:none;--e-global-typography-776c210-line-height:1em;--e-global-typography-776c210-letter-spacing:0.02em;--e-global-typography-6620b4f-font-family:"Helvetica";--e-global-typography-6620b4f-font-size:0.85em;--e-global-typography-6620b4f-font-weight:400;--e-global-typography-6620b4f-text-transform:none;--e-global-typography-6620b4f-font-style:normal;--e-global-typography-6620b4f-text-decoration:none;--e-global-typography-6620b4f-line-height:1.45em;--e-global-typography-6620b4f-letter-spacing:0.02em;--e-global-typography-10970a0-font-family:"Helvetica";--e-global-typography-10970a0-font-size:0.8em;--e-global-typography-10970a0-font-weight:400;--e-global-typography-10970a0-text-transform:none;--e-global-typography-10970a0-font-style:normal;--e-global-typography-10970a0-text-decoration:none;--e-global-typography-10970a0-line-height:1.5em;--e-global-typography-10970a0-letter-spacing:0.02em;--e-global-typography-70c57e6-font-family:"Helvetica";--e-global-typography-70c57e6-font-size:0.85em;--e-global-typography-70c57e6-font-weight:500;--e-global-typography-70c57e6-text-transform:none;--e-global-typography-70c57e6-font-style:normal;--e-global-typography-70c57e6-text-decoration:none;--e-global-typography-70c57e6-line-height:1.45em;--e-global-typography-70c57e6-letter-spacing:0.02em;--e-global-typography-631a6b5-font-family:"Helvetica";--e-global-typography-631a6b5-font-size:1.1em;--e-global-typography-631a6b5-font-weight:400;--e-global-typography-631a6b5-text-transform:none;--e-global-typography-631a6b5-font-style:normal;--e-global-typography-631a6b5-text-decoration:none;--e-global-typography-631a6b5-line-height:1.05em;--e-global-typography-631a6b5-letter-spacing:0em;--e-global-typography-59eaa6a-font-family:"Avenir";--e-global-typography-59eaa6a-font-size:1.375em;--e-global-typography-59eaa6a-font-weight:400;--e-global-typography-59eaa6a-line-height:1.375em;--e-global-typography-cee2200-font-family:"Avenir";--e-global-typography-cee2200-font-size:1.125em;--e-global-typography-cee2200-font-weight:400;--e-global-typography-cee2200-text-transform:none;--e-global-typography-cee2200-font-style:normal;--e-global-typography-cee2200-text-decoration:none;--e-global-typography-cee2200-line-height:1.4em;--e-global-typography-cee2200-letter-spacing:0.02em;--e-global-typography-57a3bed-font-family:"Avenir";--e-global-typography-57a3bed-font-size:1.3em;--e-global-typography-57a3bed-font-weight:600;--e-global-typography-57a3bed-text-transform:none;--e-global-typography-57a3bed-font-style:normal;--e-global-typography-57a3bed-line-height:1.3em;--e-global-typography-fbd303d-font-family:"Avenir";--e-global-typography-fbd303d-font-size:1.55em;--e-global-typography-fbd303d-font-weight:600;--e-global-typography-fbd303d-text-transform:capitalize;--e-global-typography-fbd303d-line-height:1.3em;--e-global-typography-fbd303d-letter-spacing:0.02em;--e-global-typography-2ed917d-font-family:"Avenir";--e-global-typography-2ed917d-font-size:1em;--e-global-typography-2ed917d-font-weight:400;--e-global-typography-2ed917d-text-transform:none;--e-global-typography-2ed917d-font-style:normal;--e-global-typography-2ed917d-text-decoration:none;--e-global-typography-2ed917d-line-height:1.4em;--e-global-typography-2ed917d-letter-spacing:0.02em;font-family:"Poppins", Sans-serif;font-size:18px;}.elementor-kit-7 e-page-transition{background-color:#FFBC7D;}.elementor-kit-7 a{color:var( --e-global-color-primary );font-family:"Poppins", Sans-serif;}.elementor-kit-7 a:hover{color:var( --e-global-color-secondary );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){margin-block-end:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-kit-7{--e-global-typography-2d6f356-font-size:2em;--e-global-typography-53a1edc-font-size:1.8em;--e-global-typography-11ef12d-line-height:1.3em;--e-global-typography-9bc19a6-line-height:1.3em;--e-global-typography-2ed917d-font-size:0.95em;--e-global-typography-2ed917d-line-height:1.3em;--e-global-typography-2ed917d-letter-spacing:0.01em;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-7{--e-global-typography-2d6f356-font-size:1.8em;--e-global-typography-53a1edc-font-size:1.6em;--e-global-typography-11ef12d-font-size:1.6em;--e-global-typography-11ef12d-line-height:1.2em;--e-global-typography-11ef12d-letter-spacing:0.01em;--e-global-typography-9bc19a6-font-size:1.5em;--e-global-typography-9bc19a6-line-height:1.15em;--e-global-typography-3ef1b96-font-size:1.1em;--e-global-typography-fbd303d-font-size:1.25em;--e-global-typography-2ed917d-font-size:1em;--e-global-typography-2ed917d-line-height:1.3em;--e-global-typography-2ed917d-letter-spacing:0.01em;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//***Overflow Content Issue***/ @media (max-width: 1060px) { main#content { overflow: hidden; } } /************************** Arrow button animattion **************************/ .arrow-btn .elementor-button-icon { position: relative; display: inline-block; overflow: hidden; width: 1em; height: 1em; } /* Slide existing arrow out on hover */ .arrow-btn .elementor-button-icon > * { position: absolute; top: 65%; left: 0; transform: translate(0, -50%); transition: transform 0.3s ease; } /* New arrow slides in with gap */ .arrow-btn .elementor-button-icon::after { font-family: "elementskit"; /* Add a space after the codepoint */ content: "\e9c5 "; /* rest of your styles */ position: absolute; top: 65%; left: 0; transform: translate(-130%, -50%); transition: transform 0.3s ease; } /* Hover animation: old arrow out, new arrow in */ .arrow-btn:hover .elementor-button-icon > *, .arrow-btn:focus .elementor-button-icon > * { transform: translate(100%, -50%); } .arrow-btn:hover .elementor-button-icon::after, .arrow-btn:focus .elementor-button-icon::after { transform: translate(0, -50%); } /************************** Carousel Set B Style **************************/ /* Hide content by default */ .carousel-b .e-con-full.carousel-content.e-flex.e-con.e-child{ display: none; } /* Allow overflow so auto-width slides can peek */ .carousel-b .elementor-loop-container{ overflow-y: visible !important; } /* Base slide styling */ .carousel-b .swiper-slide { /* slower, smoother transition */ transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); /* (keep box-shadow, border-radius, overflow:hidden as before) */ box-shadow: none; border-radius: 30px; overflow: hidden; /* start slightly scaled down */ transform: scale(0.95); will-change: transform, width; } /* Active slide styling (large) */ .carousel-b .swiper-slide.swiper-slide-active { width: 70rem !important; /* adjust as needed for your design */ height: auto !important; transform: scale(1) translateY(0px); transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); } /* Show content on active */ .carousel-b .swiper-slide.swiper-slide-active .e-con-full.carousel-content.e-flex.e-con.e-child { display: block; z-index: 10; position: relative; background: rgba(255,255,255,0.95); padding: 1.5rem; border-radius: 25px; overflow: auto; } /* Second slide (small thumbnail) */ .carousel-b .swiper-slide.swiper-slide-next{ width: 20rem !important; height: 20rem !important; transform: scale(0.95) translateY(0); transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); } /* Custom pagination styling */ .carousel-b .swiper-pagination-fraction { position: absolute; bottom: 16px; right: 16px; font-size: 0.9rem; color: #000; display: flex; align-items: center; } .carousel-b .swiper-pagination-fraction.swiper-pagination-horizontal { margin: 0 4px; opacity: 0.6; } /* Style both left and right arrow icons in carousel buttons */ .carousel-b .elementor-swiper-button-prev .icon-arrow-left, .elementor-swiper-button-next .icon-arrow-right { color: #000 !important; font-size: 30px ; } /* Hide scrollbar but allow scrolling if needed (optional) */ .carousel-b .swiper-slide.swiper-slide-active .e-con-full.carousel-content.e-flex.e-con.e-child { overflow: auto; /* or as you already have */ scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* IE 10+ */ } .carousel-b .swiper-slide.swiper-slide-active .e-con-full.carousel-content.e-flex.e-con.e-child::-webkit-scrollbar { display: none; /* Safari/WebKit */ } /* Hide the slash by zeroing out text in the pagination container */ .carousel-b .swiper-pagination { font-size: 0px !important; } /* Restore font-size for the number spans */ .carousel-b .swiper-pagination .swiper-pagination-current, .carousel-b .swiper-pagination .swiper-pagination-total { font-size: 1.4rem; /* or your desired size */ } .carousel-b .swiper-pagination .swiper-pagination-current{ color: black !important; } /* Insert “ - ” after the current number */ .carousel-b .swiper-pagination .swiper-pagination-current::after { content: " - "; } /* --- Gradients only on very large screens, gradient sits above slides but behind pagination/nav --- */ @media (min-width: 1580px) { .carousel-b { position: relative; /* ensure proper stacking */ --carousel-fade-width: 120px; /* tweak as needed */ } /* ensure slides sit below the gradient */ .carousel-b .swiper-slide { position: relative; z-index: 10; /* slides below the gradient */ } /* gradient pseudo-elements sit above slides but below pagination/nav */ .carousel-b::before, .carousel-b::after { content: ""; position: absolute; top: 0; bottom:150px; width: var(--carousel-fade-width); pointer-events: none; /* don't block clicks */ z-index: 20; /* above slides (10) but below pagination/nav (40/50) */ } .carousel-b::before { left: 0; background: linear-gradient(to right, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); } .carousel-b::after { right: 0; background: linear-gradient(to left, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); } /* make sure pagination and nav float above the gradient */ .carousel-b .swiper-pagination, .carousel-b .swiper-pagination-fraction { z-index: 40 !important; } .carousel-b .elementor-swiper-button-prev, .carousel-b .elementor-swiper-button-next { position: relative; z-index: 50; } } /* --- Force 2-up slide layout between 768px and 1287px --- */ @media (min-width: 768px) and (max-width: 1287px) { /* Active slide styling (large) */ .carousel-b .swiper-slide.swiper-slide-active { width: 50rem !important; /* adjust as needed for your design */ height: auto !important; transform: scale(1) translateY(0px); transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); } } /************************** Carousel Set B (Mobile) Style **************************/ /* Hide content by default */ .carousel-b-m .e-con-full.carousel-content.e-flex.e-con.e-child{ display: none; } /* Show content on active */ .carousel-b-m .swiper-slide.swiper-slide-active .e-con-full.carousel-content.e-flex.e-con.e-child { display: block; z-index: 10; position: relative; background: rgba(255,255,255,0.95); padding: 1.5rem; border-radius: 8px; overflow: auto; } .carousel-b-m .swiper-slide.swiper-slide-active .e-con-full.carousel-content.e-flex.e-con.e-child::-webkit-scrollbar { display: none; /* Safari/WebKit */ } /************************** Carousel Set F Style **************************/ /* Hide content by default */ .carousel-f .e-con-full.carousel-content.e-flex.e-con.e-child{ display: none; } /* Allow overflow so auto-width slides can peek */ .carousel-f .elementor-loop-container{ overflow-y: visible !important; } /* Base slide styling */ .carousel-f .swiper-slide { height: 25rem !important; /* slower, smoother transition */ transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); /* (keep box-shadow, border-radius, overflow:hidden as before) */ box-shadow: none; border-radius: 25px; overflow: hidden; /* start slightly scaled down */ transform: scale(0.95); will-change: transform, width; } /* Active slide styling (large) */ .carousel-f .swiper-slide.swiper-slide-active { width: 65rem !important; /* adjust as needed for your design */ height: 25rem !important; transform: scale(1) translateY(-10px); transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); } /* Show content on active */ .carousel-f .swiper-slide.swiper-slide-active .e-con-full.carousel-content.e-flex.e-con.e-child { display: block; z-index: 10; position: relative; background: rgba(255,255,255,0.95); padding: 1.5rem; border-radius: 25px; overflow: auto; } /* Second slide (small thumbnail) */ .carousel-f .swiper-slide.swiper-slide-next{ width: 30rem !important; height: 45rem !important; transform: scale(1) translateY(-10); transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); } /* Custom pagination styling */ .carousel-f .swiper-pagination-fraction { position: absolute; bottom: 16px; right: 16px; font-size: 0.9rem; color: #000; display: flex; align-items: center; } .carousel-f .swiper-pagination-fraction.swiper-pagination-horizontal { margin: 0 4px; opacity: 0.6; } /* Style both left and right arrow icons in carousel buttons */ .carousel-f .elementor-swiper-button-prev .icon-arrow-left, .elementor-swiper-button-next .icon-arrow-right { color: #000 !important; /* Replace with your desired color */ } /* Hide scrollbar but allow scrolling if needed (optional) */ .carousel-f .swiper-slide.swiper-slide-active .e-con-full.carousel-content.e-flex.e-con.e-child { overflow: auto; /* or as you already have */ scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* IE 10+ */ } .carousel-f .swiper-slide.swiper-slide-active .e-con-full.carousel-content.e-flex.e-con.e-child::-webkit-scrollbar { display: none; /* Safari/WebKit */ } /* Hide the slash by zeroing out text in the pagination container */ .carousel-f .swiper-pagination { font-size: 0px !important; } /* Restore font-size for the number spans */ .carousel-f .swiper-pagination .swiper-pagination-current, .carousel-f .swiper-pagination .swiper-pagination-total { font-size: 1.4rem; /* or your desired size */ } .carousel-f .swiper-pagination .swiper-pagination-current{ color: black !important; } /* Insert “ - ” after the current number */ .carousel-f .swiper-pagination .swiper-pagination-current::after { content: " - "; } /************************** Carousel Set F (Mobile) Style **************************/ /* Hide content by default */ .carousel-f-m .e-con-full.carousel-content.e-flex.e-con.e-child{ display: none; } /* Show content on active */ .carousel-f-m .swiper-slide.swiper-slide-active .e-con-full.carousel-content.e-flex.e-con.e-child { display: block; z-index: 10; position: relative; background: rgba(255,255,255,0.95); padding: 1.5rem; border-radius: 8px; overflow: auto; } .carousel-f-m .swiper-slide.swiper-slide-active .e-con-full.carousel-content.e-flex.e-con.e-child::-webkit-scrollbar { display: none; /* Safari/WebKit */ } /* Style both left and right arrow icons in carousel buttons */ .carousel-f-m .elementor-swiper-button-prev .icon-arrow-left, .elementor-swiper-button-next .icon-arrow-right { color: #000 !important; /* Replace with your desired color */ } /************************** Tab Style **************************/ .media-tab .e-n-tabs-heading { background-color: #F2F2F2; } /* Reset any default styling */ .media-tab .e-n-tab-title { border: none; box-shadow: none; } /* Style the active tab heading via aria-selected */ .media-tab .e-n-tab-title[aria-selected="true"][tabindex="0"] { border-bottom: 3px solid #ef7622 !important; } /* Optional: Smooth transition effect */ .media-tab .e-n-tab-title { transition: border-color 0.3s ease, color 0.3s ease; } @media (max-width: 767px) { /* 1. Force the tab-heading bar to stay as a horizontal flex row, swipeable */ .media-tab .elementor-tabs-wrapper, .media-tab .e-n-tabs-heading { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; justify-content: flex-start !important; /* Optional: use scroll-snap so tabs “snap” neatly */ scroll-snap-type: x mandatory !important; } /* 2. Hide the mobile-accordion headings that Elementor injects */ .media-tab .elementor-tab-mobile-title, .media-tab .e-n-tabs .elementor-tab-mobile-title { display: none !important; } /* 3. Style each tab title so they don’t squish and snap aligns start */ .media-tab .elementor-tab-title, .media-tab .e-n-tab-title { flex: 0 0 auto !important; white-space: nowrap !important; padding: 15px 35px !important; position: relative !important; scroll-snap-align: start !important; } /* 4. Underline indicator for the active tab */ .media-tab .elementor-tab-title.elementor-active::after, .media-tab .e-n-tab-title.elementor-active::after { content: "" !important; position: absolute !important; bottom: 0 !important; left: 20% !important; width: 80% !important; height: 3px !important; background-color: #ff6a00 !important; /* adjust color as needed */ } /* 5. Hide scrollbars for cleaner look */ .media-tab .elementor-tabs-wrapper::-webkit-scrollbar, .media-tab .e-n-tabs-heading::-webkit-scrollbar { display: none !important; } .media-tab .elementor-tabs-wrapper, .media-tab .e-n-tabs-heading { -ms-overflow-style: none !important; scrollbar-width: none !important; } } /* Reset all items */ .ue-content-carousel .owl-item { background: transparent !important; transition: background 0.3s ease; } /* Apply background only to the center item */ .ue-content-carousel .owl-item.center { background: #ef7622 !important; /* orange frame */ border-radius: 20px; padding: 4px; /* controls spacing now */ box-sizing: border-box; /* makes padding behave properly */ } .ue-content-carousel .owl-item.center .ue-item { width: 100%; height: 100%; border-radius: 16px; /* keep inner rounded edges */ } /* style the button directly as a rectangle and hide the inner span */ #uc_content_carousel_new_elementor_ceb4a9b .owl-dots .owl-dot { display: inline-block !important; width: 40px !important; height: 8px !important; margin: 0 6px !important; /* space between rectangles */ padding: 0 !important; border: none !important; background: #cccccc !important; border-radius: 0 !important; box-sizing: border-box !important; } /* hide the inner span so it doesn't conflict */ #uc_content_carousel_new_elementor_ceb4a9b .owl-dots .owl-dot span { display: none !important; } /* active */ #uc_content_carousel_new_elementor_ceb4a9b .owl-dots .owl-dot.active { background: #ff6600 !important; width: 48px !important; } /* Main Menu Map Icon */ .map-wrapper { position: relative; display: inline-block; max-width: 100%; } .map-wrapper img { width: 100%; height: auto; display: block; border-radius: 40px; /* rounded map corners */ } /* Hotspot container */ .hotspot { position: absolute; display: flex; align-items: center; gap: 6px; transform: translate(-50%, -100%); white-space: nowrap; } .hotspot.reverse { flex-direction: row-reverse; text-align: right; } /* Pin */ .pin { position: relative; width: 28px; height: 28px; background: #fff; border-radius: 50%; border: 2px solid #fff; display: flex; justify-content: center; align-items: center; } .pin::after { content: ""; position: absolute; bottom: -7px; left: 50%; transform: translateX(-50%); border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 8px solid #fff; } .pin img { width: 16px; height: 16px; border-radius: 50%; } /* Label - hidden by default */ .hotspot span { background: #fff; padding: 2px 6px; border-radius: 10px; font-size: 12px; box-shadow: 0 2px 6px rgba(0,0,0,0.2); opacity: 0; /* invisible */ visibility: hidden; /* not interactable */ transform: translateY(-4px); /* slightly up */ transition: opacity 0.2s ease, transform 0.2s ease; } /* Label - visible on hover */ .hotspot:hover span { opacity: 1; visibility: visible; transform: translateY(0); /* slide into place */ } /* For old structure (p[company]) */ p[company] { cursor: pointer; transition: all 0.15s ease; } p[company]:hover { color: #000; font-weight: bold; } /* For new structure (div[company] with child text) */ div[company] { cursor: pointer; transition: all 0.15s ease; } div[company]:hover { color: #000; font-weight: bold; } /* Infinite radar animation */ @keyframes blink { 0% { box-shadow: 0 0 0 0px rgba(193,245,240,0.7), 0 0 0 20px rgba(193,245,240,0.5), 0 0 0 40px rgba(193,245,240,0.3); } 100% { box-shadow: 0 0 0 20px rgba(193,245,240,0.5), 0 0 0 40px rgba(193,245,240,0.3), 0 0 0 60px rgba(193,245,240,0); } } /* Last wave fade out */ @keyframes blink-fadeout { 0% { box-shadow: 0 0 0 0px rgba(193,245,240,0.7), 0 0 0 20px rgba(193,245,240,0.5), 0 0 0 40px rgba(193,245,240,0.3); } 100% { box-shadow: 0 0 0 20px rgba(193,245,240,0), 0 0 0 40px rgba(193,245,240,0), 0 0 0 60px rgba(193,245,240,0); } } .hotspot .pin::before { content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; box-shadow: none; } /* Infinite waves while hovering */ .hotspot.blink .pin::before { animation: blink 2s infinite linear; } /* Fade out after hover ends */ .hotspot.lastwave .pin::before { animation: blink-fadeout 2s 1 linear forwards; } /* Responsive */ @media (max-width: 1024px) { .hotspot span { font-size: 10px; padding: 1px 3px; } .pin { width: 16px; height: 16px; } .pin img { width: 10px; height: 10px; } .pin::after { bottom: -5px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid #fff; } } /* Tablet screens (≤768px) */ @media (max-width: 768px) { .hotspot span { font-size: 8px; padding: 1px 2px; } .pin { width: 14px; height: 14px; } .pin img { width: 8px; height: 8px; } .pin::after { bottom: -4px; border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 3px solid #fff; } } /* When entering the visible area */ .swiper-slide.swiper-slide-visible { opacity: 1; transform: translateX(0); } /* All owl dots everywhere (desktop + mobile + tablet) */ .owl-dots .owl-dot { display: inline-block !important; width: 40px !important; /* rectangle width */ height: 2px !important; /* rectangle height */ margin: 0 6px !important; padding: 0 !important; border: none !important; background: #cccccc !important; border-radius: 0 !important; /* makes them rectangles */ box-sizing: border-box !important; } /* Hide inner span so it doesn't override */ .owl-dots .owl-dot span { display: none !important; } /* Active dot styling */ .owl-dots .owl-dot.active { background: #ff6600 !important; width: 48px !important; /* optional: make active one wider */ } /* Reset all items */ .ue-content-carousel .owl-item { background: transparent !important; transition: background 0.3s ease; } /* Apply background only to the center item */ .ue-content-carousel .owl-item.center { background: #ef7622 !important; /* change to your desired color */ border-radius: 20px; /* optional */ padding: 10px; /* optional */ } /* Carousel for Capability Test */ .elementor-image-carousel .swiper-slide { width: 600px; height: 450px; display: flex; align-items: center; justify-content: center; } /* Center the whole carousel inside its container */ .elementor-element-b65c591 .elementor-image-carousel-wrapper { display: flex; justify-content: center; } .elementor-element-b65c591 .swiper-slide { flex: 0 0 100% !important; /* each slide takes 100% of carousel width */ max-width: 100% !important; } /*Post Layout Structure*/ .innerpost p{ margin-bottom: 2em; line-height: 1.45em; } .innerpost img{ border: none; border-radius: 25px!important; margin-bottom: 2em; } .innerpost h2{ font-family: Avenir; font-size: 1.75em; line-height: 1.4em; font-weight: 600; } .wp-element-caption { font-size: 14px; font-weight: 300; margin-top: -0.8em; margin-bottom: 2em; text-align: center; } .wp-block-list { margin-bottom: 1.8em; } /**Border radius effect when hover**/ @keyframes radius-shrink { from { border-radius: 20px; } to { border-radius: 30px; } } @keyframes radius-expand { from { border-radius: 30px; } to { border-radius: 20px; } } .border-radius-hover-eff{ display: flex; border-radius: 20px; } /* on hover start the shrink animation */ .border-radius-hover-eff:hover { animation: radius-shrink 350ms forwards ease; } /* when hover ends play the reverse animation (optional; transitions handle this automatically) */ .border-radius-hover-eff:not(:hover) { animation: radius-expand 350ms forwards ease; } /*Image Hover for Image Box Style - Start Here*/ .elementor-image-box-img { overflow: hidden; /* hide parts of image that overflow */ position: relative; border-radius: 25px; } /* Image inside wrapper */ .elementor-image-box-img img { display: block; width: 100%; height: auto; transition: transform 0.4s ease; } /* Hover effect: scale image on hover of wrapper or image itself */ .elementor-image-box-img:hover img { transform: scale(1.1); } /*Image Hover for Image Box Style - End Here*/ /*Image Hover for Side Image Style - Start Here*/ /* 1. Ensure the wrapper/container clips overflow and has rounding */ #side-img .elementor-widget-container { border-radius: 25px !important; /* ensures rounding */ overflow: hidden !important; /* clips overflow */ position: relative; /* for stacking context */ } /* 2. Style the image */ #side-img .elementor-widget-container img.attachment-full.size-full { display: block; width: 100%; height: auto; transition: transform 0.4s ease; /* optionally also include rounding to match the wrapper */ border-radius: 25px; } /* 3. Hover — scale the image (not the container) */ #side-img .elementor-widget-container:hover img.attachment-full.size-full { transform: scale(1.1); } /**Global Network**/ .hotspot-text{ font-family: Helvetica; font-size: 1em; line-height: 1.25em; color: #000000; } /* airport-trigger — scale slightly and bold on hover/focus */ .airport-trigger { display: inline-block; font-weight: 400; transition: transform 180ms cubic-bezier(.2,.8,.2,1), font-weight 120ms linear; transform-origin: center center; will-change: transform, font-weight; cursor: pointer; /* <— pointer cursor */ pointer-events: auto; /* <— allows click/hover */ -webkit-tap-highlight-color: transparent; } .airport-trigger:hover, .airport-trigger:focus, .airport-trigger:focus-visible { font-weight: 700; outline: none; } .airport-trigger:focus-visible { box-shadow: 0 0 0 3px rgba(0,123,255,0.18); border-radius: 4px; } @media (prefers-reduced-motion: reduce) { .airport-trigger { transition: none; transform: none; } } /*Image Carousel Dot*/ /* --------------------------- SMALL DESKTOP (1025px – 1199px) ---------------------------- */ @media (max-width: 1229px) and (min-width: 1025px) { .swiper-horizontal > .swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction { padding-bottom: 50px !important; bottom:0px; } } /* --------------------------- NORMAL DESKTOP (1200px – 1599px) ---------------------------- */ @media (max-width: 1599px) and (min-width: 1230px) { .swiper-horizontal > .swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction { padding-bottom: 50px !important; bottom:0px; } } /* --------------------------- BIG SCREEN DESKTOP (1600px+) ---------------------------- */ @media (min-width: 1600px) { .swiper-horizontal > .swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction { padding-bottom: 0px !important; bottom:0px; } } .elementor-widget-container p[company] { font-family: "Avenir", Helvetica, Arial, sans-serif; /* Optional: Add a fallback for browsers that don't have Avenir */ } .airport-trigger[company] { font-family: "Avenir", Helvetica, Arial, sans-serif; /* This targets all the 3-letter airport codes */ } /* OPTIONAL: To ensure the country names (Malaysia, Nepal, etc.) are also in Avenir */ .elementor-widget-container div p { font-family: "Avenir", Helvetica, Arial, sans-serif; }/* End custom CSS */ /* Start Custom Fonts CSS */@font-face { font-family: 'Avenir'; font-style: normal; font-weight: normal; font-display: auto; src: url('https://dviation-dev112.wddworks.my/wp-content/uploads/2025/11/Avenir-Roman.eot'); src: url('https://dviation-dev112.wddworks.my/wp-content/uploads/2025/11/Avenir-Roman.eot?#iefix') format('embedded-opentype'), url('https://dviation-dev112.wddworks.my/wp-content/uploads/2025/11/Avenir-Roman.woff2') format('woff2'), url('https://dviation-dev112.wddworks.my/wp-content/uploads/2025/11/Avenir-Roman.woff') format('woff'), url('https://dviation-dev112.wddworks.my/wp-content/uploads/2025/11/Avenir-Regular.ttf') format('truetype'); } @font-face { font-family: 'Avenir'; font-style: normal; font-weight: 900; font-display: auto; src: url('https://dviation-dev112.wddworks.my/wp-content/uploads/2025/11/Avenir-Black.eot'); src: url('https://dviation-dev112.wddworks.my/wp-content/uploads/2025/11/Avenir-Black.eot?#iefix') format('embedded-opentype'), url('https://dviation-dev112.wddworks.my/wp-content/uploads/2025/11/Avenir-Black.woff2') format('woff2'), url('https://dviation-dev112.wddworks.my/wp-content/uploads/2025/11/Avenir-Black.woff') format('woff'), url('https://dviation-dev112.wddworks.my/wp-content/uploads/2025/11/Avenir-Black.ttf') format('truetype'); } @font-face { font-family: 'Avenir'; font-style: normal; font-weight: 600; font-display: auto; src: url('https://dviation-dev112.wddworks.my/wp-content/uploads/2025/11/Avenir-Heavy.eot'); src: url('https://dviation-dev112.wddworks.my/wp-content/uploads/2025/11/Avenir-Heavy.eot?#iefix') format('embedded-opentype'), url('https://dviation-dev112.wddworks.my/wp-content/uploads/2025/11/Avenir-Heavy.woff2') format('woff2'), url('https://dviation-dev112.wddworks.my/wp-content/uploads/2025/11/Avenir-Heavy.woff') format('woff'), url('https://dviation-dev112.wddworks.my/wp-content/uploads/2025/11/Avenir-Heavy.ttf') format('truetype'); } @font-face { font-family: 'Avenir'; font-style: normal; font-weight: 200; font-display: auto; src: url('https://dviation-dev112.wddworks.my/wp-content/uploads/2025/11/Avenir-Light.eot'); src: url('https://dviation-dev112.wddworks.my/wp-content/uploads/2025/11/Avenir-Light.eot?#iefix') format('embedded-opentype'), url('https://dviation-dev112.wddworks.my/wp-content/uploads/2025/11/Avenir-Light.woff2') format('woff2'), url('https://dviation-dev112.wddworks.my/wp-content/uploads/2025/11/Avenir-Light.woff') format('woff'), url('https://dviation-dev112.wddworks.my/wp-content/uploads/2025/11/Avenir-Light.ttf') format('truetype'); } /* End Custom Fonts CSS */