.elementor-1072 .elementor-element.elementor-element-0af205d{--display:flex;--padding-top:80px;--padding-bottom:80px;--padding-left:0px;--padding-right:0px;}.elementor-1072 .elementor-element.elementor-element-0c4a349{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:flex-start;--gap:50px 50px;--row-gap:50px;--column-gap:50px;--margin-top:-22px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1072 .elementor-element.elementor-element-85ebff8{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-theme-post-title .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-1072 .elementor-element.elementor-element-2e222bd{z-index:10;}.elementor-1072 .elementor-element.elementor-element-2e222bd .elementor-heading-title{font-family:"DM Sans", Sans-serif;font-size:52px;font-weight:700;line-height:1.1em;color:#000000;}.elementor-widget-theme-post-content{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-1072 .elementor-element.elementor-element-4e121ae{color:var( --e-global-color-b295c87 );}.elementor-1072 .elementor-element.elementor-element-fc6c1f0 .highlight-height{height:326px;}.elementor-1072 .elementor-element.elementor-element-3f5acc1{--display:flex;border-style:solid;--border-style:solid;border-width:1px 1px 1px 1px;--border-top-width:1px;--border-right-width:1px;--border-bottom-width:1px;--border-left-width:1px;border-color:#0000001C;--border-color:#0000001C;--border-radius:10px 10px 10px 10px;--padding-top:20px;--padding-bottom:20px;--padding-left:20px;--padding-right:20px;}.elementor-1072 .elementor-element.elementor-element-3f5acc1:not(.elementor-motion-effects-element-type-background), .elementor-1072 .elementor-element.elementor-element-3f5acc1 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F5F7FA;}.elementor-widget-button .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-1072 .elementor-element.elementor-element-c5951a3 .elementor-button{background-color:var( --e-global-color-primary );font-family:"DM Sans", Sans-serif;font-size:15px;font-weight:400;text-transform:capitalize;fill:#FFFFFF;color:#FFFFFF;box-shadow:37px 22px 50px 54px rgba(255, 255, 255, 0.3);border-style:solid;border-width:1px 1px 1px 1px;border-color:var( --e-global-color-primary );border-radius:10px 10px 10px 10px;padding:14px 15px 14px 15px;}.elementor-1072 .elementor-element.elementor-element-c5951a3:hover{--e-transform-translateY:-5px;}.elementor-1072 .elementor-element.elementor-element-c5951a3 .elementor-button-content-wrapper{flex-direction:row;}.elementor-1072 .elementor-element.elementor-element-c5951a3 .elementor-button .elementor-button-content-wrapper{gap:9px;}.elementor-1072 .elementor-element.elementor-element-ec0d1ec{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;border-style:solid;--border-style:solid;border-width:1px 1px 1px 1px;--border-top-width:1px;--border-right-width:1px;--border-bottom-width:1px;--border-left-width:1px;border-color:#00000017;--border-color:#00000017;--border-radius:10px 10px 10px 10px;--padding-top:20px;--padding-bottom:20px;--padding-left:20px;--padding-right:20px;}.elementor-1072 .elementor-element.elementor-element-ec0d1ec:not(.elementor-motion-effects-element-type-background), .elementor-1072 .elementor-element.elementor-element-ec0d1ec > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-1072 .elementor-element.elementor-element-2a0c43f .elementor-heading-title{font-family:"DM Sans", Sans-serif;font-size:16px;font-weight:700;line-height:25px;color:#000000;}.elementor-1072 .elementor-element.elementor-element-4521c06 .elementor-heading-title{font-family:"DM Mono", Sans-serif;font-size:15px;font-weight:500;line-height:25px;color:var( --e-global-color-primary );}.elementor-1072 .elementor-element.elementor-element-ae39e28{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;border-style:solid;--border-style:solid;border-width:1px 1px 1px 1px;--border-top-width:1px;--border-right-width:1px;--border-bottom-width:1px;--border-left-width:1px;border-color:#00000017;--border-color:#00000017;--border-radius:10px 10px 10px 10px;--padding-top:20px;--padding-bottom:20px;--padding-left:20px;--padding-right:20px;}.elementor-1072 .elementor-element.elementor-element-ae39e28:not(.elementor-motion-effects-element-type-background), .elementor-1072 .elementor-element.elementor-element-ae39e28 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-1072 .elementor-element.elementor-element-8c61186 .elementor-heading-title{font-family:"DM Sans", Sans-serif;font-size:16px;font-weight:700;line-height:25px;color:#000000;}.elementor-1072 .elementor-element.elementor-element-421e6ab .elementor-heading-title{font-family:"DM Mono", Sans-serif;font-size:15px;font-weight:500;line-height:25px;color:#000000;}.elementor-1072 .elementor-element.elementor-element-a30137c{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;border-style:solid;--border-style:solid;border-width:1px 1px 1px 1px;--border-top-width:1px;--border-right-width:1px;--border-bottom-width:1px;--border-left-width:1px;border-color:#00000017;--border-color:#00000017;--border-radius:10px 10px 10px 10px;--padding-top:20px;--padding-bottom:20px;--padding-left:20px;--padding-right:20px;}.elementor-1072 .elementor-element.elementor-element-a30137c:not(.elementor-motion-effects-element-type-background), .elementor-1072 .elementor-element.elementor-element-a30137c > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-1072 .elementor-element.elementor-element-0c300ad .elementor-heading-title{font-family:"DM Sans", Sans-serif;font-size:16px;font-weight:700;line-height:25px;color:#000000;}.elementor-1072 .elementor-element.elementor-element-e12a44e .elementor-heading-title{font-family:"DM Mono", Sans-serif;font-size:15px;font-weight:500;line-height:25px;color:#000000;}.elementor-1072 .elementor-element.elementor-element-a90fae7{--display:flex;--padding-top:80px;--padding-bottom:80px;--padding-left:20px;--padding-right:20px;}.elementor-1072 .elementor-element.elementor-element-a90fae7:not(.elementor-motion-effects-element-type-background), .elementor-1072 .elementor-element.elementor-element-a90fae7 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F5F7FA;}.elementor-1072 .elementor-element.elementor-element-9afef81{width:100%;max-width:100%;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;text-align:center;}.elementor-1072 .elementor-element.elementor-element-9afef81 .elementor-heading-title{font-family:"DM Sans", Sans-serif;font-size:45px;font-weight:700;line-height:62px;letter-spacing:-0.6px;color:#000000;}.elementor-1072 .elementor-element.elementor-element-9ce39a4{--display:flex;--border-radius:10px 10px 10px 10px;--padding-top:15px;--padding-bottom:15px;--padding-left:15px;--padding-right:15px;}.elementor-1072 .elementor-element.elementor-element-9ce39a4:not(.elementor-motion-effects-element-type-background), .elementor-1072 .elementor-element.elementor-element-9ce39a4 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-1072 .elementor-element.elementor-element-ca2a119{width:var( --container-widget-width, 80% );max-width:80%;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;--container-widget-width:80%;--container-widget-flex-grow:0;font-family:"DM Sans", Sans-serif;font-size:17px;font-weight:400;color:#14181FCF;}.elementor-1072 .elementor-element.elementor-element-ca2a119 p{margin-block-end:0px;}.elementor-1072 .elementor-element.elementor-element-f9a813b{--display:flex;--border-radius:10px 10px 10px 10px;--padding-top:15px;--padding-bottom:15px;--padding-left:15px;--padding-right:15px;}.elementor-1072 .elementor-element.elementor-element-f9a813b:not(.elementor-motion-effects-element-type-background), .elementor-1072 .elementor-element.elementor-element-f9a813b > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-1072 .elementor-element.elementor-element-3a72666{width:var( --container-widget-width, 80% );max-width:80%;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;--container-widget-width:80%;--container-widget-flex-grow:0;font-family:"DM Sans", Sans-serif;font-size:17px;font-weight:400;color:#14181FCF;}.elementor-1072 .elementor-element.elementor-element-3a72666 p{margin-block-end:0px;}.elementor-1072 .elementor-element.elementor-element-647b1f2{--display:flex;--border-radius:10px 10px 10px 10px;--padding-top:15px;--padding-bottom:15px;--padding-left:15px;--padding-right:15px;}.elementor-1072 .elementor-element.elementor-element-647b1f2:not(.elementor-motion-effects-element-type-background), .elementor-1072 .elementor-element.elementor-element-647b1f2 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-1072 .elementor-element.elementor-element-01205ec{width:var( --container-widget-width, 80% );max-width:80%;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;--container-widget-width:80%;--container-widget-flex-grow:0;font-family:"DM Sans", Sans-serif;font-size:17px;font-weight:400;color:#14181FCF;}.elementor-1072 .elementor-element.elementor-element-01205ec p{margin-block-end:0px;}.elementor-1072 .elementor-element.elementor-element-0cb23da{--n-accordion-title-font-size:1rem;--n-accordion-title-justify-content:space-between;--n-accordion-title-flex-grow:1;--n-accordion-title-icon-order:initial;--n-accordion-item-title-space-between:15px;--n-accordion-item-title-distance-from-content:0px;--n-accordion-border-radius:10px 10px 10px 10px;--n-accordion-title-normal-color:#000000;--n-accordion-icon-size:15px;}.elementor-1072 .elementor-element.elementor-element-0cb23da > .e-n-accordion > .e-n-accordion-item > .e-n-accordion-item-title{background-color:#FFFFFF;}.elementor-1072 .elementor-element.elementor-element-0cb23da {--n-accordion-padding:15px 15px 15px 15px;}:where( .elementor-1072 .elementor-element.elementor-element-0cb23da > .e-n-accordion > .e-n-accordion-item > .e-n-accordion-item-title > .e-n-accordion-item-title-header ) > .e-n-accordion-item-title-text{font-weight:700;}.elementor-1072 .elementor-element.elementor-element-e61454d{--display:flex;--padding-top:80px;--padding-bottom:80px;--padding-left:20px;--padding-right:20px;}.elementor-1072 .elementor-element.elementor-element-e61454d:not(.elementor-motion-effects-element-type-background), .elementor-1072 .elementor-element.elementor-element-e61454d > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-1072 .elementor-element.elementor-element-40e0946{width:100%;max-width:100%;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;text-align:center;}.elementor-1072 .elementor-element.elementor-element-40e0946 .elementor-heading-title{font-family:"DM Sans", Sans-serif;font-size:45px;font-weight:700;line-height:62px;letter-spacing:-0.6px;color:#000000;}.elementor-widget-form .elementor-field-group > label, .elementor-widget-form .elementor-field-subgroup label{color:var( --e-global-color-text );}.elementor-widget-form .elementor-field-group > label{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-form .elementor-field-type-html{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-form .elementor-field-group .elementor-field{color:var( --e-global-color-text );}.elementor-widget-form .elementor-field-group .elementor-field, .elementor-widget-form .elementor-field-subgroup label{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-form .elementor-button{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-form .e-form__buttons__wrapper__button-next{background-color:var( --e-global-color-accent );}.elementor-widget-form .elementor-button[type="submit"]{background-color:var( --e-global-color-accent );}.elementor-widget-form .e-form__buttons__wrapper__button-previous{background-color:var( --e-global-color-accent );}.elementor-widget-form .elementor-message{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-form .e-form__indicators__indicator, .elementor-widget-form .e-form__indicators__indicator__label{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-form{--e-form-steps-indicator-inactive-primary-color:var( --e-global-color-text );--e-form-steps-indicator-active-primary-color:var( --e-global-color-accent );--e-form-steps-indicator-completed-primary-color:var( --e-global-color-accent );--e-form-steps-indicator-progress-color:var( --e-global-color-accent );--e-form-steps-indicator-progress-background-color:var( --e-global-color-text );--e-form-steps-indicator-progress-meter-color:var( --e-global-color-text );}.elementor-widget-form .e-form__indicators__indicator__progress__meter{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-1072 .elementor-element.elementor-element-9028fc0{width:var( --container-widget-width, 83% );max-width:83%;--container-widget-width:83%;--container-widget-flex-grow:0;--e-form-steps-indicators-spacing:20px;--e-form-steps-indicator-padding:30px;--e-form-steps-indicator-inactive-secondary-color:#ffffff;--e-form-steps-indicator-active-secondary-color:#ffffff;--e-form-steps-indicator-completed-secondary-color:#ffffff;--e-form-steps-divider-width:1px;--e-form-steps-divider-gap:10px;}.elementor-1072 .elementor-element.elementor-element-9028fc0.elementor-element{--align-self:center;}.elementor-1072 .elementor-element.elementor-element-9028fc0 .elementor-field-group{padding-right:calc( 10px/2 );padding-left:calc( 10px/2 );margin-bottom:10px;}.elementor-1072 .elementor-element.elementor-element-9028fc0 .elementor-form-fields-wrapper{margin-left:calc( -10px/2 );margin-right:calc( -10px/2 );margin-bottom:-10px;}.elementor-1072 .elementor-element.elementor-element-9028fc0 .elementor-field-group.recaptcha_v3-bottomleft, .elementor-1072 .elementor-element.elementor-element-9028fc0 .elementor-field-group.recaptcha_v3-bottomright{margin-bottom:0;}body.rtl .elementor-1072 .elementor-element.elementor-element-9028fc0 .elementor-labels-inline .elementor-field-group > label{padding-left:0px;}body:not(.rtl) .elementor-1072 .elementor-element.elementor-element-9028fc0 .elementor-labels-inline .elementor-field-group > label{padding-right:0px;}body .elementor-1072 .elementor-element.elementor-element-9028fc0 .elementor-labels-above .elementor-field-group > label{padding-bottom:0px;}.elementor-1072 .elementor-element.elementor-element-9028fc0 .elementor-field-type-html{padding-bottom:0px;}.elementor-1072 .elementor-element.elementor-element-9028fc0 .elementor-field-group .elementor-field:not(.elementor-select-wrapper){background-color:#F5F7FA;border-color:#02010112;border-radius:10px 10px 10px 10px;}.elementor-1072 .elementor-element.elementor-element-9028fc0 .elementor-field-group .elementor-select-wrapper select{background-color:#F5F7FA;border-color:#02010112;border-radius:10px 10px 10px 10px;}.elementor-1072 .elementor-element.elementor-element-9028fc0 .elementor-field-group .elementor-select-wrapper::before{color:#02010112;}.elementor-1072 .elementor-element.elementor-element-9028fc0 .e-form__buttons__wrapper__button-next{background-color:var( --e-global-color-primary );color:#ffffff;}.elementor-1072 .elementor-element.elementor-element-9028fc0 .elementor-button[type="submit"]{background-color:var( --e-global-color-primary );color:#ffffff;}.elementor-1072 .elementor-element.elementor-element-9028fc0 .elementor-button[type="submit"] svg *{fill:#ffffff;}.elementor-1072 .elementor-element.elementor-element-9028fc0 .e-form__buttons__wrapper__button-previous{color:#ffffff;}.elementor-1072 .elementor-element.elementor-element-9028fc0 .e-form__buttons__wrapper__button-next:hover{color:#ffffff;}.elementor-1072 .elementor-element.elementor-element-9028fc0 .elementor-button[type="submit"]:hover{color:#ffffff;}.elementor-1072 .elementor-element.elementor-element-9028fc0 .elementor-button[type="submit"]:hover svg *{fill:#ffffff;}.elementor-1072 .elementor-element.elementor-element-9028fc0 .e-form__buttons__wrapper__button-previous:hover{color:#ffffff;}.elementor-1072 .elementor-element.elementor-element-9028fc0 .elementor-button{padding:15px 0px 15px 0px;}@media(max-width:767px){.elementor-1072 .elementor-element.elementor-element-0af205d{--padding-top:40px;--padding-bottom:40px;--padding-left:20px;--padding-right:20px;}.elementor-1072 .elementor-element.elementor-element-2e222bd .elementor-heading-title{font-size:36px;}.elementor-1072 .elementor-element.elementor-element-a90fae7{--padding-top:40px;--padding-bottom:40px;--padding-left:20px;--padding-right:20px;}.elementor-1072 .elementor-element.elementor-element-9afef81 .elementor-heading-title{font-size:32px;line-height:35px;}.elementor-1072 .elementor-element.elementor-element-ca2a119{margin:15px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;--container-widget-width:100%;--container-widget-flex-grow:0;width:var( --container-widget-width, 100% );max-width:100%;}.elementor-1072 .elementor-element.elementor-element-3a72666{margin:15px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;--container-widget-width:100%;--container-widget-flex-grow:0;width:var( --container-widget-width, 100% );max-width:100%;}.elementor-1072 .elementor-element.elementor-element-01205ec{margin:15px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;--container-widget-width:100%;--container-widget-flex-grow:0;width:var( --container-widget-width, 100% );max-width:100%;}.elementor-1072 .elementor-element.elementor-element-e61454d{--padding-top:40px;--padding-bottom:40px;--padding-left:20px;--padding-right:20px;}.elementor-1072 .elementor-element.elementor-element-40e0946 .elementor-heading-title{font-size:32px;line-height:35px;}.elementor-1072 .elementor-element.elementor-element-9028fc0{width:100%;max-width:100%;}}@media(min-width:768px){.elementor-1072 .elementor-element.elementor-element-0af205d{--content-width:1200px;}.elementor-1072 .elementor-element.elementor-element-a90fae7{--content-width:893px;}.elementor-1072 .elementor-element.elementor-element-e61454d{--content-width:893px;}}/* Start custom CSS for button, class: .elementor-element-c5951a3 */.elementor-1072 .elementor-element.elementor-element-c5951a3 a {
box-shadow: 0 1px 0 rgba(255,255,255,.3) inset, 0 6px 14px -6px rgba(238,107,31,.5) !important;
}/* End custom CSS */
/* Start custom CSS *//* ============================================================
CITRON — Android Download page styles for Elementor
------------------------------------------------------------
HOW TO USE
1. Paste this whole file into ONE of:
• Pro: Page Settings (gear, bottom-left) → Advanced → Custom CSS
• Free: WP Admin → Appearance → Customize → Additional CSS
(or a "Code Snippets" / "Simple CSS" plugin)
2. Add the matching class name (WITHOUT the dot) to each
element via: Edit element → Advanced → CSS Classes
3. Class map is noted above each block below.
Everything is scoped under .citron-dl so it won't leak into
the rest of your site — put "citron-dl" on the OUTER container.
============================================================ */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=DM+Mono:wght@400;500&display=swap');
/* ---- Design tokens ---------------------------------------- */
.citron-dl {
--citrus: #ee6b1f;
--citrus-deep: #c8541a;
--lemon: #f3c43a;
--leaf-deep: #4d8a26;
--ink: #14181f;
--ink-2: #303743;
--muted: #6b7280;
--muted-2: #9aa3af;
--cream: #f5f7fa;
--cream-2: #eef1f6;
--paper: #ffffff;
--line: #e3e7ee;
--line-2: #edf0f5;
--mint-bg: #c5f4da;
--code-bg: #f4efe7;
--radius: 14px;
}
/* Base type inside the page (optional — or set DM Sans as your
Global Font in Site Settings → Global Fonts). */
.citron-dl, .citron-dl p, .citron-dl li, .citron-dl a {
font-family: 'DM Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}
/* ============================================================
TWO-COLUMN LAYOUT (the part you restructured)
------------------------------------------------------------
Native route (recommended):
• Build the row as a Flexbox CONTAINER set to Direction: Row.
• Inside it put TWO child containers: left (content) + right (rail).
• On the parent container → Advanced → CSS Classes: cz-row
• On the right child container → CSS Classes: cz-rail
• Parent container → Layout → Align Items: START (important so
the rail can move while sticky)
• Parent container → make sure Overflow is "Default" (not hidden)
============================================================ */
/* parent two-column row */
.citron-dl .cz-row {
align-items: flex-start; /* lets the rail scroll independently */
gap: 52px;
}
/* left content column should take the remaining space */
.citron-dl .cz-row > .cz-main { flex: 1 1 auto; min-width: 0; }
/* right rail: fixed width + sticky */
.citron-dl .cz-rail {
flex: 0 0 360px;
max-width: 360px;
position: sticky; /* FREE fallback. On Pro you can
instead use Advanced → Motion
Effects → Sticky = Top, offset 92,
"Stay in column" = Yes. */
top: 92px; /* ~ your sticky header height + gap */
align-self: flex-start;
}
@media (max-width: 1024px) {
.citron-dl .cz-row { flex-direction: column; gap: 26px; }
.citron-dl .cz-rail { position: static; top: auto; flex-basis: auto; max-width: 560px; width: 100%; }
}
/* ============================================================
BREADCRUMB class: cz-crumbs (HTML or Text widget)
============================================================ */
.citron-dl .cz-crumbs {
font-family: 'DM Mono', monospace;
font-size: 12.5px;
letter-spacing: .04em;
color: var(--muted);
margin-bottom: 24px;
}
.citron-dl .cz-crumbs a { color: var(--citrus-deep); text-decoration: none; font-weight: 500; }
.citron-dl .cz-crumbs a:hover { text-decoration: underline; text-underline-offset: 3px; }
.citron-dl .cz-crumbs .sep { color: var(--muted-2); margin: 0 8px; }
/* ============================================================
TITLE / DATE / INTRO
You can build these with native Heading + Text widgets and
style them in the panel with the values below, OR add classes.
------------------------------------------------------------
Heading "Citron Emulator For Android (APK)"
Typography: DM Sans, 700, ~52px, letter-spacing -0.035em
Color: #14181f
Date row class: cz-date (Icon List or HTML widget)
Intro Text Editor, 16.5px, color #303743, line-height 1.7
============================================================ */
.citron-dl .cz-date {
display: flex; align-items: center; gap: 9px;
font-family: 'DM Mono', monospace;
font-size: 14px; letter-spacing: .03em; color: var(--muted);
margin-top: 18px;
}
.citron-dl .cz-date svg { color: var(--citrus); }
/* ============================================================
DOWNLOAD RAIL CONTENTS
------------------------------------------------------------
Small label above the button class: cz-rail-label
Download button: use a native BUTTON widget and style it:
Background #ee6b1f / Hover #c8541a / Text #fff
Typography DM Sans 600 17px / Padding 17px 22px / Radius 10px
Set width = Full width, add a download icon (left)
Meta rows class: cz-meta (HTML widget)
============================================================ */
.citron-dl .cz-rail-label {
font-family: 'DM Mono', monospace;
font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
color: var(--muted);
display: flex; align-items: center; gap: 10px;
margin-bottom: 12px;
}
.citron-dl .cz-rail-label::before {
content:""; width: 6px; height: 6px; border-radius: 99px; background: var(--citrus);
}
/* meta rows (File Size / Date Created / Last Update) */
.citron-dl .cz-meta {
display: flex; align-items: center; justify-content: space-between; gap: 16px;
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--paper);
padding: 17px 22px;
margin-top: 14px;
}
.citron-dl .cz-meta .k { font-weight: 700; font-size: 16px; color: var(--ink); }
.citron-dl .cz-meta .v { font-family: 'DM Mono', monospace; font-size: 15px; font-weight: 500; color: var(--ink); }
.citron-dl .cz-meta.size .v { color: var(--citrus-deep); }
/* ============================================================
NOTE CALLOUT class: cz-note (HTML or Text widget)
============================================================ */
.citron-dl .cz-note {
background: var(--mint-bg);
border-left: 5px solid var(--ink);
border-radius: 8px;
padding: 18px 24px;
font-size: 15.5px; line-height: 1.6; color: var(--ink);
}
.citron-dl .cz-note b { font-weight: 700; }
.citron-dl .cz-note a { color: var(--citrus-deep); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
/* ============================================================
CHANGELOG BOX class: cz-changelog (HTML widget — paste
the )
============================================================ */
.citron-dl .cz-changelog { margin-top: 22px; }
.citron-dl .cz-changelog .head {
display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
background: var(--ink); color: #fff;
padding: 13px 20px; border-radius: var(--radius) var(--radius) 0 0;
}
.citron-dl .cz-changelog .head .ttl { font-family: 'DM Mono', monospace; font-size: 13px; letter-spacing: .04em; }
.citron-dl .cz-changelog .head .tag {
font-family: 'DM Mono', monospace; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
background: var(--citrus); color: #fff; padding: 4px 9px; border-radius: 99px;
}
.citron-dl .cz-changelog pre {
margin: 0; background: var(--code-bg);
border: 1px solid var(--line); border-top: none;
border-radius: 0 0 var(--radius) var(--radius);
padding: 22px 24px; max-height: 440px; overflow-y: auto;
font-family: 'DM Mono', monospace; font-size: 13.5px; line-height: 1.85; color: var(--ink-2);
white-space: pre-wrap; word-break: break-word;
}
.citron-dl .cz-changelog pre b { color: var(--ink); font-weight: 500; }
.citron-dl .cz-changelog pre::-webkit-scrollbar { width: 12px; }
.citron-dl .cz-changelog pre::-webkit-scrollbar-track { background: #e9e3d9; }
.citron-dl .cz-changelog pre::-webkit-scrollbar-thumb { background: var(--muted-2); border-radius: 99px; border: 3px solid #e9e3d9; }
/* ============================================================
FAQ — if you use Elementor's ACCORDION widget, add class
cz-faq to it and these rules restyle it to match.
(If you prefer an exact match, use an HTML widget with your
markup instead.)
============================================================ */
.citron-dl .cz-faq .elementor-accordion-item {
border: 1px solid var(--line-2); border-radius: 0; background: var(--paper);
}
.citron-dl .cz-faq .elementor-tab-title {
padding: 20px 24px; font-family: 'DM Sans', sans-serif; font-weight: 600; font-size: 16px; color: var(--ink);
}
.citron-dl .cz-faq .elementor-tab-title.elementor-active { color: var(--citrus-deep); }
.citron-dl .cz-faq .elementor-tab-content { padding: 0 24px 22px; color: var(--muted); font-size: 15px; line-height: 1.6; }
.citron-dl .cz-faq .elementor-accordion-icon { color: var(--citrus); }
/* ============================================================
"LEAVE A REPLY" FORM
Use a native FORM widget (Pro) or Contact Form 7 / HTML.
Add class cz-form to the form widget. Inputs:
============================================================ */
.citron-dl .cz-form input,
.citron-dl .cz-form textarea {
border: 1px solid var(--line) !important;
border-radius: 10px !important;
background: var(--paper) !important;
padding: 15px 18px !important;
font: 15px 'DM Sans', sans-serif !important;
color: var(--ink) !important;
}
.citron-dl .cz-form input:focus,
.citron-dl .cz-form textarea:focus {
outline: 2px solid var(--citrus) !important; outline-offset: 1px; border-color: var(--citrus) !important;
}
.citron-dl .cz-form textarea { min-height: 150px; resize: vertical; }
/* Send button (form submit) */
.citron-dl .cz-form button[type="submit"],
.citron-dl .cz-form .elementor-button {
background: var(--citrus) !important; color: #fff !important;
border-radius: 10px !important; font: 600 16px 'DM Sans', sans-serif !important;
padding: 16px 22px !important;
}
.citron-dl .cz-form button[type="submit"]:hover,
.citron-dl .cz-form .elementor-button:hover { background: var(--citrus-deep) !important; }/* End custom CSS */