:root { --paddingfoot:80px; --footerbg:#f8f9fa; --bg-color:#f4f4f4; --bg-colorgrad:#f4f4f412; --bg-colorelev:#f4f4f9; --text-color: #000; --h1text:#333; --datatext:#666; --codemphc:#d9d9d9; --dropdown:#fff; --ddhigh:#e0e0e0; --ddbor:#ddd; --ddhov:#f2f2f2; --appverfed:#00b48166; --appverfedcol:#005e43; --metaheaddiv: #00000036; --whatscolp: #8a8a8a; --whatsbtncol:#007bff; --whatsbtnbghov:#60adff1a; --whatsbtncolhov:#0066d3; --dataelev: rgba(0, 0, 0, 0.2); --svgdata: #000; --copyfoot:color(display-p3 0.379 0.392 0.421); --footopt:color(display-p3 0.379 0.392 0.421); --hovbgslate2:color(display-p3 0.92 0.92 0.92); --fotdiv:color(display-p3 0.88 0.881 0.901); /* hover apps */ --appsorehov: #dadada7a; --phovinfo: #e9e9e9; } body[data-theme="dark"] { --footerbg:#1a1a1a; --bg-color: #161616; --bg-colorgrad:rgba(22,22,22,0.55); --bg-colorelev:#10101000; --text-color: #ffffff; --h1text:#fefefe; --datatext:#dedede; --codemphc:#252525; --dropdown:#1d1d1d; --ddhigh:#2c2c2c; --ddbor:#2c2c2c; --ddhov:#3d3d3d; --appverfed: #00674966; --appverfedcol: #00ab7a; --metaheaddiv: #ffffff36; --whatscolp: #afafaf; --whatsbtncol:#0066d3; --whatsbtnbghov:#007bff1a; --whatsbtncolhov:#0066d3; --dataelev: rgba(255, 255, 255, 0.2); --svgdata: #fff; --copyfoot:color(display-p3 0.692 0.704 0.728); --footopt:color(display-p3 0.692 0.704 0.728); --hovbgslate2:color(display-p3 0.19 0.19 0.19 / 0.31); --fotdiv:color(display-p3 0.183 0.191 0.206); /* hover apps */ --appsorehov: color(display-p3 0.19 0.19 0.19 / 0.31); --phovinfo: #212121; } body{ background-color: var(--footerbg); } /* General styles for the header */ .header { display: flex; position: sticky; top: 0px; width: 100%; align-items: center; justify-content: space-between; padding: 10px 300px; background-color: var(--bg-color); background: linear-gradient(0deg, var(--bg-colorgrad) -58px, var(--bg-color) 73%); box-shadow: 0px 2px 5px 2px rgba(0, 0, 0, 0.1); z-index: 20; backdrop-filter: blur(2px); /* Add blur effect */ -webkit-backdrop-filter: blur(2px); /* For Safari support */ } /* Logo styles */ .header-logo { display: flex; align-items: center; } svg.appslogosvg{ width: 200px; height: auto; } .logo-icon { font-size: 10px; font-weight: bold; color: #333; /* Dark gray for text */ } /* Menu styles */ .header-menu { display: flex; gap: 20px; /* Space between menu items */ } .menu-item { font-size: 16px; font-weight: 500; color: #555; /* Medium gray for text */ text-transform: uppercase; cursor: pointer; transition: color 0.3s ease; /* Smooth hover effect */ } /* Hover effect for menu items */ .menu-item:hover { color: #007bff; /* Blue color on hover */ } /* Responsive design for smaller screens */ @media (max-width: 768px) { .header { flex-direction: column; align-items: center; width: 100%; padding: 12px 20px; top: -1px; } .header-menu { margin-top: 10px; gap: 15px; } } .custom-select { position: relative; width: 40%; max-width: 100%; font-size: 1.15rem; margin-top: 5px; margin-bottom: 2em; } .select-button { width: 100%; font-size: 1.15rem; background-color: #fff; padding: 0.675em 1em; border: 1px solid #caced1; border-radius: 0.25rem; cursor: pointer; display: flex; justify-content: space-between; align-items: center; } .selected-value { display: flex; text-align: left; gap: 10px; } .arrow { border-left: 5px solid transparent; border-right: 5px solid transparent; /* border-top: 6px solid #000; */ transition: transform ease-in-out 0.3s; } .select-dropdown { position: absolute; list-style: none; width: 100%; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); background-color: #fff; border: 1px solid #caced1; border-radius: 4px; padding: 0px; margin-top: 10px; max-height: 0px; overflow-y: auto; transition: 0.2s ease; opacity: 0; visibility: hidden; } .select-dropdown:focus-within { box-shadow: 0 10px 25px rgba(94, 108, 233, 0.6); } .select-dropdown li { position: relative; cursor: pointer; display: flex; gap: 1rem; align-items: center; /* padding: 5px; */ } .select-dropdown li label { width: 100%; padding: 12px 18px; cursor: pointer; display: flex; gap: 1rem; align-items: center; } .select-dropdown::-webkit-scrollbar { width: 7px; } .select-dropdown::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 25px; } .select-dropdown::-webkit-scrollbar-thumb { background: #ccc; border-radius: 25px; } /* Highlight the selected option */ .select-dropdown li.selected { background-color: var(--ddhigh); /* Lighter highlight for selected item */ font-weight: bold; /* Make text bold for emphasis */ /* color: #007bff; Optional: Add a custom color */ } /* Retain hover effect for all options */ .select-dropdown li:hover:not(.selected) { background-color: var(--ddhov); /* Hover effect for non-selected items */ } /* Ensure that the checked state works together with the selected class */ .select-dropdown input:checked ~ label { background-color: var(--ddhigh); /* Sync checked input and selected visual styles */ font-weight: bold; /* color: #007bff; */ } .select-dropdown input:focus ~ label { background-color: var(--ddhov); } .select-dropdown input[type="radio"] { position: absolute; left: 0; opacity: 0; } /* interactivity */ .custom-select.active .arrow { transform: rotate(180deg); } .custom-select.active .select-dropdown { opacity: 1; visibility: visible; max-height: 200px; } /*============= Aesthetics =========================*/ /* Basic reset */ * { margin: 0; padding: 0; box-sizing: border-box; } html, body { height: 100%; margin: 0; display: flex; flex-direction: column; scroll-behavior: smooth; }.footerexpoao { background-color: var(--footerbg); display: flex; padding: 140px; font-family: Arial, sans-serif; border-top: 1px solid var(--ddbor); justify-content: center; }.cetnerfoot { width: 60%; } .footer-columns { display: flex; justify-content: space-evenly; margin-bottom: 20px; } .footer-column { width: 22%; } .footer-column h4 { font-size: 16px; margin-bottom: 30px; color: var(--h1text); } .footer-column ul { list-style: none; padding: 0; margin: 0; } .footer-column ul li { margin-bottom: 10px; } .footer-column ul li a { display: flex; width: 100%; margin-left: -15px; text-decoration: none; font-weight: 400; color: var(--footopt); padding-left: .875rem; padding-right: .875rem; padding-bottom: .5rem; padding-top: .5rem; border-radius: 6px; font-size: 18px; transition: all .3s ease; } .footer-column ul li a:hover { background: var(--hovbgslate2); opacity: .8; } .footer-bottom { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--fotdiv); padding-top: 20px; width: 100%; } .hrdiv { border: none; position: relative; width: 1px; height: 30px; background: var(--fotdiv); margin: 0px 17px 0px 5px; top: 0px; }.footer-left { display: flex; align-items: flex-start; justify-content: flex-start; flex-direction: column; gap: 15px; }.footgroup { display: flex; align-items: center; }p.footcpoy{ color: var(--copyfoot); font-weight: 400; font-size: 14px; } .footer-logo { width: 40px; height: auto; margin-right: 15px; } .social-links a { text-decoration: none; font-weight: 400; font-size:20px; color: var(--footopt); padding: .5rem 10px; border-radius: 6px; transition: all .3s ease; } .social-links a:hover { background: var(--hovbgslate2); opacity: .8; } .footer-right { display: flex; align-items: center; justify-content: flex-end; } .custom-select.theme { margin-left: auto; width: 100%; margin-bottom: 0; position: relative; }.custom-select.theme .select-button{ padding: 10px 15px; }.custom-select.theme .select-dropdown { margin-bottom: -53px; } .custom-select .select-button { display: flex; align-items: center; padding: 15px 15px; border: 1px solid var(--ddbor); border-radius: 5px; color: var(--text-color); background-color: var(--dropdown); cursor: pointer; } .custom-select .selected-value { display: flex; align-items: center; } .custom-select .selected-icon { margin-right: 8px; } .custom-select .arrow { margin-left: auto; } .custom-select .select-dropdown { display: none; position: absolute; color: var(--text-color); background-color: var(--dropdown); border: 1px solid var(--ddbor); list-style: none; padding: 10px 0; margin-top: 5px; border-radius: 5px; z-index: 10; } .custom-select.active .select-dropdown { display: block; } .kapwkfpakspf { font-family: Arial, sans-serif; display: flex; flex-grow: 1; flex-direction: column; justify-content: center; align-items: center; height: auto; margin: 0; background-color: var(--bg-color); color: var(--text-color); } .article-container { /* background-color: #fff; */ /* padding: 20px; */ padding-top: 5%; padding-bottom: 5%; max-width: 800px; width: 100%; height:100%; border-radius: 10px; /* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); */ } .div-container { color: cyan; display: flex; align-items: center; } .div-line { flex: 1; border: 1px solid #989df7; margin: 0 10px; } .div-text { color: #989df7; font-size: x-large; font-weight: bold; } .article-header { text-align: left; display: flex; align-items: center; flex-direction: row; margin-bottom: 10px; padding: 20px; width: 100%; justify-content: space-between; } section.article-titlesec{ display: flex; flex-direction: column; width: 100%; } div.article-image-div{ display: flex; justify-content: flex-end; } svg.svgdatarating{ width: 40px; height: 29px; margin: 0 0 -9px 0; } img.appicon1{ width: 200px; border-radius: 30px; height: auto; box-shadow: 0 4px 8px var(--dataelev); } div.downlaoddviciedr { content: ""; margin: 20px 15px; width: 1px; height: 24px; background-color: var(--metaheaddiv); }.okpojojuif { display: flex; align-items: center; flex-direction: row; margin: 20px 0px 20px 0px; }.okpojojuif span{ display: flex; flex-direction: column; text-align: center; gap: 5px; }i.ratestart{ font-size: inherit; user-select: none; }.okpojojuif p{ display: flex; flex-direction: row; text-align: center; justify-content: center; }.okpojojuif p.xsmal{ font-size: small; }.kfpwakoskf-dl { display: flex; flex-direction: column; width: 80%; text-align: center; } .article-header h1 { font-size: 36px; color: var(--h1text); text-align: left; } .article-meta { font-size: 14px; color: var(--datatext); margin-top: 10px; } .article-meta .akwpfkpsak { display: flex; flex-direction: row; align-items: center; margin-right: 10px; flex-wrap: wrap; } span.akwpfkpsakcenter { display: flex; align-items: center; cursor: pointer; font-weight: bold; color: #01875f; }span.akwpfkpsakcenter .ver{ user-select: none;font-size: inherit; margin: 0 0 0 2px; } span.aklwofka { padding: 5px 8px; border-radius: 100px; background: var(--appverfed); font-weight: bold; color: var(--appverfedcol); } .akwpfkpsak { display: flex; flex-direction: row; align-items: center; margin-right: 10px; } .article-content { font-size: 18px; line-height: 1.6; color: var(--h1text); margin-top: 0px; } .article-content.lplplpl{ padding: 20px; } .article-content p { margin-bottom: 20px; } a.a-llpwl{ text-decoration: none; color: inherit; } a.a-kwofkaop { text-decoration: none; color: inherit; }a.a-kwofkaop:hover{ text-decoration: underline; } img.imagoek { width: 100%; }i.material-icons.kaosdko { font-size: 20px; margin-right: 10px; }h3.kapwkfptitle { margin-bottom: 10px; }hr { border: none; height: 2px; /* Thickness of the line */ background-color: #4A90E2; /* Line color */ margin: 20px 0; /* Space above and below the line */ } /* Inverted Horizontal Rule with a gradient */ hr.gradient { border: none; height: 2px; background: linear-gradient(to right, #0b8eff, #0064d3); margin: 20px 0; }span.koakwofko { text-decoration: none; color: inherit; border: 2px solid; font-weight: bold; padding: 15px; border-radius: 100px; transition: all .2s ease; }span.koakwofko:hover { border: 2px solid rgba(0, 0, 0, 0.5); color: rgba(0, 0, 0, 0.5); }img.img-fgappmobile { width: auto; height: 480px; }.image-row { display: flex; gap: 10%; justify-content: center; }.image-col{ display: flex; flex-direction: column; gap: 10px; justify-content: center; margin-top: 50px; margin-bottom: 50px; }span.spanfigure { text-align: center; }.ulmmpawf{ margin-left: 50px; margin-bottom: 30px; }.ulmmpawf li{ margin-bottom: 10px; }code.codemph { overflow-wrap: break-word; word-break: normal; padding: .2em .4em; margin: 0; font-size: 100%; white-space: nowrap; background-color: var(--codemphc); border-radius: 6px; }img.fglogo{ width: 156px; height: auto; } .columndiv{ display: flex; align-items: center; gap: 9px; margin-bottom: 20px; }div.columndiv text{ font-size: larger; font-weight: 700; font-family: sans-serif; }.download-app-page { font-family: Arial, sans-serif; text-align: center; padding: 20px; background-color: var(--bg-colorelev); } .app-data { width: 100%; height: auto; position: relative; display: flex; align-items: center; } .app-preview { display: flex; align-items: center; position: relative; overflow: hidden; width: 100%; border: 0px solid #ddd; } .scroll-button { position: relative; top: 26px; transform: translateY(-50%); background-color: rgb(255, 255, 255); box-shadow: 0 0 8px rgba(0, 0, 0, 0.3); color: #000000; border: none; padding: 15px 20px; border-radius: 100px; cursor: pointer; font-size: 18px; z-index: 1; overflow: hidden; /* Needed for ripple effect containment */ opacity: 1; transition: opacity 0.3s ease; } .scroll-button .ripple { position: absolute; width: 0; height: 0; border-radius: 50%; background-color: rgba(0, 0, 0, 0.2); transform: scale(0); animation: ripple-animation 1s ease-out; pointer-events: none; } @keyframes ripple-animation { to { transform: scale(4); opacity: 0; } } span.akwfkpaks { position: absolute; } span.akwfkpaks.left { left: -25px; visibility: hidden; /* Hidden initially */ } span.akwfkpaks.right { right: -25px; } .scroll-button:hover { opacity: 1; } .scroll-button:disabled { visibility: hidden; } .app-image { cursor: pointer; width: auto; /* Adjust width automatically to preserve aspect ratio */ height: 100%; /* Take the full height of the container */ margin: 0 10px; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); object-fit: cover; /* Ensures the image fills its box while keeping the aspect ratio */ } .image-container { display: flex; overflow-y: hidden; overflow-x: hidden; scroll-behavior: smooth; padding: 5px 0px; width: auto; height: 320px; /* Fixed height for the container */ justify-content: start; /* Center the images if needed */ align-items: center; }a.relappa{ text-decoration: none; color: inherit; } section.prkwpalawpfk { width: 50%; height: auto; display: flex; padding: 10px 20px; flex-direction: row; gap: 15px; border-radius: 8px; transition: all .2s ease; }section.prkwpalawpfk:hover{ background: var(--appsorehov); } img.relveappsimg { width: 100px; height: 100px; /* Matches the width to maintain a square aspect ratio */ border-radius: 15px; object-fit: cover; /* Ensures the image is cropped to fit the square area while maintaining aspect ratio */ box-shadow: 0 4px 8px var(--dataelev); }p.smallp { margin: 0px; font-size: small; }p.bignamep { font-weight: bold; margin: 0; }section.wpirqpiwpripqk { text-align: left; } .erlelfafpapps { width: 100%; display: flex; justify-content: flex-start; flex-direction: column; } .kawokfpkap{ display: flex; flex-direction: column; }.kawokfpkap h1{ text-align: left; } .download-section { justify-content: flex-start; /* background-color: #fff; */ padding: 20px; border-radius: 10px; /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); */ display: inline-block; width: 100%; } .download-section h1 { font-size: 24px; color: var(--h1text); margin-bottom: 10px; } .download-section p { font-size: 16px; color: var(--datatext); margin-bottom: 10px; } .akwpokfp { display: flex; flex-direction: column; align-items: flex-start; }.akwpokfp p{ display: flex; flex-direction: row; gap: 3px; }.akwpokfp p a{ color: inherit; text-decoration: none; }.akwpokfp p a:hover{ text-decoration: underline; } p.tojeoajog { flex-direction: column; align-items: flex-start; padding: 15px 25px; border-radius: 10px; background: var(--phovinfo); margin: 20px 0 60px 0; transition: all .2s ease; }p.tojeoajog span{ overflow: hidden; text-overflow: ellipsis; max-width: 16em; }p.tojeoajog:hover{ box-shadow: 0 0px 12px var(--dataelev); }.divtojeoajog { display: flex; flex-wrap: wrap; gap: 20px; }.divtojeoajog a{ color: inherit; text-decoration: none; } .download-buttons { display: flex; justify-content: center; gap: 10px; } .btn.download-btn { user-select: none;text-decoration: none; background-color: #007bff; color: #fff; padding: 15px 20px; border-radius: 8px; font-size: 16px; width: 100%; cursor: pointer; transition: background-color 0.3s; } .btn.download-btn:hover { background-color: #0056b3; }span.lalplwpal { text-align: left; } .tooltip { position: relative; display: inline-block; cursor: pointer; color: #007bff; font-size: 20px; bottom: 5px; }.tooltip.data{ font-size: inherit; bottom: 0px; } .tooltip .tooltip-text { visibility: hidden; width: 300px; background-color: #333; color: #fff; text-align: start; padding: 10px 15px 10px 15px; border-radius: 5px; position: absolute; z-index: 1; bottom: 125%; /* Adjust to position above the icon */ left: 50%; transform: translateX(-50%); opacity: 0; transition: opacity 0.3s, visibility 0s 0.3s; /* Delay visibility change */ } .tooltip:hover .tooltip-text, .tooltip .tooltip-text:hover { visibility: visible; opacity: 1; transition: opacity 0.3s, visibility 0s 0s; /* Instant visibility change on hover */ }.tooltip-text p { color: #ffffffc4; line-height: 18px; font-size: 15px; }.tooltip-text h3 { font-size: 18px; }.kawokfpk { display: flex; } .tooltip-text.data{ padding: 5px 0px 5px 0px; bottom: 30px; width: 135%; background: #242424; text-align: center; } span.tooltip-text.official { padding: 2px; background: #333333cc; text-align: center; width: 158px; }.tooltip.official { width: 20px; height: 20px; display: flex; bottom: -1px; right: 6px; }i.material-icons.officialicon { font-size: 21px; color: var(--datatext); user-select: none; } img.app-howto { display: flex; height: auto; width: 200px; border-radius: 32px; box-shadow: 0 4px 8px rgba(0, 0, 0, .2); }.howto-div { display: flex; flex-direction: column; }.howto-div h1{ text-align: start; }.hotworow { display: flex; justify-content: space-around; gap: 20px; }.hotworow, .hotworowios { display: none; /* Start with hidden */ margin-bottom: 20px; }.awfkpaoro ol{ margin-top: 20px; margin-left: 40px; font-size: 17px; }.howto-div .awfkpaoro{ display: flex; flex-direction: column; text-align: left; }.howto-div .codemph{ font-size: 14px; font-weight: bold; } span.stat-dkoek { background: #0097ff; color: #fff; font-weight: bold; padding: 0px 5px 0px 5px; border-radius: 6px; margin: 0 0 0 5px;user-select:none;box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.2); } .aklpwlfp{ margin: 0 0 2% 5%; font-size: 16px; color: #6f6f6f; }.kaowk { margin: 10px 0 0 0; display: flex; flex-direction: column; }.kaowk h1{ text-align: start; } .mobile-message { color: var(--datatext); font-size: 18px; margin-top: 20px; box-shadow: 0 0px 20px 0px rgba(0, 0, 0, .2); border-radius: 10px; padding: 18px; } /* Modal styles */ .divmovadl { display: flex; align-items: center; justify-content: center; margin-bottom: auto; margin-top: auto; } .akwkapkf { position: relative; display: flex; top: 0px; width: 100%; height: 50px; padding: 29px; background: #000000; align-items: center; } .lplpwpal { display: flex; justify-content: flex-start; flex-direction: column; align-items: flex-start; } .kpkapkfp{ display: flex; flex-direction: row; flex-wrap: wrap; gap: 5px; margin: -2px 0 10px 0; }span.kpkapkfp.btn { padding: 1px 10px; cursor: pointer; border-radius: 5px; border: 1px solid #b2b2b2; transition:all .1s ease; }span.kpkapkfp.btn:hover{ background: var(--whatsbtnbghov); } .modal { display: none; /* Hidden by default */ position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; /* justify-content:center; */ background-color: rgba(0, 0, 0, 0.67); /* Black background */ flex-direction: column; /* For header and body alignment */ } /* Modal header styles */ .modal-header { background-color: #000; padding: 15px; display: flex; align-items: center; justify-content: flex-start; width: 100%; box-shadow: 0 2px 5px rgba(255, 255, 255, 0.1); z-index: 1001; } /* Modal body styles */ .modal-body { flex-grow: 1; /* Takes up remaining space */ display: flex; align-items: center; justify-content: center; /* Center image */ padding: 20px; } /* Image styles */ .modal-content { flex: 1; display: flex; align-items: center; justify-content: space-between; position: relative; flex-direction: column; border-radius: 10px; } .modal-content img { max-width: 100%; max-height: 80vh; object-fit: contain; border-radius: 0px; transition: all .2s ease; } .scroll-hint { display: none; position: absolute; pointer-events: none; bottom: 0px; left: 50%; width: 100%; transform: translateX(-50%); height: 30%; justify-content: center; flex-direction: column; align-items: center; text-align: center; font-family: Arial, sans-serif; color: #fff; z-index: 30; padding: 10px 20px; /* border-radius: 8px; */ background: linear-gradient(360deg, rgb(14 14 14 / 72%), rgb(0 0 0 / 0%)); /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); */ opacity: 1; transition: all .2s ease; }.scroll-hint.hintscrolled{ opacity: 0; } .arrow2 { display: inline-block; width: 20px; height: 20px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg); margin-bottom: 5px; animation: bounce 1s infinite; } @keyframes bounce { 0%, 100% { transform: translateX(0) rotate(45deg); } 50% { transform: translateX(-10px) rotate(45deg); } } .scroll-hint p { font-size: 14px; margin: 0; opacity: 0.8; } .back-button { position: absolute; left: 25px; border: none; padding: 8px 11px; background: transparent; border-radius: 100px; color: white; cursor: pointer; font-size: 18px; z-index: 10; transition: all .3s ease; }.back-button:hover{ background: rgb(255 255 255 / 8%); } .prev-button, .next-button { position: absolute; top: 50%; transform: translateY(-50%); background-color: rgba(255, 255, 255, 1); border: none; padding: 15px 20px; border-radius: 50%; cursor: pointer; font-size: 18px; display: flex; align-items: center; justify-content: center; } .prev-button { left: 20px; } .next-button { right: 20px; } .prev-button:disabled, .next-button:disabled { display: none; } /* Whats New */ .whats-new-container { width: 100%; margin: 20px auto; border-radius: 10px; text-align: left; }.arrowdata { margin-left: 8px; } .last-updated { font-size: 0.9rem; color: #555; } .whats-new-content { position: relative; overflow: hidden; } .view-more-btn { background-color: #007bff00; color: var(--whatsbtncol); font-weight: bold; border: none; padding: 10px 5px; border-radius: 3px; cursor: pointer; display: block; text-align: center; position: relative; z-index: 1; } /* Gradient effect near the button */ .whats-new-text::after { content: ''; pointer-events: none; position: absolute; bottom: 0; left: 0; width: 100%; height: 30px; background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--bg-color)); z-index: 0; transition: height 0.3s ease, overflow 0.3s ease; } .view-more-btn:hover { background-color: var(--whatsbtnbghov); color: var(--whatsbtncolhov); } /* Whats New Text Styles */ .whats-new-text { font-size: 1rem !important; margin-bottom: 0px !important; color: var(--whatscolp) !important; line-height: 1.5; margin: 0; max-height: 60px; /* Limit initial height */ overflow: hidden; /* Hide overflow initially */ padding-right: 20px; position: relative; padding-bottom: 0px; /* Make space for the "Show More" button */ transition: max-height 0.5s ease, padding-bottom 0.5s ease; /* Smooth height transition */ } /* When the text is fully expanded */ p.whats-new-text.show-more { max-height: 1000px; /* Set a large enough max-height to accommodate the content */ overflow: visible; /* Ensure text is fully visible */ } /* Gradient effect near the button */ .whats-new-text::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 30px; background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--bg-color)); z-index: 0; opacity: 1; /* Ensure gradient is visible */ transition: opacity 0.5s ease; /* Smooth gradient fade-out */ } /* When the text is fully expanded, fade out the gradient */ p.whats-new-text.show-more::after { opacity: 0; /* Hide the gradient */ } .show-more .view-more-btn { text-align: center; } img.appicon1.small{ display: none; } @media (max-width: 700px) { .okpojojuif{ justify-content: center; }.divtojeoajog a{ width: 100%; margin: 0 0 10px 0; }p.tojeoajog{ width: 100%; margin: 0px; }.divtojeoajog{ gap: 0px; }.scroll-hint{ display: flex; }.modal-content img:active{ transform: scale(0.9); }.article-meta .akwpfkpsak{ gap: 10px; }.prev-button, .next-button{ display: none; }section.prkwpalawpfk{ width: 100%; }img.relveappsimg{ width: 70px; height: 70px; } .whats-new-text::after{ bottom:-2px; }.divmovadl{ margin-bottom: auto; margin-top: auto; }img.appicon1.small{ display: flex !important; width: 100px; border-radius: 20px; }img.appicon1{ display: none; }.article-div4 { display: flex; flex-direction: row; gap: 17px; align-items: center; } .app-preview{ overflow-y: scroll; justify-content: start; position: relative; }.app-data{ left: -5%; width: 110%; }.image-container{ overflow-x: scroll; }.scroll-button.right, .scroll-button.left{ display: none; }.app-preview::-webkit-scrollbar,.image-container::-webkit-scrollbar { display: none; }.kfpwakoskf-dl{ width: 100%; }.download-buttons{ flex-direction: column; }.download-section{ display: flex; flex-direction: column; }span.tooltip-text.official{ left: -56px; }.tooltip .tooltip-text{ width: 300px; left: -425%; }.tooltip .tooltip-text.data{ width: 135%; left: 52px; }.hotworow{ flex-direction: column; }.awfkpaoro ol{ margin-left: 25px; }img.app-howto{ margin-left: auto; margin-right: auto; width: 250px; }.custom-select{ width: 100%; }.footer-bottom{ flex-direction: column-reverse; gap: 25px; }.footer-columns{ flex-direction: column; gap: 2em; font-size: 25px; }.footer-column{ width: 100%; }.footerexpoao{ padding: 20px; padding-bottom: 20px; padding-top: 40px; }.cetnerfoot{ width: 100%; }.akwkapkf{ width: 100%; }.article-header{ flex-direction: column-reverse; align-items: flex-start; }div.article-image-div{ margin-bottom: 20px; } }