.elementor-kit-11{--e-global-color-primary:#3550D7;--e-global-color-secondary:#000059;--e-global-color-text:#333333;--e-global-color-accent:#F4F6FC;--e-global-color-22c06cc:#2B5CE6;--e-global-color-2976b3f:#3366FF;--e-global-color-65071ca:#001A72;--e-global-color-a703d71:#111111;--e-global-color-0c6efbc:#FFFFFF;--e-global-color-86a16c7:#000000;--e-global-color-deaa55a:#D70000;--e-global-color-4b93cf3:#00B004;--e-global-color-bc48d30:#555555;--e-global-color-e3d5a02:#666666;--e-global-color-d9eb09d:#1A1A1A;--e-global-color-a602612:#222222;--e-global-color-a29f01f:#EEF2F6;--e-global-color-34ee84c:#ACD0FF;--e-global-color-854313f:#C6C6C7;--e-global-color-8cb818b:#EAF1FF;--e-global-color-5d3ec39:#2F5077;--e-global-color-95d6841:#1E3959;--e-global-typography-primary-font-family:"Heebo";--e-global-typography-primary-font-size:4rem;--e-global-typography-primary-font-weight:800;--e-global-typography-primary-line-height:1.1em;--e-global-typography-secondary-font-family:"Heebo";--e-global-typography-secondary-font-size:2rem;--e-global-typography-secondary-font-weight:500;--e-global-typography-secondary-line-height:1.1em;--e-global-typography-text-font-family:"Assistant";--e-global-typography-text-font-size:1rem;--e-global-typography-text-font-weight:500;--e-global-typography-text-line-height:1.5em;--e-global-typography-accent-font-family:"Assistant";--e-global-typography-accent-font-size:1.1rem;--e-global-typography-accent-font-weight:600;--e-global-typography-accent-line-height:1.5em;--e-global-typography-1e88db3-font-family:"Heebo";--e-global-typography-1e88db3-font-size:4rem;--e-global-typography-1e88db3-font-weight:700;--e-global-typography-1e88db3-line-height:1.1em;--e-global-typography-3610b2d-font-family:"Heebo";--e-global-typography-3610b2d-font-size:2rem;--e-global-typography-3610b2d-font-weight:700;--e-global-typography-3610b2d-line-height:1.1em;--e-global-typography-7aec803-font-family:"Heebo";--e-global-typography-7aec803-font-size:1.5rem;--e-global-typography-7aec803-font-weight:600;--e-global-typography-7aec803-line-height:1.4em;--e-global-typography-cf5310a-font-family:"Heebo";--e-global-typography-cf5310a-font-size:1.25rem;--e-global-typography-cf5310a-font-weight:600;--e-global-typography-cf5310a-line-height:1.4em;--e-global-typography-9c23a22-font-size:1.125rem;--e-global-typography-9c23a22-font-weight:600;--e-global-typography-9c23a22-line-height:1.4em;--e-global-typography-4144764-font-size:1.1rem;--e-global-typography-4144764-font-weight:500;--e-global-typography-4144764-line-height:1.5em;--e-global-typography-12a06df-font-size:2rem;--e-global-typography-12a06df-font-weight:500;--e-global-typography-12a06df-line-height:1.2em;--e-global-typography-a730e2b-font-size:1.5rem;--e-global-typography-a730e2b-font-weight:500;--e-global-typography-a730e2b-line-height:1.4em;--e-global-typography-9a40849-font-size:1rem;--e-global-typography-9a40849-font-weight:600;--e-global-typography-9a40849-line-height:1.5em;--e-global-typography-d207d2f-font-size:0.9rem;--e-global-typography-d207d2f-font-weight:600;--e-global-typography-d207d2f-line-height:1.6em;--e-global-typography-881aa58-font-size:0.9rem;--e-global-typography-881aa58-font-weight:600;--e-global-typography-881aa58-line-height:1.4em;--e-global-typography-05ffaef-font-size:0.7rem;--e-global-typography-05ffaef-font-weight:500;--e-global-typography-05ffaef-line-height:1.6em;color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );line-height:var( --e-global-typography-text-line-height );}.elementor-kit-11 button,.elementor-kit-11 input[type="button"],.elementor-kit-11 input[type="submit"],.elementor-kit-11 .elementor-button{background-color:var( --e-global-color-primary );font-family:"Assistant", Sans-serif;font-size:1rem;font-weight:700;line-height:1.2em;color:var( --e-global-color-0c6efbc );border-style:none;border-radius:6px 6px 6px 6px;padding:0.5em 1.6em 0.5em 1.6em;}.elementor-kit-11 button:hover,.elementor-kit-11 button:focus,.elementor-kit-11 input[type="button"]:hover,.elementor-kit-11 input[type="button"]:focus,.elementor-kit-11 input[type="submit"]:hover,.elementor-kit-11 input[type="submit"]:focus,.elementor-kit-11 .elementor-button:hover,.elementor-kit-11 .elementor-button:focus{background-color:var( --e-global-color-secondary );color:var( --e-global-color-0c6efbc );}.elementor-kit-11 h1{font-family:var( --e-global-typography-1e88db3-font-family ), Sans-serif;font-size:var( --e-global-typography-1e88db3-font-size );font-weight:var( --e-global-typography-1e88db3-font-weight );line-height:var( --e-global-typography-1e88db3-line-height );}.elementor-kit-11 h2{font-family:var( --e-global-typography-3610b2d-font-family ), Sans-serif;font-size:var( --e-global-typography-3610b2d-font-size );font-weight:var( --e-global-typography-3610b2d-font-weight );line-height:var( --e-global-typography-3610b2d-line-height );}.elementor-kit-11 h3{font-family:var( --e-global-typography-7aec803-font-family ), Sans-serif;font-size:var( --e-global-typography-7aec803-font-size );font-weight:var( --e-global-typography-7aec803-font-weight );line-height:var( --e-global-typography-7aec803-line-height );}.elementor-kit-11 h4{font-family:var( --e-global-typography-cf5310a-font-family ), Sans-serif;font-size:var( --e-global-typography-cf5310a-font-size );font-weight:var( --e-global-typography-cf5310a-font-weight );line-height:var( --e-global-typography-cf5310a-line-height );}.elementor-kit-11 h5{font-size:var( --e-global-typography-9c23a22-font-size );font-weight:var( --e-global-typography-9c23a22-font-weight );line-height:var( --e-global-typography-9c23a22-line-height );}.elementor-kit-11 h6{font-size:var( --e-global-typography-4144764-font-size );font-weight:var( --e-global-typography-4144764-font-weight );line-height:var( --e-global-typography-4144764-line-height );}.elementor-kit-11 img{border-style:none;}.elementor-kit-11 label{color:var( --e-global-color-text );font-size:0.9rem;font-weight:600;line-height:1.6em;}.elementor-kit-11 input:not([type="button"]):not([type="submit"]),.elementor-kit-11 textarea,.elementor-kit-11 .elementor-field-textual{font-family:"Assistant", Sans-serif;font-size:1rem;font-weight:600;line-height:1.6em;color:var( --e-global-color-text );accent-color:var( --e-global-color-primary );background-color:var( --e-global-color-0c6efbc );border-style:solid;border-width:0.9px 0.9px 0.9px 0.9px;border-color:var( --e-global-color-854313f );border-radius:4px 4px 4px 4px;padding:0.5rem 0.8rem 0.5rem 0.8rem;}.elementor-kit-11 input:focus:not([type="button"]):not([type="submit"]),.elementor-kit-11 textarea:focus,.elementor-kit-11 .elementor-field-textual:focus{box-shadow:0px 0px 3px 0px rgba(42.99999999999998, 92.00000000000011, 230, 0.1);border-style:solid;border-width:1px 1px 1px 1px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1100px;}.e-con{--container-max-width:1100px;--container-default-padding-top:0.5rem;--container-default-padding-right:1rem;--container-default-padding-bottom:0.5rem;--container-default-padding-left:1rem;}.elementor-widget:not(:last-child){--kit-widget-spacing:1rem;}.elementor-element{--widgets-spacing:1rem 1rem;--widgets-spacing-row:1rem;--widgets-spacing-column:1rem;}{}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:1366px){.elementor-kit-11{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-kit-11 h1{font-size:var( --e-global-typography-1e88db3-font-size );line-height:var( --e-global-typography-1e88db3-line-height );}.elementor-kit-11 h2{font-size:var( --e-global-typography-3610b2d-font-size );line-height:var( --e-global-typography-3610b2d-line-height );}.elementor-kit-11 h3{font-size:var( --e-global-typography-7aec803-font-size );line-height:var( --e-global-typography-7aec803-line-height );}.elementor-kit-11 h4{font-size:var( --e-global-typography-cf5310a-font-size );line-height:var( --e-global-typography-cf5310a-line-height );}.elementor-kit-11 h5{font-size:var( --e-global-typography-9c23a22-font-size );line-height:var( --e-global-typography-9c23a22-line-height );}.elementor-kit-11 h6{font-size:var( --e-global-typography-4144764-font-size );line-height:var( --e-global-typography-4144764-line-height );}}@media(max-width:1024px){.elementor-kit-11{--e-global-typography-primary-font-size:3rem;--e-global-typography-primary-line-height:1.1em;--e-global-typography-secondary-font-size:2rem;--e-global-typography-secondary-line-height:1.3em;--e-global-typography-text-font-size:0.9rem;--e-global-typography-text-line-height:1.6em;--e-global-typography-accent-font-size:1rem;--e-global-typography-accent-line-height:1.4em;--e-global-typography-1e88db3-font-size:3rem;--e-global-typography-1e88db3-line-height:1.2em;--e-global-typography-3610b2d-font-size:2rem;--e-global-typography-3610b2d-line-height:1.2em;--e-global-typography-7aec803-font-size:1.5rem;--e-global-typography-7aec803-line-height:1.4em;--e-global-typography-cf5310a-font-size:1.1rem;--e-global-typography-cf5310a-line-height:1.5em;--e-global-typography-9c23a22-font-size:1.2rem;--e-global-typography-9c23a22-line-height:1.4em;--e-global-typography-4144764-font-size:1.1rem;--e-global-typography-4144764-line-height:1.5em;--e-global-typography-12a06df-font-size:2.5rem;--e-global-typography-a730e2b-font-size:1.7rem;--e-global-typography-9a40849-font-size:1rem;--e-global-typography-9a40849-line-height:1.5em;--e-global-typography-d207d2f-font-size:0.9rem;--e-global-typography-d207d2f-line-height:1.5em;--e-global-typography-881aa58-font-size:0.8rem;--e-global-typography-881aa58-line-height:1.4em;--e-global-typography-05ffaef-font-size:0.7rem;--e-global-typography-05ffaef-line-height:1.5em;font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-kit-11 h1{font-size:var( --e-global-typography-1e88db3-font-size );line-height:var( --e-global-typography-1e88db3-line-height );}.elementor-kit-11 h2{font-size:var( --e-global-typography-3610b2d-font-size );line-height:var( --e-global-typography-3610b2d-line-height );}.elementor-kit-11 h3{font-size:var( --e-global-typography-7aec803-font-size );line-height:var( --e-global-typography-7aec803-line-height );}.elementor-kit-11 h4{font-size:var( --e-global-typography-cf5310a-font-size );line-height:var( --e-global-typography-cf5310a-line-height );}.elementor-kit-11 h5{font-size:var( --e-global-typography-9c23a22-font-size );line-height:var( --e-global-typography-9c23a22-line-height );}.elementor-kit-11 h6{font-size:var( --e-global-typography-4144764-font-size );line-height:var( --e-global-typography-4144764-line-height );}.elementor-kit-11 button,.elementor-kit-11 input[type="button"],.elementor-kit-11 input[type="submit"],.elementor-kit-11 .elementor-button{font-size:1rem;line-height:1.6em;}.elementor-kit-11 input:not([type="button"]):not([type="submit"]),.elementor-kit-11 textarea,.elementor-kit-11 .elementor-field-textual{padding:0.3em 1.5em 0.3em 1.5em;}.e-con{--container-default-padding-top:1rem;--container-default-padding-right:1rem;--container-default-padding-bottom:1rem;--container-default-padding-left:1rem;}}@media(max-width:767px){.elementor-kit-11{--e-global-typography-primary-line-height:1.1em;--e-global-typography-secondary-font-size:1.5rem;--e-global-typography-secondary-line-height:1.3em;--e-global-typography-text-font-size:1rem;--e-global-typography-text-line-height:1.6em;--e-global-typography-accent-font-size:1rem;--e-global-typography-accent-line-height:1.4em;--e-global-typography-1e88db3-font-size:2.5rem;--e-global-typography-1e88db3-line-height:1.1em;--e-global-typography-3610b2d-font-size:2rem;--e-global-typography-3610b2d-line-height:1.2em;--e-global-typography-7aec803-font-size:1.5rem;--e-global-typography-7aec803-line-height:1.3em;--e-global-typography-cf5310a-font-size:1.1rem;--e-global-typography-cf5310a-line-height:1.1em;--e-global-typography-9c23a22-font-size:1.1rem;--e-global-typography-9c23a22-line-height:1.3em;--e-global-typography-4144764-font-size:1rem;--e-global-typography-4144764-line-height:1.3em;--e-global-typography-12a06df-font-size:2.5rem;--e-global-typography-12a06df-line-height:1.1em;--e-global-typography-a730e2b-font-size:1.7rem;--e-global-typography-a730e2b-line-height:1.2em;--e-global-typography-9a40849-font-size:1rem;--e-global-typography-9a40849-line-height:1.5em;--e-global-typography-d207d2f-font-size:0.9rem;--e-global-typography-d207d2f-line-height:1.5em;--e-global-typography-881aa58-font-size:0.8rem;--e-global-typography-881aa58-line-height:1.4em;--e-global-typography-05ffaef-font-size:0.7rem;--e-global-typography-05ffaef-line-height:1.5em;font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-kit-11 h1{font-size:var( --e-global-typography-1e88db3-font-size );line-height:var( --e-global-typography-1e88db3-line-height );}.elementor-kit-11 h2{font-size:var( --e-global-typography-3610b2d-font-size );line-height:var( --e-global-typography-3610b2d-line-height );}.elementor-kit-11 h3{font-size:var( --e-global-typography-7aec803-font-size );line-height:var( --e-global-typography-7aec803-line-height );}.elementor-kit-11 h4{font-size:var( --e-global-typography-cf5310a-font-size );line-height:var( --e-global-typography-cf5310a-line-height );}.elementor-kit-11 h5{font-size:var( --e-global-typography-9c23a22-font-size );line-height:var( --e-global-typography-9c23a22-line-height );}.elementor-kit-11 h6{font-size:var( --e-global-typography-4144764-font-size );line-height:var( --e-global-typography-4144764-line-height );}.elementor-kit-11 button,.elementor-kit-11 input[type="button"],.elementor-kit-11 input[type="submit"],.elementor-kit-11 .elementor-button{font-size:1rem;line-height:1.6em;}.e-con{--container-default-padding-top:1rem;--container-default-padding-right:1rem;--container-default-padding-bottom:1rem;--container-default-padding-left:1rem;}.site-header .site-branding{gap:1rem;}.site-header{padding-inline-end:1rem;padding-inline-start:1rem;}.site-header .site-branding .site-logo img{width:200px;max-width:200px;}.site-header .site-description{font-size:1rem;line-height:1.6em;}}@media(min-width:2400px){.elementor-kit-11{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-kit-11 h1{font-size:var( --e-global-typography-1e88db3-font-size );line-height:var( --e-global-typography-1e88db3-line-height );}.elementor-kit-11 h2{font-size:var( --e-global-typography-3610b2d-font-size );line-height:var( --e-global-typography-3610b2d-line-height );}.elementor-kit-11 h3{font-size:var( --e-global-typography-7aec803-font-size );line-height:var( --e-global-typography-7aec803-line-height );}.elementor-kit-11 h4{font-size:var( --e-global-typography-cf5310a-font-size );line-height:var( --e-global-typography-cf5310a-line-height );}.elementor-kit-11 h5{font-size:var( --e-global-typography-9c23a22-font-size );line-height:var( --e-global-typography-9c23a22-line-height );}.elementor-kit-11 h6{font-size:var( --e-global-typography-4144764-font-size );line-height:var( --e-global-typography-4144764-line-height );}}/* Start custom CSS *//* ========================================= 1. GLOBAL ICON FIX ========================================= */ /* Ensures SVG Icons always match the Text Color (White or Blue) */ .btn-ghost .elementor-button svg, .header-ghost .elementor-button svg, .btn-text-only .elementor-button svg { fill: currentColor !important; width: 1em !important; height: 1em !important; } /* ========================================= 2. GHOST BUTTONS (Fixed Sizing + Default Hover) ========================================= */ /* Base Setup: Removes physical border to prevent layout jumps */ .btn-ghost .elementor-button { border: none !important; } /* Idle State: Transparent with Fake Border */ .btn-ghost .elementor-button:not(:hover) { background-color: transparent !important; color: #000059 !important; box-shadow: inset 0 0 0 2px #000059 !important; } /* Dark Header Version (Idle) */ .header-ghost .elementor-button:not(:hover) { color: #FFFFFF !important; box-shadow: inset 0 0 0 2px #FFFFFF !important; } /* ========================================= 3. TEXT ONLY BUTTON (Transparent + Color Change) ========================================= */ .btn-text-only .elementor-button { background-color: transparent !important; border: none !important; box-shadow: none !important; color: #FFFFFF !important; transition: all 0.3s ease !important; } /* Hover State: Text & Icon turn Blue */ .btn-text-only .elementor-button:hover { background-color: transparent !important; color: #3550D7 !important; box-shadow: none !important; } /* ========================================= 4. DYNAMIC SIZING (Base on Elementor Size) ========================================= */ /* Scales everything (Padding, Text, Icon, Border Radius) relative to the original Elementor button size. */ /* Increase everything by 120% */ .btn-grow .elementor-button { transform: scale(1.2); transform-origin: center; /* Grows from the center */ } /* Decrease everything by 80% */ .btn-shrink .elementor-button { transform: scale(0.8); transform-origin: center; /* Shrinks to the center */ } .custom-rtl { direction: rtl !important; } /* COPY THIS CSS INTO YOUR WORDPRESS/ELEMENTOR (Site Settings > Custom CSS or Page Custom CSS) */ /* --- ORIGINAL DESKTOP STYLES --- */ /* 1. Main Container Setup */ .flip-box { display: grid !important; grid-template-columns: 1fr; grid-template-rows: 1fr; grid-template-areas: "stack"; overflow: hidden; cursor: pointer; } /* 2. Target both Front and Back to stack them */ .flip-box-front, .flip-box-back { grid-area: stack; transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1); width: 100%; } /* 3. Front Box State */ .flip-box-front { transform: translateY(0); z-index: 2; } /* 4. Back Box Initial State (Hidden at bottom) */ .flip-box-back { transform: translateY(100%); z-index: 3; } /* 5. HOVER EFFECTS (Desktop) */ .flip-box:hover .flip-box-front { transform: translateY(-20%); opacity: 0.5; } .flip-box:hover .flip-box-back { transform: translateY(0); } /* --- MOBILE & TABLET STYLES (Max Width 1024px) --- */ @media screen and (max-width: 1024px) { /* OPTION A: 'flip-box-bck' - Default to BACK */ .flip-box.flip-box-bck .flip-box-back { transform: translateY(0) !important; } .flip-box.flip-box-bck .flip-box-front { transform: translateY(-20%) !important; opacity: 0 !important; } /* OPTION B: 'flip-box-frt' - Default to FRONT (No Flip) */ .flip-box.flip-box-frt .flip-box-front, .flip-box.flip-box-frt:hover .flip-box-front { transform: translateY(0) !important; opacity: 1 !important; } .flip-box.flip-box-frt .flip-box-back, .flip-box.flip-box-frt:hover .flip-box-back { transform: translateY(100%) !important; } } /* --- BUTTON & HIDDEN CONTAINER STYLES --- */ /* 1. Smooth Animation for the Content */ .flip-hidden { /* Lower max-height makes the animation start immediately and feel faster. Adjust 800px if your content is longer. */ max-height: 0; opacity: 0; overflow: hidden; /* 'ease-out' starts fast and slows down at the end, feeling smoother */ transition: max-height 0.5s ease-out, opacity 0.5s ease-out; } .flip-hidden.is-visible { max-height: 1000px; /* High enough to fit content, low enough to keep animation fast */ opacity: 1; } /* 2. Button Icon Animation */ .flip-btnn .elementor-button-icon { transition: transform 0.4s ease; } .flip-btnn.is-active .elementor-button-icon { transform: rotate(180deg); } /* --- EXPAND/COLLAPSE FEATURE (Updated Heights) --- */ /* 1. Container Setup */ .expand-box { height: 250px; /* NEW: Default Collapsed Height */ overflow: hidden; transition: height 0.5s ease-in-out; position: relative; } /* 2. Expanded State */ .expand-box.expanded { height: 350px !important; /* NEW: Forces height to 350px when active */ } /* 3. Button Logic */ /* Removed pointer-events: none; so the user can click it again to close it */ .expand-box.expanded .expand-c-btnn { opacity: 0.5; } /* 4. Icon Logic */ .expand-c-icon { cursor: pointer; transition: transform 0.4s ease; display: inline-block; } /* Rotate icon 180deg when box is expanded */ .expand-box.expanded .expand-c-icon { transform: rotate(180deg); } /* ========================================= 1. DOWN ARROW LOGIC (#arrow-downn) ========================================= */ /* Parent Container */ #arrow-downn .elementor-icon { position: relative; display: inline-block; } /* Shared Animation (Main Icon + Clone) */ #arrow-downn .elementor-icon svg, #arrow-downn .elementor-icon::before { animation: slideFadeDown 2s infinite ease-in-out; display: block; } /* The "Clone" Icon (Ghost) */ #arrow-downn .elementor-icon::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; /* Down pointing arrow */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 45 38' fill='none'%3E%3Cpath d='M13.8457 15.9232L22.928 21.4617L31.1534 15.9232' stroke='white' stroke-width='3.46154' stroke-linecap='round'/%3E%3Cpath d='M13.8457 25.6155L22.928 31.154L31.1534 25.6155' stroke='white' stroke-width='3.46154' stroke-linecap='round'/%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; background-position: center; opacity: 0; animation-delay: 1s; pointer-events: none; } /* Down Animation Keyframes */ @keyframes slideFadeDown { 0% { opacity: 0; transform: translateY(-15px); } /* Start Top */ 50% { opacity: 1; } 100% { opacity: 0; transform: translateY(15px); } /* End Bottom */ } /* ========================================= 2. UP ARROW LOGIC (#arrow-upp) ========================================= */ /* Parent Container */ #arrow-upp .elementor-icon { position: relative; display: inline-block; } /* Shared Animation (Main Icon + Clone) */ #arrow-upp .elementor-icon svg, #arrow-upp .elementor-icon::before { animation: slideFadeUp 2s infinite ease-in-out; display: block; } /* The "Clone" Icon (Ghost) */ #arrow-upp .elementor-icon::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; /* I added a rotation to this SVG so it points UP */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 45 38' fill='none'%3E%3Cg transform='rotate(180 22.5 19)'%3E%3Cpath d='M13.8457 15.9232L22.928 21.4617L31.1534 15.9232' stroke='white' stroke-width='3.46154' stroke-linecap='round'/%3E%3Cpath d='M13.8457 25.6155L22.928 31.154L31.1534 25.6155' stroke='white' stroke-width='3.46154' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; background-position: center; opacity: 0; animation-delay: 1s; pointer-events: none; } /* Up Animation Keyframes (Opposite Direction) */ @keyframes slideFadeUp { 0% { opacity: 0; transform: translateY(15px); } /* Start Bottom */ 50% { opacity: 1; } 100% { opacity: 0; transform: translateY(-15px); } /* End Top */ } /* ========================================= 1. GLOBAL ANIMATION (Desktop & Mobile) ========================================= */ /* Apply transition to menu items on ALL devices */ .desktop-menu .elementor-item { transition: transform 0.3s ease; } /* Remove default Elementor underlines */ .desktop-menu .elementor-item:after, .desktop-menu .elementor-item:before { display: none !important; } /* ========================================= 2. DESKTOP STYLES (Min-Width 1025px) ========================================= */ @media (min-width: 1025px) { /* Make active menu item bolder on desktop only */ .desktop-menu .elementor-item.elementor-item-active { font-weight: 700 !important; } } /* ========================================= 3. MOBILE & TABLET STYLES (Max-Width 1024px) ========================================= */ @media (max-width: 1024px) { /* --- REQUIREMENT 1: TRANSPARENT HEADER BACKGROUND --- */ #desktop-header { background-color: transparent !important; background-image: none !important; box-shadow: none !important; } /* --- FIXING THE CLOSING GLITCH & TOP GAP --- */ .desktop-menu .elementor-nav-menu--dropdown { position: fixed !important; top: 0 !important; left: 0 !important; margin-top: 0 !important; /* Removes the top gap */ width: 75vw !important; height: auto !important; min-height: 80vh; max-height: 95vh; z-index: 9999 !important; /* Default state (Hidden) */ transform: translateX(-100%); transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1); } /* --- ACTIVE STATE (OPEN) --- */ .desktop-menu .elementor-menu-toggle.elementor-active ~ .elementor-nav-menu--dropdown { display: flex !important; flex-direction: column; /* FIX: 10px Radius Bottom Right */ border-radius: 0 0 10px 0 !important; /* FIX: Semi-Transparent Background + Blur */ background-color: rgba(255, 255, 255, 0.95) !important; backdrop-filter: blur(5px); padding: 70px 25px 40px 25px !important; overflow-y: auto; /* Overlay Shadow */ box-shadow: 0 10px 30px rgba(0,0,0,0.1), 0 0 0 100vw rgba(0,0,0,0.5); /* Slide In */ transform: translateX(0); /* RTL Alignment */ direction: rtl !important; text-align: right !important; } /* --- MENU ITEMS --- */ .desktop-menu .elementor-nav-menu--dropdown .elementor-item { display: block; width: 100%; text-align: right !important; font-size: 18px !important; color: #0d1a46 !important; /* UPDATED: Added 20px padding to left and right */ padding: 15px 20px !important; border-bottom: 1px solid rgba(0,0,0,0.05); /* Softer separator */ } /* Mobile Hover Animation */ .desktop-menu .elementor-nav-menu--dropdown .elementor-item:hover, .desktop-menu .elementor-nav-menu--dropdown .elementor-item:active { transform: translateX(-5px); background: transparent !important; } /* --- CLOSE BUTTON --- */ .elementor-menu-toggle.elementor-active { position: fixed !important; top: 25px !important; left: 25px !important; z-index: 10000 !important; background: transparent !important; } .elementor-menu-toggle.elementor-active i, .elementor-menu-toggle.elementor-active svg { fill: #0d1a46 !important; color: #0d1a46 !important; width: 28px; height: 28px; } /* --- HIDE ORIGINAL BUTTONS --- */ #desktop-pri-btn, #desktop-sec-btn { display: none !important; } /* --- CLONED BUTTONS STYLING --- */ .elementor-nav-menu--dropdown .mobile-cloned-btn { display: block !important; width: 100% !important; margin-top: 15px; flex-shrink: 0; } /* Flex Ordering */ .desktop-menu .elementor-nav-menu--dropdown > ul { order: 1; width: 100%; margin-bottom: 30px; } .mobile-pri-btn { order: 2 !important; } .mobile-sec-btn { order: 3 !important; } /* Button 1: Contact */ .mobile-pri-btn .elementor-button { width: 100% !important; display: block !important; background-color: #3b55e6 !important; color: #ffffff !important; border-radius: 8px !important; padding: 15px !important; font-weight: 600 !important; border: none !important; } /* Button 2: Employee Login */ .mobile-sec-btn .elementor-button { width: 100% !important; display: block !important; background-color: #ffffff !important; color: #0d1a46 !important; border: 2px solid #0d1a46 !important; border-radius: 8px !important; padding: 15px !important; font-weight: 600 !important; } } /* 1. Ensure the Heading Title cuts off with an ellipsis (...) */ [class*="trim-"] .elementor-heading-title { white-space: nowrap; /* Prevents the text from dropping to a new line */ overflow: hidden; /* Hides any text that gets pushed outside the box */ text-overflow: ellipsis; /* Magically adds the "..." at the cut-off point */ max-width: 100%; /* Ensures the boundary is the edge of the column */ display: block; /* Required for the ellipsis effect to work */ } /* 2. Add a 'Help' cursor so users know it's trimmed */ [class*="trim-"] .elementor-widget-container { cursor: help; } /* 3. NEW: Override the single-line rules when expanded! */ [class*="trim-"].is-expanded .elementor-heading-title { white-space: normal !important; /* Allows text to drop to multiple lines */ overflow: visible !important; /* Shows all the text */ text-overflow: clip !important; /* Removes the CSS "..." */ } /* 4. NEW: Return the cursor to normal when expanded */ [class*="trim-"].is-expanded .elementor-widget-container { cursor: auto; }/* End custom CSS */