.footer,.footer-left span,.footer-links,.header,.social-icons{display:flex}*,.lang{box-sizing:border-box}.cd-popup-trigger,.custom-alert-box,.footer-center,.processing-content,.unwebp-note,.unwebp-preview,.unwebp-title,h1{text-align:center}*{margin:0;padding:0;user-select:none;-webkit-user-drag:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}body{font-family:"Segoe UI Rounded","Segoe UI","SF Pro Rounded","Helvetica Rounded","Arial Rounded MT Bold",system-ui,sans-serif;background:#fcfff0;color:#009487}h1{font-size:24px}h2,h3{padding-bottom:20px;font-size:1.2em}p{padding:10px}.header{align-items:center;justify-content:space-between;padding:10px 20px;position:relative}.logo{font-size:1.5em;color:#7ed6df;font-weight:700;cursor:pointer;padding:5px}.logo img{height:40px}.logo img:hover{animation:.4s shake}@keyframes shake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-3px)}40%,80%{transform:translateX(3px)}}@media (max-width:768px){.header{justify-content:center;padding-top:0}}#background-polygons{position:fixed;top:0;left:0;width:100%;height:100%;overflow:hidden;z-index:-1}.polygon{position:absolute;opacity:.15}.footer{position:relative;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;background:#fff0;padding:30px 20px 80px;font-size:.9em;color:#333;margin-top:40px;box-shadow:rgb(0 0 0 / .05) 0 6px 24px 0,rgb(0 0 0 / .08) 0 0 0 1px}.footer a,span{color:#1caf9b;text-decoration:none;margin-left:8px;transition:color .3s;font-size:18px}.footer a:hover,span:hover{color:#137568}.footer-left,.footer-right{display:flex;flex-direction:column;align-items:center}.footer-center{position:absolute;bottom:5px;left:50%;transform:translateX(-50%)}.footer-left span{cursor:pointer;align-items:center;font-size:16px}.footer-left img{width:24px;height:24px;margin-right:5px}.social-icons{margin-bottom:4px}.social-icons a img{width:32px;height:32px;margin:0 5px}.footer-links a{margin:24px 12px 0}.cd-popup{position:fixed;left:0;top:0;z-index:1003;padding-top:5%;height:100%;width:100%;background-color:rgb(94 110 141 / .1);opacity:0;visibility:hidden;-webkit-transition:opacity .3s,visibility 0s .3s;-moz-transition:opacity .3s,visibility 0s .3s;transition:opacity .3s,visibility 0s .3s}.cd-popup.is-visible{opacity:1;visibility:visible;-webkit-transition:opacity .3s,visibility;-moz-transition:opacity .3s,visibility;transition:opacity .3s,visibility}.cd-popup-container{position:relative;width:90%;max-width:400px;margin:4em auto;background:#e9fdf4;border-radius:12px;text-align:center;box-shadow:rgb(0 0 0 / .8) 0 8px 32px,rgb(10 37 64 / .35) 0 -1px 2px 0 inset;-webkit-transform:translateY(-40px);-moz-transform:translateY(-40px);-ms-transform:translateY(-40px);-o-transform:translateY(-40px);transform:translateY(-40px);-webkit-backface-visibility:hidden;-webkit-transition-property:-webkit-transform;-moz-transition-property:-moz-transform;transition-property:transform;-webkit-transition-duration:.3s;-moz-transition-duration:.3s;transition-duration:.3s}.cd-popup-container p{padding:3em 1em}.cd-popup-container .cd-buttons:after{content:"";display:table;clear:both}.cd-popup-container .cd-buttons li{float:left;width:50%;list-style:none}.cd-popup-container .cd-buttons a{display:block;height:60px;line-height:60px;text-transform:uppercase;color:#fff;-webkit-transition:background-color .2s;-moz-transition:background-color .2s;transition:background-color .2s}.cd-popup-container .cd-buttons li:first-child a{background:#fc7169;border-radius:0 0 0 .25em;cursor:pointer}.no-touch .cd-popup-container .cd-buttons li:first-child a:hover{background-color:#fc8982}.cd-popup-container .cd-buttons li:last-child a{background:#5cb4f5;border-radius:0 0 .25em;cursor:pointer}.no-touch .cd-popup-container .cd-buttons li:last-child a:hover{background-color:#c5ccd8}.cd-popup-close{cursor:pointer}.cd-popup-container .cd-popup-close{position:absolute;top:8px;right:8px;width:30px;height:30px}.cd-popup-container .cd-popup-close::after,.cd-popup-container .cd-popup-close::before{content:'';position:absolute;top:12px;width:14px;height:3px;background-color:#8f9cb5}.cd-popup-container .cd-popup-close::before{-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);left:8px}.cd-popup-container .cd-popup-close::after{-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg);right:8px}.is-visible .cd-popup-container{-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0);transform:translateY(0)}.lang{display:inline-block;width:33%;padding:1% 0;cursor:pointer;border:1px solid #e1fff4;transition:border .1s ease-out}.selected{color:#fff;font-weight:900;background-color:#209bd6;border-radius:3px}.lang:hover{border:1px solid #209bd6;border-radius:3px}.langBox{padding:10% 4% 4%;font-size:14px}.langBox a{text-decoration:none;color:#333}.stat-nav-wrapper button{border:none;color:#333;cursor:pointer;background:0 0}.stat-nav-wrapper .langSel{position:absolute;right:5px}.stat-nav-wrapper .share{position:absolute;right:95px}.stat-nav-wrapper button>img{width:20px;height:auto;margin-right:2px;vertical-align:middle}a:focus,button:focus,textarea:focus{outline:0}@media only screen and (max-width:900px){.stat-nav-wrapper button{font-size:0}.stat-nav-wrapper .langSel{right:5px}.stat-nav-wrapper .share{right:40px}}.cd-popup-trigger{display:block;width:170px;height:50px;line-height:50px;margin:3em auto;color:#fff;font-size:.875rem;font-weight:700;text-transform:uppercase;border-radius:50em;background:#35a785;box-shadow:0 3px 0 rgb(0 0 0 / .07)}@media only screen and (min-width:1170px){.cd-popup-container{margin:8em auto}.cd-popup-trigger{margin:6em auto}}.processing-modal{display:none;position:fixed;z-index:10000;left:0;top:0;width:100%;height:100%;background-color:rgb(0 0 0 / .6)}.processing-content{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:16px}.spinner{border:6px solid #f3f3f3;border-top:6px solid #7253ed;border-radius:50%;width:50px;height:50px;margin:0 auto 12px;animation:1s linear infinite spin}@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}.howto-container{width:95vw;max-width:1100px;margin:20px auto;font-family:system-ui,sans-serif;padding:20px}.howto-container h2{font-size:1.3rem;margin-bottom:15px;color:#333}.howto-steps{list-style:decimal inside;padding-left:0;margin:0}#unwebp-guide,.unwebp-container{margin:0 auto;padding:20px;font-family:Arial,sans-serif}.howto-steps li{margin-bottom:12px;line-height:1.5;color:#444}#unwebp-guide h2,.unwebp-drop-area svg{margin-bottom:10px}.howto-steps li strong{color:#222}.howto-steps li ul{list-style:disc inside;margin-top:6px}.howto-steps li small{color:#777;display:block;margin-top:4px}.unwebp-container{background:#fff;border-radius:16px;max-width:600px;width:100vw;box-shadow:0 4px 12px rgb(0 0 0 / .1)}.unwebp-title{margin-bottom:20px}.unwebp-toggle{position:relative;display:flex;width:100%;background:#f1f3f4;border-radius:8px;overflow:hidden;margin-bottom:20px;border:1px solid #ccc;box-shadow:rgb(50 50 93 / .2) 2px 1px 5px 0 inset,rgb(0 0 0 / .3) 0 5px 5px -18px inset}.unwebp-toggle-bg{position:absolute;top:0;left:0;width:50%;height:100%;background:#fff;border-radius:8px;transition:transform .3s;z-index:0;box-shadow:rgb(0 0 0 / .24) 0 3px 8px}.unwebp-toggle button{flex:1;padding:10px;border:none;background:#fff0;cursor:pointer;font-size:14px;color:#555;z-index:1;position:relative;transition:color .3s}.unwebp-toggle button.unwebp-active{color:#007b8f;font-weight:700}.unwebp-toggle.upload-active .unwebp-toggle-bg{transform:translateX(100%)}.unwebp-input{width:100%;padding:10px;border-radius:8px;border:1px solid #ccc;font-size:14px}.unwebp-drop-area{display:flex;flex-direction:column;justify-content:center;align-items:center;border:2px dashed #ccc;border-radius:8px;padding:30px;color:#777;font-size:14px;cursor:pointer}.unwebp-note{font-size:13px;color:#555;margin-bottom:15px}.unwebp-download{display:flex;justify-content:center;align-items:center;gap:10px;margin-top:20px}.unwebp-download button{background:#1e9cb8;border:none;color:#fff;padding:12px 20px;border-radius:8px;font-size:16px;cursor:pointer}.unwebp-download select{padding:10px;border-radius:8px;border:1px solid #ccc;font-size:14px}.unwebp-preview{display:none;margin-top:20px}.unwebp-preview img{max-width:100%;border-radius:8px;background:repeating-conic-gradient(#ccc 0 25%,transparent 0 50%) 50%/20px 20px}#unwebp-guide{width:95vw;max-width:1100px;line-height:1.6;color:#333}#unwebp-guide img{max-width:70vw;display:block}#unwebp-guide h2{font-size:1.8rem;color:#222;border-bottom:2px solid #ddd;padding-bottom:5px}#unwebp-guide ol{padding-left:20px;margin-bottom:20px}#unwebp-guide ol li{margin-bottom:8px}#unwebp-guide h3{font-size:1.2rem;margin:0;padding:0;color:#137568}#unwebp-guide p{margin-bottom:2px}#unwebp-guide strong{color:#000}@media (max-width:600px){.footer{flex-direction:column;align-items:center}.footer-left,.footer-right{margin:15px 0}.footer-center{position:static;transform:none;margin:5px 0}#unwebp-guide{padding:15px}#unwebp-guide h2{font-size:1.5rem}#unwebp-guide h3{font-size:1.1rem}}.custom-alert-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgb(0 0 0 / .5);display:flex;justify-content:center;align-items:center;z-index:9999}.custom-alert-box{background:#fff;padding:20px 25px;border-radius:10px;max-width:400px;width:90%;font-family:sans-serif;box-shadow:0 4px 12px rgb(0 0 0 / .2)}.custom-alert-box p{margin-bottom:20px;color:#333;font-size:16px}.custom-alert-box button{background:#1e9cb8;border:none;color:#fff;padding:10px 18px;border-radius:6px;cursor:pointer;font-size:14px}.custom-alert-box button:hover{background:#0e8ca8}/* -------------------------------------------------- */
/* FAQ SECTION */
/* -------------------------------------------------- */

.faq-section {
    margin: 40px 0;
    padding: 25px;
    max-width: 1100px;
    margin: auto;
}

.faq-section h3 {
    font-size: 1.8rem;
    margin-bottom: 10px;
    color: #222;
    border-bottom: 2px solid #ddd;
    padding-bottom: 5px;
}

.faq-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.faq-item {
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 15px 20px;
    background: #fafafa;
    cursor: pointer;
    transition: all 0.25s ease;
}

.faq-item:hover {
    background: #f0f0f0;
}

.faq-question {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
    color: #333;
}

.faq-answer {
    font-size: 15px;
    color: #555;
    line-height: 1.6;
    display: none; /* hidden until click JS */
}

/* Expand class for active FAQ */
.faq-item.active .faq-answer {
    display: block;
}

/* ----------------------------------------------- */
/* Optional: FAQ Toggle Animation (smooth open) */
/* ----------------------------------------------- */

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
}

