.bs-website:not(.theme-view) { --font-name: puvi !important; --regular-font: puviregular !important; --medium-font: puvimedium !important; --light-font: puvilight !important; --bold-font: puvibold !important; --menu-item-active-color: #E42527 !important; --primary-button-bg-color: #E42527 !important; } /* Grid layout for the 6 cards */ section.community-section-mediaWithTextList-10 .bs-mtList-wgt.grb-list.col-view.column-3.align-item-center.centered { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; } /* ========================================================= Notched-corner cards — Style 1, 3-step staircase Two-shape technique: .li-item is the stroke, ::before is the fill, both clipped to the same staircase. Step size = 8px, total corner span = 24px. ========================================================= */ section.community-section-mediaWithTextList-6 .li-item { position: relative; isolation: isolate; background-color: var(--card-stroke, #000000) !important; border-radius: 0 !important; padding: 24px 32px 28px; display: flex; flex-direction: column; align-items: center; text-align: center; /* OUTER staircase — the stroke shape */ clip-path: polygon( /* top edge */ 24px 0, calc(100% - 24px) 0, /* top-right staircase (down, right) × 3 */ calc(100% - 24px) 8px, calc(100% - 16px) 8px, calc(100% - 16px) 16px, calc(100% - 8px) 16px, calc(100% - 8px) 24px, 100% 24px, /* right edge */ 100% calc(100% - 24px), /* bottom-right staircase (left, down) × 3 */ calc(100% - 8px) calc(100% - 24px), calc(100% - 8px) calc(100% - 16px), calc(100% - 16px) calc(100% - 16px), calc(100% - 16px) calc(100% - 8px), calc(100% - 24px) calc(100% - 8px), calc(100% - 24px) 100%, /* bottom edge */ 24px 100%, /* bottom-left staircase (up, left) × 3 */ 24px calc(100% - 8px), 16px calc(100% - 8px), 16px calc(100% - 16px), 8px calc(100% - 16px), 8px calc(100% - 24px), 0 calc(100% - 24px), /* left edge */ 0 24px, /* top-left staircase (right, up) × 3 */ 8px 24px, 8px 16px, 16px 16px, 16px 8px, 24px 8px ); } section.community-section-mediaWithTextList-6 .li-item::before { content: ""; position: absolute; inset: 2px; /* visible border thickness */ z-index: -1; background-color: var(--card-fill, #ffffff); /* INNER staircase — same polygon as outer */ clip-path: polygon( 24px 0, calc(100% - 24px) 0, calc(100% - 24px) 8px, calc(100% - 16px) 8px, calc(100% - 16px) 16px, calc(100% - 8px) 16px, calc(100% - 8px) 24px, 100% 24px, 100% calc(100% - 24px), calc(100% - 8px) calc(100% - 24px), calc(100% - 8px) calc(100% - 16px), calc(100% - 16px) calc(100% - 16px), calc(100% - 16px) calc(100% - 8px), calc(100% - 24px) calc(100% - 8px), calc(100% - 24px) 100%, 24px 100%, 24px calc(100% - 8px), 16px calc(100% - 8px), 16px calc(100% - 16px), 8px calc(100% - 16px), 8px calc(100% - 24px), 0 calc(100% - 24px), 0 24px, 8px 24px, 8px 16px, 16px 16px, 16px 8px, 24px 8px ); } /* keep card content above the fill layer */ section.community-section-mediaWithTextList-6 .li-item > * { position: relative; z-index: 1; } section.community-section-mediaWithTextList-6 .bs-mtList-wgt .li-item { grid-gap: 12px; } /* ========================================================= Per-card colour pairs ========================================================= */ /* 1. Expert-led product sessions — mint green */ section.community-section-mediaWithTextList-6 .li-item:nth-child(1) { --card-fill: #EBFFF3; --card-stroke: #000000; } /* 2. Panel sessions — soft coral */ section.community-section-mediaWithTextList-6 .li-item:nth-child(2) { --card-fill: #FEEBFF; --card-stroke: #000000; } /* 3. One-on-one meetings — soft blue */ section.community-section-mediaWithTextList-6 .li-item:nth-child(3) { --card-fill: #EFF8FF; --card-stroke: #000000; } /* 4. Explore booths — soft purple */ section.community-section-mediaWithTextList-6 .li-item:nth-child(4) { --card-fill: #FFFFEE; --card-stroke: #000000; } /* 5. Network-max — cream yellow */ section.community-section-mediaWithTextList-6 .li-item:nth-child(5) { --card-fill: #FFFFEE; --card-stroke: #B0A53A; } /* 6. Reserved — mint cyan, used if a 6th card is added */ section.community-section-mediaWithTextList-6 .li-item:nth-child(6) { --card-fill: #EFFFFF; --card-stroke: #3E9999; } /* ========================================================= Responsive layout ========================================================= */ @media (max-width: 1024px) { section.community-section-mediaWithTextList-6 .bs-mtList-wgt.grb-list.col-view.column-3.align-item-center.centered { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 768px) { section.community-section-mediaWithTextList-6 .bs-mtList-wgt.grb-list.col-view.column-3.align-item-center.centered { grid-template-columns: 1fr; } } .bs-section:not(.community-section-footer, .community-section-banner, .main-banner) article.foreground-layer { padding: 4em 0; } @media (max-width: 768px) { section.community-section-mediaWithTextList-6 { padding-left: 20px !important; padding-right: 20px !important; } } @media (max-width: 768px) { section.community-section-mediaWithTextList-6 .media-element { width: 70% !important; height: auto !important; margin-left: auto; margin-right: auto; } } /* Center the list container */ section.community-section-mediaWithTextList-9 .bs-mtList-wgt.grb-list.centered { display: flex; justify-content: center; } /* Blue rounded banner card */ section.community-section-mediaWithTextList-9 .li-item.no-media { position: relative; width: 100%; max-width: 800px; /* banner width on desktop */ margin: 0 auto; padding: 48px 32px 56px; border-radius: 32px; background-color: #083b63; /* navy blue bg */ overflow: hidden; } /* Skyline background image inside the banner */ section.community-section-mediaWithTextList-9 .li-item.no-media::before { content: ""; position: absolute; inset: 0; background-image: url("https://previewengine.zohoexternal.in/image/BACKSTAGE/48525000433781204?cli-msg=eyJtb2R1bGUiOiJFdmVudEltYWdlUmVzb3VyY2UiLCJ0eXBlIjowLCJwb3J0YWxJZCI6IjYwMDQ3MTAwMTQ1Iiwic3ViUmVzb3VyY2VJZCI6IjYwMDQ3MTAwMTQ1IiwiaWQiOiI0ODUyNTAwMDQzMzc4MTIwNCJ9"); background-repeat: no-repeat; background-position: center bottom; background-size: cover; opacity: 0.9; /* tweak if you want stronger/weaker */ pointer-events: none; } /* Content layout inside banner */ section.community-section-mediaWithTextList-9 .li-item.no-media .li-content { position: relative; /* sit above ::before bg */ z-index: 1; text-align: center; display: flex; flex-direction: column; align-items: center; } /* Heading text */ section.community-section-mediaWithTextList-9 .li-title p strong { color: #ffffff !important; font-weight: 700; font-size: clamp(28px, 4vw, 44px); /* responsive font size */ line-height: 1.2; } /* Button wrapper spacing */ section.community-section-mediaWithTextList-9 .bs-btn-wgt { margin-top: 28px; } /* CTA button style */ section.community-section-mediaWithTextList-9 .bs-button.large.primary { background-color: #da1310 !important; /* red */ border-radius: 12px; padding: 14px 36px; font-weight: 700; font-size: 16px; } /* ======== Responsive tweaks ======== */ @media (max-width: 768px) { section.community-section-mediaWithTextList-9 .li-item.no-media { padding: 32px 20px 40px; border-radius: 24px; } section.community-section-mediaWithTextList-9 .bs-button.large.primary { width: 100%; max-width: 260px; } } .ticket-card-nav .ticket-item .text-tiny.mgt2 { display: none; } .ticket-classes .accordion-panel .meta { display: none !important; } /* Scope to the exact section */ section[data-section-id="48525000433488975"] [data-element-id="48525000433488976"] { border: 2x solid #000000 !important; padding: 60px !important; margin: 0 auto !important; /* centers the 90% container */ box-sizing: border-box; border-radius: 8px; } /* MOBILE ONLY — Replace the banner image */ @media (max-width: 767px) { /* Target the exact banner image inside this section */ section[data-section-id="48525000431382258"] .banner-media .media-image img { content: url("https://previewengine.zohoexternal.in/image/BACKSTAGE/48525000431684916?cli-msg=eyJtb2R1bGUiOiJFdmVudEltYWdlUmVzb3VyY2UiLCJ0eXBlIjowLCJwb3J0YWxJZCI6IjYwMDQ3MTAwMTQ1Iiwic3ViUmVzb3VyY2VJZCI6IjYwMDQ3MTAwMTQ1IiwiaWQiOiI0ODUyNTAwMDQzMTY4NDkxNiJ9"); width: 100%; height: auto; object-fit: contain; /* keep proper scaling */ } } .buy-ticket-modal .ticket-classes .list-item .uls-grid>.col-8 .grb.gp1.fvc { display: none !important; } /* ===== Desktop (≥1024px) ===== */ @media (min-width: 1024px) { section[data-section-id="48525000433512094"] .bs-mtList-wgt .list-image { display: flex; justify-content: center; /* center the 800px image */ } section[data-section-id="48525000433512094"] .bs-mtList-wgt .media-image { width: 800px !important; max-width: 800px !important; } section[data-section-id="48525000433512094"] .bs-mtList-wgt .media-image img { width: 100% !important; height: auto !important; } } /* ===== Mobile (<768px) ===== */ @media (max-width: 767px) { section[data-section-id="48525000433512094"] .bs-mtList-wgt .media-image, section[data-section-id="48525000433512094"] .bs-mtList-wgt .media-image img { width: 100% !important; max-width: 100% !important; height: auto !important; } } /* ------------------------------------------------------- Replace image: 48525000432842955 Pattern: ID desktop + ID mobile + EN mobile (All replacement URLs use zohoexternal) -------------------------------------------------------- */ /* ======================= INDONESIAN – DESKTOP / TABLET ======================= */ @media (min-width: 768px) { html[lang="id"] img[src*="48525000432842955"], body[lang="id"] img[src*="48525000432842955"], body[data-lang="id"] img[src*="48525000432842955"], body.lang-id img[src*="48525000432842955"], .lang-id img[src*="48525000432842955"] { content: url("https://previewengine.zohoexternal.in/image/BACKSTAGE/48525000432849304?cli-msg=eyJtb2R1bGUiOiJFdmVudEltYWdlUmVzb3VyY2UiLCJ0eXBlIjowLCJwb3J0YWxJZCI6IjYwMDQ3MTAwMTQ1Iiwic3ViUmVzb3VyY2VJZCI6IjYwMDQ3MTAwMTQ1IiwiaWQiOiI0ODUyNTAwMDQzMjg0OTMwNCJ9") !important; } } /* ======================= INDONESIAN – MOBILE ======================= */ @media (max-width: 767px) { html[lang="id"] img[src*="48525000432842955"], body[lang="id"] img[src*="48525000432842955"], body[data-lang="id"] img[src*="48525000432842955"], body.lang-id img[src*="48525000432842955"], .lang-id img[src*="48525000432842955"] { content: url("https://previewengine.zohoexternal.in/image/BACKSTAGE/48525000432849314?cli-msg=eyJtb2R1bGUiOiJFdmVudEltYWdlUmVzb3VyY2UiLCJ0eXBlIjowLCJwb3J0YWxJZCI6IjYwMDQ3MTAwMTQ1Iiwic3ViUmVzb3VyY2VJZCI6IjYwMDQ3MTAwMTQ1IiwiaWQiOiI0ODUyNTAwMDQzMjg0OTMxNCJ9") !important; } } /* ======================= ENGLISH – MOBILE ======================= */ @media (max-width: 767px) { html[lang="en"] img[src*="48525000432842955"], body[lang="en"] img[src*="48525000432842955"], body[data-lang="en"] img[src*="48525000432842955"], body.lang-en img[src*="48525000432842955"], .lang-en img[src*="48525000432842955"] { content: url("https://previewengine.zohoexternal.in/image/BACKSTAGE/48525000432849309?cli-msg=eyJtb2R1bGUiOiJFdmVudEltYWdlUmVzb3VyY2UiLCJ0eXBlIjowLCJwb3J0YWxJZCI6IjYwMDQ3MTAwMTQ1Iiwic3ViUmVzb3VyY2VJZCI6IjYwMDQ3MTAwMTQ1IiwiaWQiOiI0ODUyNTAwMDQzMjg0OTMwOSJ9") !important; } } /* ------------------------------------------------------- Replace image: 48525000432857408 Pattern: ID desktop + ID mobile + EN mobile (All replacement URLs use zohoexternal) -------------------------------------------------------- */ /* ======================= INDONESIAN – DESKTOP / TABLET ======================= */ @media (min-width: 768px) { html[lang="id"] img[src*="48525000432857408"], body[lang="id"] img[src*="48525000432857408"], body[data-lang="id"] img[src*="48525000432857408"], body.lang-id img[src*="48525000432857408"], .lang-id img[src*="48525000432857408"] { content: url("https://previewengine.zohoexternal.in/image/BACKSTAGE/48525000432858012?cli-msg=eyJtb2R1bGUiOiJFdmVudEltYWdlUmVzb3VyY2UiLCJ0eXBlIjowLCJwb3J0YWxJZCI6IjYwMDQ3MTAwMTQ1Iiwic3ViUmVzb3VyY2VJZCI6IjYwMDQ3MTAwMTQ1IiwiaWQiOiI0ODUyNTAwMDQzMjg1ODAxMiJ9") !important; } } /* ======================= INDONESIAN – MOBILE ======================= */ @media (max-width: 767px) { html[lang="id"] img[src*="48525000432857408"], body[lang="id"] img[src*="48525000432857408"], body[data-lang="id"] img[src*="48525000432857408"], body.lang-id img[src*="48525000432857408"], .lang-id img[src*="48525000432857408"] { content: url("https://previewengine.zohoexternal.in/image/BACKSTAGE/48525000432858022?cli-msg=eyJtb2R1bGUiOiJFdmVudEltYWdlUmVzb3VyY2UiLCJ0eXBlIjowLCJwb3J0YWxJZCI6IjYwMDQ3MTAwMTQ1Iiwic3ViUmVzb3VyY2VJZCI6IjYwMDQ3MTAwMTQ1IiwiaWQiOiI0ODUyNTAwMDQzMjg1ODAyMiJ9") !important; } } /* ======================= ENGLISH – MOBILE ======================= */ @media (max-width: 767px) { html[lang="en"] img[src*="48525000432857408"], body[lang="en"] img[src*="48525000432857408"], body[data-lang="en"] img[src*="48525000432857408"], body.lang-en img[src*="48525000432857408"], .lang-en img[src*="48525000432857408"] { content: url("https://previewengine.zohoexternal.in/image/BACKSTAGE/48525000432858017?cli-msg=eyJtb2R1bGUiOiJFdmVudEltYWdlUmVzb3VyY2UiLCJ0eXBlIjowLCJwb3J0YWxJZCI6IjYwMDQ3MTAwMTQ1Iiwic3ViUmVzb3VyY2VJZCI6IjYwMDQ3MTAwMTQ1IiwiaWQiOiI0ODUyNTAwMDQzMjg1ODAxNyJ9") !important; } } /* ------------------------------------------------------- Replace image: 48525000432857417 Pattern: ID desktop + ID mobile + EN mobile -------------------------------------------------------- */ /* ======================= INDONESIAN – DESKTOP / TABLET ======================= */ @media (min-width: 768px) { html[lang="id"] img[src*="48525000432857417"], body[lang="id"] img[src*="48525000432857417"], body[data-lang="id"] img[src*="48525000432857417"], body.lang-id img[src*="48525000432857417"], .lang-id img[src*="48525000432857417"] { content: url("https://previewengine.zohoexternal.in/image/BACKSTAGE/48525000432858028?cli-msg=eyJtb2R1bGUiOiJFdmVudEltYWdlUmVzb3VyY2UiLCJ0eXBlIjowLCJwb3J0YWxJZCI6IjYwMDQ3MTAwMTQ1Iiwic3ViUmVzb3VyY2VJZCI6IjYwMDQ3MTAwMTQ1IiwiaWQiOiI0ODUyNTAwMDQzMjg1ODAyOCJ9") !important; } } /* ======================= INDONESIAN – MOBILE ======================= */ @media (max-width: 767px) { html[lang="id"] img[src*="48525000432857417"], body[lang="id"] img[src*="48525000432857417"], body[data-lang="id"] img[src*="48525000432857417"], body.lang-id img[src*="48525000432857417"], .lang-id img[src*="48525000432857417"] { content: url("https://previewengine.zohoexternal.in/image/BACKSTAGE/48525000432858033?cli-msg=eyJtb2R1bGUiOiJFdmVudEltYWdlUmVzb3VyY2UiLCJ0eXBlIjowLCJwb3J0YWxJZCI6IjYwMDQ3MTAwMTQ1Iiwic3ViUmVzb3VyY2VJZCI6IjYwMDQ3MTAwMTQ1IiwiaWQiOiI0ODUyNTAwMDQzMjg1ODAzMyJ9") !important; } } /* ======================= ENGLISH – MOBILE ======================= */ @media (max-width: 767px) { html[lang="en"] img[src*="48525000432857417"], body[lang="en"] img[src*="48525000432857417"], body[data-lang="en"] img[src*="48525000432857417"], body.lang-en img[src*="48525000432857417"], .lang-en img[src*="48525000432857417"] { content: url("https://previewengine.zohoexternal.in/image/BACKSTAGE/48525000432858038?cli-msg=eyJtb2R1bGUiOiJFdmVudEltYWdlUmVzb3VyY2UiLCJ0eXBlIjowLCJwb3J0YWxJZCI6IjYwMDQ3MTAwMTQ1Iiwic3ViUmVzb3VyY2VJZCI6IjYwMDQ3MTAwMTQ1IiwiaWQiOiI0ODUyNTAwMDQzMjg1ODAzOCJ9") !important; } } /* ------------------------------------------------------- Replace image: 48525000432857426 Pattern: ID desktop + ID mobile + EN mobile -------------------------------------------------------- */ /* ======================= INDONESIAN – DESKTOP / TABLET ======================= */ @media (min-width: 768px) { html[lang="id"] img[src*="48525000432857426"], body[lang="id"] img[src*="48525000432857426"], body[data-lang="id"] img[src*="48525000432857426"], body.lang-id img[src*="48525000432857426"], .lang-id img[src*="48525000432857426"] { content: url("https://previewengine.zohoexternal.in/image/BACKSTAGE/48525000432858051?cli-msg=eyJtb2R1bGUiOiJFdmVudEltYWdlUmVzb3VyY2UiLCJ0eXBlIjowLCJwb3J0YWxJZCI6IjYwMDQ3MTAwMTQ1Iiwic3ViUmVzb3VyY2VJZCI6IjYwMDQ3MTAwMTQ1IiwiaWQiOiI0ODUyNTAwMDQzMjg1ODA1MSJ9") !important; } } /* ======================= INDONESIAN – MOBILE ======================= */ @media (max-width: 767px) { html[lang="id"] img[src*="48525000432857426"], body[lang="id"] img[src*="48525000432857426"], body[data-lang="id"] img[src*="48525000432857426"], body.lang-id img[src*="48525000432857426"], .lang-id img[src*="48525000432857426"] { content: url("https://previewengine.zohoexternal.in/image/BACKSTAGE/48525000432858056?cli-msg=eyJtb2R1bGUiOiJFdmVudEltYWdlUmVzb3VyY2UiLCJ0eXBlIjowLCJwb3J0YWxJZCI6IjYwMDQ3MTAwMTQ1Iiwic3ViUmVzb3VyY2VJZCI6IjYwMDQ3MTAwMTQ1IiwiaWQiOiI0ODUyNTAwMDQzMjg1ODA1NiJ9") !important; } } /* ======================= ENGLISH – MOBILE ======================= */ @media (max-width: 767px) { html[lang="en"] img[src*="48525000432857426"], body[lang="en"] img[src*="48525000432857426"], body[data-lang="en"] img[src*="48525000432857426"], body.lang-en img[src*="48525000432857426"], .lang-en img[src*="48525000432857426"] { content: url("https://previewengine.zohoexternal.in/image/BACKSTAGE/48525000432858061?cli-msg=eyJtb2R1bGUiOiJFdmVudEltYWdlUmVzb3VyY2UiLCJ0eXBlIjowLCJwb3J0YWxJZCI6IjYwMDQ3MTAwMTQ1Iiwic3ViUmVzb3VyY2VJZCI6IjYwMDQ3MTAwMTQ1IiwiaWQiOiI0ODUyNTAwMDQzMjg1ODA2MSJ9") !important; } } /* ------------------------------------------------------- Replace image: 48525000432857435 Pattern: ID desktop + ID mobile + EN mobile -------------------------------------------------------- */ /* ======================= INDONESIAN – DESKTOP / TABLET ======================= */ @media (min-width: 768px) { html[lang="id"] img[src*="48525000432857435"], body[lang="id"] img[src*="48525000432857435"], body[data-lang="id"] img[src*="48525000432857435"], body.lang-id img[src*="48525000432857435"], .lang-id img[src*="48525000432857435"] { content: url("https://previewengine.zohoexternal.in/image/BACKSTAGE/48525000432858067?cli-msg=eyJtb2R1bGUiOiJFdmVudEltYWdlUmVzb3VyY2UiLCJ0eXBlIjowLCJwb3J0YWxJZCI6IjYwMDQ3MTAwMTQ1Iiwic3ViUmVzb3VyY2VJZCI6IjYwMDQ3MTAwMTQ1IiwiaWQiOiI0ODUyNTAwMDQzMjg1ODA2NyJ9") !important; } } /* ======================= INDONESIAN – MOBILE ======================= */ @media (max-width: 767px) { html[lang="id"] img[src*="48525000432857435"], body[lang="id"] img[src*="48525000432857435"], body[data-lang="id"] img[src*="48525000432857435"], body.lang-id img[src*="48525000432857435"], .lang-id img[src*="48525000432857435"] { content: url("https://previewengine.zohoexternal.in/image/BACKSTAGE/48525000432858072?cli-msg=eyJtb2R1bGUiOiJFdmVudEltYWdlUmVzb3VyY2UiLCJ0eXBlIjowLCJwb3J0YWxJZCI6IjYwMDQ3MTAwMTQ1Iiwic3ViUmVzb3VyY2VJZCI6IjYwMDQ3MTAwMTQ1IiwiaWQiOiI0ODUyNTAwMDQzMjg1ODA3MiJ9") !important; } } /* ======================= ENGLISH – MOBILE ======================= */ @media (max-width: 767px) { html[lang="en"] img[src*="48525000432857435"], body[lang="en"] img[src*="48525000432857435"], body[data-lang="en"] img[src*="48525000432857435"], body.lang-en img[src*="48525000432857435"], .lang-en img[src*="48525000432857435"] { content: url("https://previewengine.zohoexternal.in/image/BACKSTAGE/48525000432858077?cli-msg=eyJtb2R1bGUiOiJFdmVudEltYWdlUmVzb3VyY2UiLCJ0eXBlIjowLCJwb3J0YWxJZCI6IjYwMDQ3MTAwMTQ1Iiwic3ViUmVzb3VyY2VJZCI6IjYwMDQ3MTAwMTQ1IiwiaWQiOiI0ODUyNTAwMDQzMjg1ODA3NyJ9") !important; } } /* ------------------------------------------------------- Replace image: 48525000432857543 Pattern: ID desktop + ID mobile + EN mobile NOTE: zoho.in -> zohoexternal.in applied -------------------------------------------------------- */ /* ======================= INDONESIAN – DESKTOP / TABLET ======================= */ @media (min-width: 768px) { html[lang="id"] img[src*="48525000432857543"], body[lang="id"] img[src*="48525000432857543"], body[data-lang="id"] img[src*="48525000432857543"], body.lang-id img[src*="48525000432857543"], .lang-id img[src*="48525000432857543"] { content: url("https://previewengine.zohoexternal.in/image/BACKSTAGE/48525000432858090?cli-msg=eyJtb2R1bGUiOiJFdmVudEltYWdlUmVzb3VyY2UiLCJ0eXBlIjowLCJwb3J0YWxJZCI6IjYwMDQ3MTAwMTQ1Iiwic3ViUmVzb3VyY2VJZCI6IjYwMDQ3MTAwMTQ1IiwiaWQiOiI0ODUyNTAwMDQzMjg1ODA5MCJ9") !important; } } /* ======================= INDONESIAN – MOBILE ======================= */ @media (max-width: 767px) { html[lang="id"] img[src*="48525000432857543"], body[lang="id"] img[src*="48525000432857543"], body[data-lang="id"] img[src*="48525000432857543"], body.lang-id img[src*="48525000432857543"], .lang-id img[src*="48525000432857543"] { content: url("https://previewengine.zohoexternal.in/image/BACKSTAGE/48525000432858095?cli-msg=eyJtb2R1bGUiOiJFdmVudEltYWdlUmVzb3VyY2UiLCJ0eXBlIjowLCJwb3J0YWxJZCI6IjYwMDQ3MTAwMTQ1Iiwic3ViUmVzb3VyY2VJZCI6IjYwMDQ3MTAwMTQ1IiwiaWQiOiI0ODUyNTAwMDQzMjg1ODA5NSJ9") !important; } } /* ======================= ENGLISH – MOBILE ======================= */ @media (max-width: 767px) { html[lang="en"] img[src*="48525000432857543"], body[lang="en"] img[src*="48525000432857543"], body[data-lang="en"] img[src*="48525000432857543"], body.lang-en img[src*="48525000432857543"], .lang-en img[src*="48525000432857543"] { content: url("https://previewengine.zohoexternal.in/image/BACKSTAGE/48525000432858100?cli-msg=eyJtb2R1bGUiOiJFdmVudEltYWdlUmVzb3VyY2UiLCJ0eXBlIjowLCJwb3J0YWxJZCI6IjYwMDQ3MTAwMTQ1Iiwic3ViUmVzb3VyY2VJZCI6IjYwMDQ3MTAwMTQ1IiwiaWQiOiI0ODUyNTAwMDQzMjg1ODEwMCJ9") !important; } } /* Desktop */ @media (min-width: 1024px) { .community-section-banner .main-banner article.foreground-layer { padding-bottom: 120px !important; /* set your desktop value */ } } /* Mobile */ @media (max-width: 767px) { .community-section-banner .main-banner article.foreground-layer { padding-bottom: 80px !important; /* set your mobile value */ } } @media (max-width: 767px) { img[src*="48525000432807519"] { content: url("https://previewengine.zohoexternal.in/image/BACKSTAGE/48525000432858117?cli-msg=eyJtb2R1bGUiOiJFdmVudEltYWdlUmVzb3VyY2UiLCJ0eXBlIjowLCJwb3J0YWxJZCI6IjYwMDQ3MTAwMTQ1Iiwic3ViUmVzb3VyY2VJZCI6IjYwMDQ3MTAwMTQ1IiwiaWQiOiI0ODUyNTAwMDQzMjg1ODExNyJ9"); } } /* Scope to the exact section */ section[data-section-id="48525000433488975"] [data-element-id="48525000433488976"] { position: relative; border: 4px solid #000000 !important; padding: 80px !important; margin: 0 auto !important; box-sizing: border-box; border-radius: 8px; } /* Ensure the inner wrapper doesn't become its own positioning context */ section[data-section-id="48525000433488975"] [data-element-id="48525000433488976"] .image-layout { position: static; } /* Shared ornament styles for all 4 corners */ section[data-section-id="48525000433488975"] [data-element-id="48525000433488976"]::before, section[data-section-id="48525000433488975"] [data-element-id="48525000433488976"]::after, section[data-section-id="48525000433488975"] [data-element-id="48525000433488976"] .image-layout::before, section[data-section-id="48525000433488975"] [data-element-id="48525000433488976"] .image-layout::after { content: ""; position: absolute; width: 50px; height: 50px; background-image: url("https://previewengine.zohoexternal.in/image/BACKSTAGE/48525000433755588?cli-msg=eyJtb2R1bGUiOiJFdmVudEltYWdlUmVzb3VyY2UiLCJ0eXBlIjowLCJwb3J0YWxJZCI6IjYwMDQ3MTAwMTQ1Iiwic3ViUmVzb3VyY2VJZCI6IjYwMDQ3MTAwMTQ1IiwiaWQiOiI0ODUyNTAwMDQzMzc1NTU4OCJ9"); background-size: contain; background-repeat: no-repeat; background-position: center; pointer-events: none; z-index: 1; } /* Top-left — original orientation */ section[data-section-id="48525000433488975"] [data-element-id="48525000433488976"]::before { top: 0; left: 0; } /* Top-right — flipped horizontally */ section[data-section-id="48525000433488975"] [data-element-id="48525000433488976"]::after { top: 0; right: 0; transform: scaleX(-1); } /* Bottom-left — flipped vertically */ section[data-section-id="48525000433488975"] [data-element-id="48525000433488976"] .image-layout::before { bottom: 0; left: 0; transform: scaleY(-1); } /* Bottom-right — flipped both axes */ section[data-section-id="48525000433488975"] [data-element-id="48525000433488976"] .image-layout::after { bottom: 0; right: 0; transform: scale(-1, -1); } @media (max-width: 768px) { section.bs-section > .foreground-layer, section.bs-section > article.foreground-layer { padding-left: 20px !important; padding-right: 20px !important; box-sizing: border-box !important; } } /* 20px left/right padding on each section's content area */ @media (max-width: 768px) { section.bs-section > .foreground-layer, section.bs-section > article.foreground-layer { padding-left: 20px !important; padding-right: 20px !important; box-sizing: border-box !important; } /* Hero/banner outer wrapper just hosts a carousel — don't pad it. The inner slide section (also .bs-section) still gets the padding. */ section.bs-section.multiple-sections > .foreground-layer, section.bs-section.full-window-banner > .foreground-layer, section.bs-section.community-section-banner > .foreground-layer { padding-left: 0 !important; padding-right: 0 !important; } } /* ========================================================= Mobile-only image swap for section 10's carousel Each slide gets its own replacement via background-image ========================================================= */ @media (max-width: 768px) { /* hide the original images on mobile */ section.community-section-mediaWithTextList-10 .media-image img { display: none !important; } /* shared rules for every replacement image */ section.community-section-mediaWithTextList-10 .owl-item .media-image { background-repeat: no-repeat !important; background-position: center !important; background-size: contain !important; width: 100% !important; aspect-ratio: 16 / 9; /* tweak to match your image's ratio */ } /* Slide 1 */ section.community-section-mediaWithTextList-10 .owl-item:nth-child(1) .media-image { background-image: url("https://previewengine.zohoexternal.in/image/BACKSTAGE/48525000433755555?cli-msg=eyJtb2R1bGUiOiJFdmVudEltYWdlUmVzb3VyY2UiLCJ0eXBlIjowLCJwb3J0YWxJZCI6IjYwMDQ3MTAwMTQ1Iiwic3ViUmVzb3VyY2VJZCI6IjYwMDQ3MTAwMTQ1IiwiaWQiOiI0ODUyNTAwMDQzMzc1NTU1NSJ9") !important; } /* Slide 2 */ section.community-section-mediaWithTextList-10 .owl-item:nth-child(2) .media-image { background-image: url("https://previewengine.zohoexternal.in/image/BACKSTAGE/48525000433755557?cli-msg=eyJtb2R1bGUiOiJFdmVudEltYWdlUmVzb3VyY2UiLCJ0eXBlIjowLCJwb3J0YWxJZCI6IjYwMDQ3MTAwMTQ1Iiwic3ViUmVzb3VyY2VJZCI6IjYwMDQ3MTAwMTQ1IiwiaWQiOiI0ODUyNTAwMDQzMzc1NTU1NyJ9") !important; } /* Slide 3 */ section.community-section-mediaWithTextList-10 .owl-item:nth-child(3) .media-image { background-image: url("https://previewengine.zohoexternal.in/image/BACKSTAGE/48525000433755558?cli-msg=eyJtb2R1bGUiOiJFdmVudEltYWdlUmVzb3VyY2UiLCJ0eXBlIjowLCJwb3J0YWxJZCI6IjYwMDQ3MTAwMTQ1Iiwic3ViUmVzb3VyY2VJZCI6IjYwMDQ3MTAwMTQ1IiwiaWQiOiI0ODUyNTAwMDQzMzc1NTU1OCJ9") !important; } /* Slide 4 */ section.community-section-mediaWithTextList-10 .owl-item:nth-child(4) .media-image { background-image: url("https://previewengine.zohoexternal.in/image/BACKSTAGE/48525000433755569?cli-msg=eyJtb2R1bGUiOiJFdmVudEltYWdlUmVzb3VyY2UiLCJ0eXBlIjowLCJwb3J0YWxJZCI6IjYwMDQ3MTAwMTQ1Iiwic3ViUmVzb3VyY2VJZCI6IjYwMDQ3MTAwMTQ1IiwiaWQiOiI0ODUyNTAwMDQzMzc1NTU2OSJ9") !important; } /* Slide 5 */ section.community-section-mediaWithTextList-10 .owl-item:nth-child(5) .media-image { background-image: url("https://previewengine.zohoexternal.in/image/BACKSTAGE/48525000433755570?cli-msg=eyJtb2R1bGUiOiJFdmVudEltYWdlUmVzb3VyY2UiLCJ0eXBlIjowLCJwb3J0YWxJZCI6IjYwMDQ3MTAwMTQ1Iiwic3ViUmVzb3VyY2VJZCI6IjYwMDQ3MTAwMTQ1IiwiaWQiOiI0ODUyNTAwMDQzMzc1NTU3MCJ9") !important; } /* Slide 6 */ section.community-section-mediaWithTextList-10 .owl-item:nth-child(6) .media-image { background-image: url("https://previewengine.zohoexternal.in/image/BACKSTAGE/48525000433755566?cli-msg=eyJtb2R1bGUiOiJFdmVudEltYWdlUmVzb3VyY2UiLCJ0eXBlIjowLCJwb3J0YWxJZCI6IjYwMDQ3MTAwMTQ1Iiwic3ViUmVzb3VyY2VJZCI6IjYwMDQ3MTAwMTQ1IiwiaWQiOiI0ODUyNTAwMDQzMzc1NTU2NiJ9") !important; } } @media (max-width: 768px) { section.community-section-mediaWithTextList-10 .owl-item .media-image { width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; background-size: 100% auto !important; /* stretch to box width */ background-repeat: no-repeat !important; background-position: center !important; aspect-ratio: 16 / 18; /* tune to match image proportions */ min-height: 320px; /* fallback if aspect-ratio fails */ } /* and make sure the original stays hidden */ section.community-section-mediaWithTextList-10 .media-image img { display: none !important; } } @media (max-width: 768px) { /* hide the original banner image on mobile */ section.community-section-Slide-1 .banner-media .media-image img { display: none !important; } /* render the replacement as a background on the media wrapper */ section.community-section-Slide-1 .banner-media .media-image { background-image: url("https://previewengine.zohoexternal.in/image/BACKSTAGE/48525000433755636?cli-msg=eyJtb2R1bGUiOiJFdmVudEltYWdlUmVzb3VyY2UiLCJ0eXBlIjowLCJwb3J0YWxJZCI6IjYwMDQ3MTAwMTQ1Iiwic3ViUmVzb3VyY2VJZCI6IjYwMDQ3MTAwMTQ1IiwiaWQiOiI0ODUyNTAwMDQzMzc1NTYzNiJ9") !important; background-repeat: no-repeat !important; background-position: center !important; background-size: 100% auto !important; width: 100% !important; aspect-ratio: 4 / 3; /* tune to match the new image's proportions */ min-height: 240px; /* fallback if aspect-ratio fails */ } }