.elementor-7 .elementor-element.elementor-element-e194751 > .elementor-container{max-width:500px;}.elementor-7 .elementor-element.elementor-element-e194751{margin-top:0px;margin-bottom:0px;}.elementor-7 .elementor-element.elementor-element-9dcedb6 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-7 .elementor-element.elementor-element-9dcedb6{z-index:99;}.elementor-7 .elementor-element.elementor-element-a3b5f6f > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-7 .elementor-element.elementor-element-a3b5f6f{z-index:99;}.elementor-7 .elementor-element.elementor-element-93e0489 img{border-style:none;}.elementor-7 .elementor-element.elementor-element-93e0489 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-7 .elementor-element.elementor-element-93e0489{width:100%;max-width:100%;}.elementor-7 .elementor-element.elementor-element-a16e786 > .elementor-container{max-width:500px;min-height:0px;}.elementor-7 .elementor-element.elementor-element-a16e786 > .elementor-container > .elementor-column > .elementor-widget-wrap{align-content:center;align-items:center;}.elementor-7 .elementor-element.elementor-element-a16e786:not(.elementor-motion-effects-element-type-background), .elementor-7 .elementor-element.elementor-element-a16e786 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF00;}.elementor-7 .elementor-element.elementor-element-a16e786{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;z-index:3;}.elementor-7 .elementor-element.elementor-element-a16e786 > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-7 .elementor-element.elementor-element-37c5822:not(.elementor-motion-effects-element-type-background), .elementor-7 .elementor-element.elementor-element-37c5822 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FF8989;}.elementor-7 .elementor-element.elementor-element-37c5822{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;margin-top:-10px;margin-bottom:-10px;}.elementor-7 .elementor-element.elementor-element-37c5822 > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-7 .elementor-element.elementor-element-9a1752e .elementor-icon-wrapper{text-align:center;}.elementor-7 .elementor-element.elementor-element-9a1752e.elementor-view-stacked .elementor-icon{background-color:#FFFFFF;}.elementor-7 .elementor-element.elementor-element-9a1752e.elementor-view-framed .elementor-icon, .elementor-7 .elementor-element.elementor-element-9a1752e.elementor-view-default .elementor-icon{color:#FFFFFF;border-color:#FFFFFF;}.elementor-7 .elementor-element.elementor-element-9a1752e.elementor-view-framed .elementor-icon, .elementor-7 .elementor-element.elementor-element-9a1752e.elementor-view-default .elementor-icon svg{fill:#FFFFFF;}.elementor-7 .elementor-element.elementor-element-9a1752e .elementor-icon{font-size:32px;}.elementor-7 .elementor-element.elementor-element-af4b0b0{text-align:center;}.elementor-7 .elementor-element.elementor-element-af4b0b0 .elementor-heading-title{color:#FFFFFF;font-family:"Roboto", Sans-serif;font-size:12px;font-weight:400;}.elementor-7 .elementor-element.elementor-element-af4b0b0 > .elementor-widget-container{margin:-20px -20px -20px -20px;}.elementor-7 .elementor-element.elementor-element-1d9c6fe .elementor-icon-wrapper{text-align:center;}.elementor-7 .elementor-element.elementor-element-1d9c6fe.elementor-view-stacked .elementor-icon{background-color:#FFFFFF;}.elementor-7 .elementor-element.elementor-element-1d9c6fe.elementor-view-framed .elementor-icon, .elementor-7 .elementor-element.elementor-element-1d9c6fe.elementor-view-default .elementor-icon{color:#FFFFFF;border-color:#FFFFFF;}.elementor-7 .elementor-element.elementor-element-1d9c6fe.elementor-view-framed .elementor-icon, .elementor-7 .elementor-element.elementor-element-1d9c6fe.elementor-view-default .elementor-icon svg{fill:#FFFFFF;}.elementor-7 .elementor-element.elementor-element-1d9c6fe .elementor-icon{font-size:32px;}.elementor-7 .elementor-element.elementor-element-a44908b{text-align:center;}.elementor-7 .elementor-element.elementor-element-a44908b .elementor-heading-title{color:#FFFFFF;font-family:"Roboto", Sans-serif;font-size:12px;font-weight:400;}.elementor-7 .elementor-element.elementor-element-a44908b > .elementor-widget-container{margin:-20px -20px -20px -20px;}.elementor-7 .elementor-element.elementor-element-3788ec0 .elementor-icon-wrapper{text-align:center;}.elementor-7 .elementor-element.elementor-element-3788ec0.elementor-view-stacked .elementor-icon{background-color:#FFFFFF;}.elementor-7 .elementor-element.elementor-element-3788ec0.elementor-view-framed .elementor-icon, .elementor-7 .elementor-element.elementor-element-3788ec0.elementor-view-default .elementor-icon{color:#FFFFFF;border-color:#FFFFFF;}.elementor-7 .elementor-element.elementor-element-3788ec0.elementor-view-framed .elementor-icon, .elementor-7 .elementor-element.elementor-element-3788ec0.elementor-view-default .elementor-icon svg{fill:#FFFFFF;}.elementor-7 .elementor-element.elementor-element-3788ec0 .elementor-icon{font-size:32px;}.elementor-7 .elementor-element.elementor-element-1d4517c{text-align:center;}.elementor-7 .elementor-element.elementor-element-1d4517c .elementor-heading-title{color:#FFFFFF;font-family:"Roboto", Sans-serif;font-size:12px;font-weight:400;}.elementor-7 .elementor-element.elementor-element-1d4517c > .elementor-widget-container{margin:-20px -20px -20px -20px;}.elementor-7 .elementor-element.elementor-element-71afab8 .elementor-icon-wrapper{text-align:center;}.elementor-7 .elementor-element.elementor-element-71afab8.elementor-view-stacked .elementor-icon{background-color:#FFFFFF;}.elementor-7 .elementor-element.elementor-element-71afab8.elementor-view-framed .elementor-icon, .elementor-7 .elementor-element.elementor-element-71afab8.elementor-view-default .elementor-icon{color:#FFFFFF;border-color:#FFFFFF;}.elementor-7 .elementor-element.elementor-element-71afab8.elementor-view-framed .elementor-icon, .elementor-7 .elementor-element.elementor-element-71afab8.elementor-view-default .elementor-icon svg{fill:#FFFFFF;}.elementor-7 .elementor-element.elementor-element-71afab8 .elementor-icon{font-size:32px;}.elementor-7 .elementor-element.elementor-element-5e87ac4{text-align:center;}.elementor-7 .elementor-element.elementor-element-5e87ac4 .elementor-heading-title{color:#FFFFFF;font-family:"Roboto", Sans-serif;font-size:12px;font-weight:400;}.elementor-7 .elementor-element.elementor-element-5e87ac4 > .elementor-widget-container{margin:-20px -20px -20px -20px;}.elementor-7 .elementor-element.elementor-element-9fa4c28 .elementor-icon-wrapper{text-align:center;}.elementor-7 .elementor-element.elementor-element-9fa4c28.elementor-view-stacked .elementor-icon{background-color:#FFFFFF;}.elementor-7 .elementor-element.elementor-element-9fa4c28.elementor-view-framed .elementor-icon, .elementor-7 .elementor-element.elementor-element-9fa4c28.elementor-view-default .elementor-icon{color:#FFFFFF;border-color:#FFFFFF;}.elementor-7 .elementor-element.elementor-element-9fa4c28.elementor-view-framed .elementor-icon, .elementor-7 .elementor-element.elementor-element-9fa4c28.elementor-view-default .elementor-icon svg{fill:#FFFFFF;}.elementor-7 .elementor-element.elementor-element-9fa4c28 .elementor-icon{font-size:32px;}.elementor-7 .elementor-element.elementor-element-bdf866d{text-align:center;}.elementor-7 .elementor-element.elementor-element-bdf866d .elementor-heading-title{color:#FFFFFF;font-family:"Roboto", Sans-serif;font-size:12px;font-weight:400;}.elementor-7 .elementor-element.elementor-element-bdf866d > .elementor-widget-container{margin:-20px -20px -20px -20px;}@media(max-width:1024px){.elementor-7 .elementor-element.elementor-element-37c5822{margin-top:-10px;margin-bottom:-10px;}.elementor-7 .elementor-element.elementor-element-9a1752e .elementor-icon{font-size:25px;}.elementor-7 .elementor-element.elementor-element-1d9c6fe .elementor-icon{font-size:25px;}.elementor-7 .elementor-element.elementor-element-3788ec0 .elementor-icon{font-size:25px;}.elementor-7 .elementor-element.elementor-element-71afab8 .elementor-icon{font-size:25px;}.elementor-7 .elementor-element.elementor-element-9fa4c28 .elementor-icon{font-size:25px;}}@media(max-width:767px){.elementor-7 .elementor-element.elementor-element-e194751{padding:0px 0px 0px 0px;}.elementor-7 .elementor-element.elementor-element-9dcedb6 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-7 .elementor-element.elementor-element-9dcedb6{width:100%;max-width:100%;top:0vw;z-index:99;}body:not(.rtl) .elementor-7 .elementor-element.elementor-element-9dcedb6{left:0vh;}body.rtl .elementor-7 .elementor-element.elementor-element-9dcedb6{right:0vh;}.elementor-7 .elementor-element.elementor-element-a3b5f6f > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-7 .elementor-element.elementor-element-a3b5f6f{width:100%;max-width:100%;top:0vw;z-index:99;}body:not(.rtl) .elementor-7 .elementor-element.elementor-element-a3b5f6f{left:0vh;}body.rtl .elementor-7 .elementor-element.elementor-element-a3b5f6f{right:0vh;}.elementor-7 .elementor-element.elementor-element-93e0489{text-align:center;width:100%;max-width:100%;align-self:flex-start;z-index:1;}.elementor-7 .elementor-element.elementor-element-93e0489 img{width:100vw;max-width:95vw;}.elementor-7 .elementor-element.elementor-element-93e0489 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-7 .elementor-element.elementor-element-a16e786 > .elementor-container{min-height:0px;}.elementor-7 .elementor-element.elementor-element-f9af7b7{width:100%;z-index:2;}.elementor-7 .elementor-element.elementor-element-f9af7b7.elementor-column > .elementor-widget-wrap{justify-content:flex-start;}.elementor-7 .elementor-element.elementor-element-f9af7b7 > .elementor-element-populated{padding:0px 0px 0px 0px;}.elementor-7 .elementor-element.elementor-element-37c5822 > .elementor-container{max-width:500px;}.elementor-7 .elementor-element.elementor-element-37c5822{margin-top:0px;margin-bottom:0px;}.elementor-7 .elementor-element.elementor-element-eef43c6{width:20%;}.elementor-7 .elementor-element.elementor-element-9a1752e .elementor-icon{font-size:20px;}.elementor-7 .elementor-element.elementor-element-af4b0b0 .elementor-heading-title{font-size:10px;}.elementor-7 .elementor-element.elementor-element-e2ef77b{width:20%;}.elementor-7 .elementor-element.elementor-element-1d9c6fe .elementor-icon{font-size:20px;}.elementor-7 .elementor-element.elementor-element-a44908b .elementor-heading-title{font-size:10px;}.elementor-7 .elementor-element.elementor-element-caad225{width:20%;}.elementor-7 .elementor-element.elementor-element-3788ec0 .elementor-icon{font-size:20px;}.elementor-7 .elementor-element.elementor-element-1d4517c .elementor-heading-title{font-size:10px;}.elementor-7 .elementor-element.elementor-element-0f96dde{width:20%;}.elementor-7 .elementor-element.elementor-element-71afab8 .elementor-icon{font-size:20px;}.elementor-7 .elementor-element.elementor-element-5e87ac4 .elementor-heading-title{font-size:10px;}.elementor-7 .elementor-element.elementor-element-48c0f0c{width:20%;}.elementor-7 .elementor-element.elementor-element-9fa4c28 .elementor-icon{font-size:20px;}.elementor-7 .elementor-element.elementor-element-bdf866d .elementor-heading-title{font-size:10px;}}/* Start custom CSS for html, class: .elementor-element-9dcedb6 */.grid { height: 100%; max-width: 100%; width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; } .grid-item { width: 500px; height: 1500px; background-color: transparent; } .grid-item-interior { height: 100%; width: 100%; display: block; position: absolute; top: 0; left: 0; background-color: #transparent; } /* ==================== Door Properties =============================== */ .door { width: 100%; height: 100%; display: block; overflow: hidden; position: relative; top: 0; left: 0; } .left, .right { height: 100%; width: 50%; display: inline-block; position: absolute; transition: all 0.5s ease-in-out, border 0.1s ease; } .right { top: 0; right: 0; } .left { top: 0; left: 0; } /* ==================== Keyframe Animations =========================== */ /* ---------- Top Bounce ---------- */ @keyframes topBounce { 0% {transform: translateY(0%);} 10% {transform: translateY(-95%);} 20% {transform: translateY(-55%);} 30% {transform: translateY(-95%);} 40% {transform: translateY(-65%);} 50% {transform: translateY(-95%);} 60% {transform: translateY(-75%);} 70% {transform: translateY(-95%);} 80% {transform: translateY(-85%);} 90% {transform: translateY(-95%);} 100% {transform: translateY(-100%);} } /* ---------- Bottom Bounce ---------- */ @keyframes bottomBounce { 0% {transform: translateY(0%);} 10% {transform: translateY(95%);} 20% {transform: translateY(55%);} 30% {transform: translateY(95%);} 40% {transform: translateY(65%);} 50% {transform: translateY(95%);} 60% {transform: translateY(75%);} 70% {transform: translateY(95%);} 80% {transform: translateY(85%);} 90% {transform: translateY(95%);} 100% {transform: translateY(100%);} } /* ---------- Bottom Bounce Short ---------- */ @keyframes bottomBounceShort { 0% {transform: translateY(50%);} 10% {transform: translateY(25%);} 20% {transform: translateY(95%);} 30% {transform: translateY(55%);} 40% {transform: translateY(95%);} 50% {transform: translateY(65%);} 60% {transform: translateY(96%);} 70% {transform: translateY(75%);} 80% {transform: translateY(95%);} 90% {transform: translateY(97.5%);} 100% {transform: translateY(100%);} } /* ---------- Bottom to Top ---------- */ @keyframes bottomToTop { 0% {transform: translateY(0%);} 10% {transform: translateY(50%);} 20% {transform: translateY(75%);} 30% {transform: translateY(100%);} 40% {transform: translateY(50%);} 50% {transform: translateY(25%);} 60% {transform: translateY(0%);} 70% {transform: translateY(-25%);} 80% {transform: translateY(-50%);} 90% {transform: translateY(-75%);} 100% {transform: translateY(-100%);} } /* ---------- Up to Left ---------- */ @keyframes upToLeft { 0% {transform: translateY(0%);} 10% {transform: translateY(-20%);} 20% {transform: translateY(-40%);} 30% {transform: translateY(-50%);} 40% {transform: translateY(-50%);} 50% {transform: translateY(-50%);} 60% {transform: translateY(-50%) translateX(0%);} 70% {transform: translateY(-50%) translateX(-25%);} 80% {transform: translateY(-50%) translateX(-50%);} 90% {transform: translateY(-50%) translateX(-75%);} 100% {transform: translateY(-50%) translateX(-100%);} } /* ---------- Up to Right ---------- */ @keyframes upToRight { 0% {transform: translateY(0%);} 10% {transform: translateY(-20%);} 20% {transform: translateY(-40%);} 30% {transform: translateY(-50%);} 40% {transform: translateY(-50%);} 50% {transform: translateY(-50%);} 60% {transform: translateY(-50%) translateX(0%);} 70% {transform: translateY(-50%) translateX(25%);} 80% {transform: translateY(-50%) translateX(50%);} 90% {transform: translateY(-50%) translateX(75%);} 100% {transform: translateY(-50%) translateX(100%);} } /* ---------- Down to Left ---------- */ @keyframes downToLeft { 0% {transform: translateY(0%);} 10% {transform: translateY(20%);} 20% {transform: translateY(40%);} 30% {transform: translateY(50%);} 40% {transform: translateY(50%);} 50% {transform: translateY(50%);} 60% {transform: translateY(50%) translateX(0%);} 70% {transform: translateY(50%) translateX(-25%);} 80% {transform: translateY(50%) translateX(-50%);} 90% {transform: translateY(50%) translateX(-75%);} 100% {transform: translateY(50%) translateX(-100%);} } /* ---------- Down to Right ---------- */ @keyframes downToRight { 0% {transform: translateY(0%);} 10% {transform: translateY(20%);} 20% {transform: translateY(40%);} 30% {transform: translateY(50%);} 40% {transform: translateY(50%);} 50% {transform: translateY(50%);} 60% {transform: translateY(50%) translateX(0%);} 70% {transform: translateY(50%) translateX(25%);} 80% {transform: translateY(50%) translateX(50%);} 90% {transform: translateY(50%) translateX(75%);} 100% {transform: translateY(50%) translateX(100%);} } /* ---------- Left Bounce ---------- */ @keyframes leftBounce { 0% {transform: translateX(0%);} 10% {transform: translateX(-95%);} 20% {transform: translateX(-55%);} 30% {transform: translateX(-95%);} 40% {transform: translateX(-65%);} 50% {transform: translateX(-95%);} 60% {transform: translateX(-75%);} 70% {transform: translateX(-95%);} 80% {transform: translateX(-85%);} 90% {transform: translateX(-95%);} 100% {transform: translateX(-100%);} } /* ---------- Right Bounce ---------- */ @keyframes rightBounce { 0% {transform: translateX(0%);} 10% {transform: translateX(95%);} 20% {transform: translateX(55%);} 30% {transform: translateX(95%);} 40% {transform: translateX(65%);} 50% {transform: translateX(95%);} 60% {transform: translateX(75%);} 70% {transform: translateX(95%);} 80% {transform: translateX(85%);} 90% {transform: translateX(95%);} 100% {transform: translateX(100%);} } /* ---------- Rumble ---------- */ @keyframes rumble { 0% {transform: rotate(0deg);} 5% {transform: rotate(5deg);} 10% {transform: rotate(0deg);} 15% {transform: rotate(-5deg);} 20% {transform: rotate(0deg);} 25% {transform: rotate(5deg);} 30% {transform: rotate(0deg);} 35% {transform: rotate(-5deg);} 40% {transform: rotate(0deg);} 45% {transform: rotate(5deg);} 50% {transform: rotate(0deg);} 55% {transform: rotate(-5deg);} 60% {transform: rotate(0deg);} 65% {transform: rotate(5deg);} 70% {transform: rotate(0deg);} 75% {transform: rotate(-5deg);} 80% {transform: rotate(0deg);} 85% {transform: rotate(5deg);} 90% {transform: rotate(0deg);} 95% {transform: rotate(-5deg);} 100% {transform: rotate(0deg); opacity: 0;} } /* ==================== Individual Door Animations ==================== */ /* ---------- Door One ---------- */ #door1 .left, #door1 .right { background: #f8efec; } #door1 .left { background: url(https://perkahwinan.husnulsyamil.com/wp-content/uploads/2022/12/door7.png) no-repeat; background-size: contain; } #door1.active .left { transform: translateX(-100%); } #door1.active .right { transform: translateX(100%); }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-a3b5f6f */.pill { width: 100px; height: 100px; border-radius: 50px; background-color: #ffe8e8; transition: width .5s ease; box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.5); } .pill-img{ width: 100px; height: 100px; border-radius: 50px; } .pillbox{ width:100%; height: 100vh; align-items: center; display: grid; justify-content: center; }/* End custom CSS */ /* Start custom CSS for section, class: .elementor-element-e194751 */.maindivcontent{ overflow-x: hidden; }/* End custom CSS */ /* Start custom CSS for section, class: .elementor-element-a16e786 */.elementor-7 .elementor-element.elementor-element-a16e786:not(.elementor-motion-effects-element-type-background), .elementor-7 .elementor-element.elementor-element-a16e786 > .elementor-motion-effects-container > .elementor-motion-effects-layer { HEIGHT: 65PX; overflow-x: hidden; }/* End custom CSS */