.faq-item.active .faq-answer {
    max-height: 500px; /* large enough */
}

/* -------------------------------------------------- */
/* RELATED PAGES */
/* -------------------------------------------------- */

.related-pages {
    margin-top: 40px;
    padding: 25px;    
    max-width: 1100px;
    margin: auto;
}

.related-pages h3 {
    font-size: 1.8rem;
    margin-bottom: 10px;
    color: #222;
    border-bottom: 2px solid #ddd;
    padding-bottom: 5px;
}

.related-pages ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.related-pages ul li {
    margin: 10px 0;
    max-width: 500px;
}

.related-pages ul li a {
    display: block;
    padding: 12px 14px;
    background: linear-gradient(45deg, #7ED6DF, #FF9FF3);
    text-decoration: none;
    font-size: 16px;
    font-weight: 600;
    color: #333;
    transition: all 0.25s ease;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.related-pages ul li a:hover {
    background: linear-gradient(45deg, #FF9FF3, #7ED6DF);
    color: #000;
}

/* -------------------------------------------------- */
/* RESPONSIVE */
/* -------------------------------------------------- */

@media (max-width: 768px) {
    .faq-section, 
    .related-pages {
        padding: 18px;
    }

    .faq-question {
        font-size: 17px;
    }

    .faq-answer {
        font-size: 14px;
    }

    .related-pages ul li a {
        font-size: 15px;
        padding: 10px 12px;
    }
}