@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800&display=swap"); * { box-sizing: border-box; font-family: "Inter", sans-serif; } body { padding: 0; margin: 0; -webkit-font-smoothing: antialiased; font-family: var(--font-family); overflow-x: hidden; background: rgba(255, 33, 129, 0.2); background: radial-gradient( circle, rgba(168, 237, 223, 0.13) 0%, rgba(166, 143, 248, 0.14) 50% ); } /* appscms navbar */ .appscms-navbar { background-color: var(--white-color); height: 45px; position: sticky; top: 0; z-index: 999; } .appscms-navbar-nav { display: flex; width: 100%; height: 100%; justify-content: space-between; } .appscms-navbar-nav a { display: flex; align-items: center; } .appscms-navbar-nav-links { width: 100%; height: 100%; display: flex; justify-content: flex-end; gap: 45px; align-items: center; } .appscms-nav-link { font-size: 15px; color: var(--black-light); font-weight: 450; } .appscms-nav-link:hover { color: var(--black-color); text-decoration: underline; } .arrow-svg { display: none; } .appscms-toolbar { background-color: var(--primary-color); box-shadow: 1px 4px 10 #00000026; position: sticky; z-index: 999; top: 45px; } .appscms-toolbar .appscms-toolbar-list { list-style: none; display: flex; padding: 0; margin: 0; height: 40px; gap: 59px; } .appscms-toolbar .appscms-toolbar-list .appscms-toolbar-list-item { color: var(--black-light); display: block; font-size: 16px; line-height: 24px; padding: 10px; position: relative; text-decoration: none; display: flex; align-items: center; justify-content: center; cursor: pointer; } .appscms-toolbar .appscms-toolbar-list .appscms-toolbar-list-item:first-child { padding-left: 0px; } .appscms-toolbar .appscms-toolbar-list .appscms-toolbar-list-item:first-child { padding-right: 0px; } .appscms-toolbar .appscms-toolbar-list .appscms-toolbar-list-item:hover > .list-item-dropdown { display: block; opacity: 1; } .appscms-toolbar .appscms-toolbar-list .appscms-toolbar-list-item:hover { border-bottom: 2px solid white; padding-bottom: 8px; position: relative; } /* smooth scrolling code */ .appscms-toolbar-list { overflow-y: hidden; overflow-x: auto; } .appscms-toolbar-list::-webkit-scrollbar { width: 0; height: 0; } .appscms-toolbar-list::-webkit-scrollbar-track { background-color: transparent; } .appscms-toolbar-list::-webkit-scrollbar-thumb { background-color: transparent; } .appscms-toolbar .list-item-dropdown { left: 0px; position: fixed; top: 85px; min-width: 500px; width: 90vw; box-shadow: 3px 10px 40px rgba(24, 29, 32, 0.05); z-index: 200; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; padding: 25px 50px 50px 50px; display: none; background-color: var(--white-color); } .list-item-dropdown-heading { font-weight: 600; font-size: 13px; color: var(--black-light); margin-bottom: 8px; } .list-item-dropdown li { padding-top: 1px; padding-bottom: 1px; list-style: none; } .list-item-dropdown li .toolbar-link { font-weight: 600; line-height: 1.7; color: var(--dark-gray); padding-top: 10px; padding-bottom: 8px; align-items: center; width: 100%; font-size: 16px; text-decoration: none; text-transform: capitalize; white-space: nowrap; } .list-item-dropdown li .toolbar-link:hover { background-color: rgba(241, 241, 241, 0.279); box-shadow: 0px 0px 5px rgba(241, 241, 241, 0.279); border-radius: 5px; color: #323232; } .appscms-toolbar-list-item-span { color: var(--white-color); display: block; font-size: 15px; line-height: 24px; width: 100%; white-space: nowrap; padding: 8px 0; position: relative; text-decoration: none; } .hamburger { display: none; } .appscms-faq-section { max-width: 1140px; } @media (max-width: 768px) { .close-nav-ham { display: flex !important; justify-content: end; } .hamburger { display: block; cursor: pointer; position: absolute; right: -20px; /* top: 5px; */ z-index: 9999; } .appscms-toolbar { background-color: var(--black-color); box-shadow: 1px 4px 10 #00000026; overflow-x: hidden; } .appscms-navbar-nav-links { display: none; } .appscms-toolbar { top: 0px; position: fixed; transition: all 0.3s ease; width: 272px; right: -272px; display: none; z-index: 1000; } .appscms-toolbar .appscms-toolbar-list { height: 100vh; flex-direction: column; gap: 0px; overflow-y: scroll; overflow-x: hidden; } .appscms-toolbar .appscms-toolbar-list .appscms-toolbar-list-item { align-items: flex-start; flex-direction: column; } .appscms-toolbar .appscms-toolbar-list .appscms-toolbar-list-item:first-child { padding-left: 10px; } .appscms-toolbar .appscms-toolbar-list .appscms-toolbar-list-item:hover { border-bottom: none; padding-bottom: 10px; } .appscms-toolbar .appscms-toolbar-list .appscms-toolbar-list-item:first-child { padding-right: 10px; } .list-item-dropdown li .toolbar-link { color: var(--white-color); font-size: 15px; } .appscms-toolbar-list-item-span { font-size: 17px; font-weight: 600; } .list-item-dropdown-heading { display: none; } .appscms-toolbar .list-item-dropdown { padding: 0px; width: 100%; position: static; display: block; overflow: hidden; transition: all 0.3s ease; background-color: transparent; opacity: 0; height: 0px; max-height: 0px; } .appscms-toolbar .appscms-toolbar-list-item:nth-child(1) > .list-item-dropdown { opacity: 1; height: auto; max-height: 200px; } .arrow-svg { display: block; } } .bg-primary { background-color: #1b2fe7; } /* headings section */ .appscms-h1, .success-msg { font-size: 50px; font-weight: 799; font-family: "inter", sans-serif; margin: 20px 0px; color: var(--mid-gray); } .appscms-h3 { font-size: 30px; color: var(--mid-gray); } .appscms-h2 { font-size: 20px; padding-top: 8px; font-weight: 500; color: var(--light-gray); } /* searchbar */ #appscms-searchbar { border-radius: 50px; padding: 10px; background-color: white; } .form-control:focus { border-color: transparent; box-shadow: none; } .btn-search:hover { transform: scale(1.2); } .btn-search:focus, .btn-search:active { background-color: transparent; border-color: transparent; box-shadow: none; } /* category section */ .toolfilters { margin-top: 80px; cursor: pointer; background-color: rgb(255, 255, 255); display: flex; height: 30px; box-shadow: 1px 4px 10px rgba(0, 0, 0, 0.15); height: 53px; align-items: center; border-radius: 27px; overflow: hidden; margin: 20px; color: #000; } .toolfilter { margin: auto; padding: 0px 30px; } /* test scroll */ .toolfilters { overflow-y: hidden; overflow-x: auto; } .toolfilters::-webkit-scrollbar { width: 0; height: 0; } .toolfilters::-webkit-scrollbar-track { background-color: transparent; } .toolfilters::-webkit-scrollbar-thumb { background-color: transparent; } /* margin: 4px; */ /* overflow: hidden; */ .toolfilter:hover { background-color: var(--primary-color); color: white; height: 90%; border-radius: 26px; display: flex; align-items: center; } /* tools section */ .appscms-tool-container:nth-child(even) .appscms-tool .tool-top { background-color: rgb(233, 107, 34); } #appscms-tools-section { padding-top: 50px; } .appscms-tool { border-radius: 10px; box-shadow: 2px 3px 7px 2px rgba(0, 0, 0, 0.158); cursor: pointer; height: 169px; margin-bottom: 25px; background-color: rgba(255, 255, 255, 0.7); transition: all 0.2s ease; } .appscms-tool:hover { transform: translate(0, -4px) scale(1.01); box-shadow: 2px 5px 7px 2px rgba(0, 0, 0, 0.236); } .appscms-tool .tool-top { background: #4b5cf4; overflow: hidden; height: calc(171px - 57px); border-top-right-radius: 10px; border-top-left-radius: 10px; display: flex; align-items: center; transition: all 0.5s ease; } .appscms-tool .tool-top:hover { transform: translate(0, 0px) scale(1.001); animation: moveGradient 10s linear infinite; filter: hue-rotate(15deg) saturate(125%) brightness(104%); } .appscms-tool .tool-top:active { transform: translate(0, 0px) scale(1.003); animation: moveGradient 10s linear infinite; filter: hue-rotate(-15deg) saturate(105%) brightness(95%); } @keyframes moveGradient { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } } .appscms-tool .tool-top .tool-img { padding: 0px; margin-right: 21px; background: rgba(255, 255, 255, 25%); border-radius: 300px; margin-left: 20px; height: 58px; width: 58px; display: flex; align-items: center; border: 1px solid #ffffff12; } .appscms-tool .tool-top .tool-img img { height: 34px; width: 72px; transition: filter 0.3s ease-in-out; /* Smooth transitions for transform and box-shadow */ } .appscms-tool .tool-top .tool-img img:hover { transform: scale(1.001); /* Slightly scale up the image on hover */ filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.355)); } .appscms-tool .tool-text { color: var(--white-color); padding-right: 33px; font-weight: 300; font-size: 16px; line-height: 20.57px; } .appscms-tool .tool-heading { padding-top: 14px; padding-bottom: 19px; color: var(--dark-gray); height: 57px; font-weight: 500; font-size: 17px; text-align: center; } .text-primary { font-size: 30px; font-weight: 600; } .description { font-size: 12px; line-height: 0.2; } /* blog section */ .appscms-blogs { border-radius: 10px; padding-top: 20px; background-color: rgba(255, 255, 255, 0.494); } .appscms-blog-cards { box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.06); margin-bottom: 20px; border-radius: 10px !important; /* max-width: 340px; */ /* min-width: 300px; */ } .card-footer { border-radius: 10px !important; } .appscms-blog-cards img { border-radius: 10px 10px 0px 0px; height: auto; } .card-body { display: flex; flex-direction: column; } @media (min-width: 768px) { .appscms-h1 { margin-top: 50px; } } /* recent post blog heading */ /* author in blog */ .wrapfooter { display: flex; margin-top: 50px; margin-bottom: -0px; } .wrapfooter img { width: 42px; height: 42px; border-radius: 50%; } .wrapfooter .author-meta { padding: 0px 15px 0px 10px; } .wrapfooter .author-meta a { font-size: 15px; font-weight: 500; color: #3e3e3e; text-transform: capitalize; text-decoration: none; } .post-date { color: #878787; font-size: 12px; font-weight: 500; display: block; text-align: left; } /* footer */ #copyright-text { font-size: 13px !important; } .footer-prducts-div-heading { } .appscms-product-footer { background-color: white; margin-top: 50px; } .appscms-footer-products { opacity: 100%; } .footer-product-link { font-size: 15px; } .appscms-footer-products a { text-decoration: none; color: #000; } /* footer i89 modal css */ .privacy-links-item { font-stretch: 400; font-weight: 400; font-size: 16px; line-height: 24px; color: rgba(26, 26, 26, 1); margin: 0 20px; } .privacy-links-item:last-child { margin-right: 0; } .drop-down-btn { cursor: pointer; outline: 0px; border: 0px; width: auto; overflow: visible; display: flex; -webkit-box-align: center; align-items: center; background-color: transparent; transition: background-color 0.1s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0s; font-weight: 400; font-size: 13px; line-height: 24px; color: rgb(26, 26, 26); } .language-drop-down-menu { display: flex; justify-content: space-between; margin: 0; padding: 0; flex-wrap: wrap; } .language-drop-down-item { list-style: none; width: 50%; padding: 10px 12px 0px 0px; text-align: center; font-size: 15px; margin-bottom: 0; } .language-drop-down-item a:hover { background: var(--secondary-color-3); border-radius: 3px; } .language-drop-down-item a { text-decoration: none; display: flex; width: 100%; align-items: center; padding: 9px 9px; color: #1e1e1e; font-size: 13px; border-bottom: 1px solid rgb(224, 224, 224); } @media (max-width: 575.98px) { body { background: var(--secondary-color); } .appscms-h1, .success-msg { font-size: 30px; font-weight: 799; } .appscms-h2 { font-size: 12px; font-weight: 400; color: var(--mid-gray); } #appscms-tools-section { padding-top: 10px; } /* category section */ .toolfilters { font-size: 10px; height: 30px; padding: 3px; } .toolfilter { margin: auto; padding: 0px 15px; } /* search bar */ #appscms-searchbar { border-radius: 50px; padding: 0px; font-size: 8px; } #searchbar-placeholder { font-size: 12px; } .text-primary { font-size: 20px; font-weight: 600; } .description { font-size: 12px; line-height: 0.2; } .footer-product-link { font-size: 12px; } /* recent post and blog section phone */ /* blog section */ .appscms-blogs { border-radius: 10px; padding-top: 20px; background-color: rgba(255, 255, 255, 0.494); } .appscms-blog-cards { box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.06); margin-bottom: 20px; border-radius: 10px; /* max-width: 340px; */ /* min-width: 300px; */ } .appscms-blog-cards img { border-radius: 10px 10px 0px 0px; height: 180px; } .card-body { display: flex; flex-direction: column; justify-content: space-between; } /* recent post blog heading */ /* author in blog */ .wrapfooter { display: flex; margin-top: 50px; margin-bottom: -0px; } .wrapfooter img { width: 42px; height: 42px; border-radius: 50%; } .wrapfooter .author-meta { padding: 0px 15px 0px 10px; } .wrapfooter .author-meta a { font-size: 15px; font-weight: 500; color: #3e3e3e; text-transform: capitalize; text-decoration: none; } .post-date { color: #878787; font-size: 12px; font-weight: 500; display: block; text-align: left; } } /* Small devices (tablets) */ @media (min-width: 576px) and (max-width: 767.98px) { .toolfilters { font-size: 10px; height: 40px; padding: 1px; } #searchbar-placeholder { font-size: 13px; } #appscms-searchbar { padding: 3px; } /* toolfilter { margin: auto; padding: 0px 20px; } */ } /* Medium devices (desktops) */ @media (max-width: 768px) { #appscms-tools-section-row { gap: 15px; justify-content: center; margin-top: 35px; } .appscms-tool .tool-top .tool-img img { border-radius: 0; } .appscms-tool .tool-top .tool-img { justify-content: center; background: unset; border: 5px solid #ffffff08; } .appscms-tool { box-shadow: none; margin-bottom: 25px; height: auto; background-color: transparent; display: flex; flex-direction: column; align-items: center; } .appscms-tool:hover { box-shadow: unset; } .appscms-tool .tool-top { background-color: transparent; flex-direction: column; justify-content: center; border-radius: 10px; height: 64px; width: 64px; border-radius: 21px; } .appscms-tool .tool-img { padding: 0px !important; } .appscms-tool .tool-img img { height: 38px !important; width: 38px !important; } .appscms-tool .tool-text { display: none; } .appscms-tool .tool-heading { font-size: 12px; line-height: 14.52px; margin-top: 14px; padding: 0px; height: 15px; font-weight: 400; } .appscms-tool-container { /* margin: 0 auto; */ width: auto !important; } .appscms-tool-container:nth-child(even) .appscms-tool .tool-top { background-color: transparent; } } @media (min-width: 768px) and (max-width: 991.98px) { .toolfilters { font-size: 12px; } } /* Large devices (desktops) */ @media (min-width: 992px) and (max-width: 1199.98px) { /* Insert CSS code here */ } /* Extra Large devices (large desktops) */ @media (min-width: 1200px) and (max-width: 1399.98px) { /* Insert CSS code here */ } /* Extra Extra Large devices (larger desktops) */ @media (min-width: 1400px) { /* Insert CSS code here */ } /* animations */ .appscms-product-footer li { list-style: none; } .footer-product-link { border-radius: 5px; color: #5e5e5f; display: block; font-weight: 500; font-size: 14px; line-height: 19px; padding: 15px 20px 14px 10px; position: relative; transition: none; } .footer-product-link:hover { background-color: #f3f3f451; color: #262628; text-decoration: none; } .appscms-footer { background-color: var(--white-color); padding: 44px 10px 10px 10px; border-top: 1px solid rgb(148, 148, 148); } .appscms-footer-link { list-style: none; } .appscms-footer-link a { color: #6b6b6b; display: block; margin-top: 18px; font-size: 14px; font-weight: 500; line-height: 18px; } .appscms-footer-link a:hover { color: var(--black-color); } .appscms-footer-category { font-size: 14px; padding-bottom: 12px; font-weight: 700; line-height: 12px; color: var(--mid-gray); list-style: none; } .upload-from-drives { display: flex; gap: 20px; margin-top: 10px; } .upload-from-drives img { cursor: pointer; } #appscms-tools-section a { text-decoration: none; } .success-msg { text-align: center; margin: 30px 0px; color: var(--primary-color); } .go-back-block { display: flex; align-items: center; justify-content: center; margin: 30px 0px; } .go-back-block button { background-color: var(--primary-color); color: var(--white-color); border: none; border-radius: 10px; padding: 10px 15px; font-size: 15px; height: 48px; min-width: 212px; } .go-back-block button i { color: var(--black-color); background-color: var(--white-color); padding: 8px; border-radius: 50%; font-size: 12px; } #rating-img { height: 1px; width: 1px; filter: brightness(); filter: brightness(100); position: absolute; } .rating-tool { display: flex; justify-content: center; align-items: center; background-color: rgb(252, 252, 252); border-radius: 50px; height: 70px; margin: 40px 0px; } #rating { font-size: 25px; font-weight: 600; } .rating-text { font-size: 16px; } .rating-stars { padding: 0px 10px; display: flex; justify-content: space-between; gap: 4px; } .rating-stars i { font-size: 20px; } .download-social-share { background: #d0d3ed; padding: 40px 0px; display: flex; justify-content: space-between; } .share-icons { display: flex; gap: 30px; justify-content: end; } .download-social-share a { color: #000; font-size: 17px; height: 40px; width: 40px; display: flex; align-items: center; justify-content: center; padding: 10px 10px; border: 2px solid var(--black-color); border-radius: 50%; } .appscms-heading { font-size: 25px; text-align: center; font-weight: 500; } .website-img { height: 50px; width: 50px; } .website-showcases { padding: 50px 0px; } .website-showcase { display: flex; flex-direction: column; justify-content: center; align-items: center; margin-bottom: 25px; overflow: hidden; } .website-showcase a { color: var(--black-color); font-size: 15px; margin-top: 10px; } .feature-showcase { padding: 50px 0px; } .feature-showcase-div { display: flex; flex-direction: column; justify-content: center; align-items: center; margin-bottom: 25px; } .feature-showcase-div img { height: 45px; width: 45px; } .feature-showcase a span { margin-top: 15px; font-size: 14px; } .feature-showcase a { color: var(--black-color); } .video-h1, .audio-h1 { font-weight: 600; font-size: 53px; } .video-h2, .audio-h2 { font-size: 22px; } .shareModal { display: none; position: fixed; z-index: 100000000000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0, 0, 0, 0.5); } .shareModal .share-modal-content { background-color: #fefefe; margin: 15% auto; padding: 20px; /* border: 1px solid #888; */ width: 70%; height: 200px; text-align: center; } .shareModal .close-share-modal { color: #aaa; float: right; display: none; font-size: 28px; font-weight: bold; } .shareModal h5 { color: #000; padding-top: 10px; font-weight: 700; } .shareModal .close-share-modal:hover, .shareModal .close-share-modal:focus { color: black; text-decoration: none; cursor: pointer; } .share-modal-social { display: flex; gap: 30px; height: 100%; padding-bottom: 60px; align-items: center; justify-content: center; } .share-modal-social a { color: #000; } .share-modal-social a i { font-size: 30px; } .authors-list a { color: var(--dark-gray); } .featurePageAuthor { display: flex; flex-direction: column; width: 100%; justify-content: center; } .featurePageAuthor .author-meta { width: 500px; margin: 0 auto; padding-bottom: 5rem; } .featurePageAuthor .author-meta .authorName { font-size: 20px; padding: 1rem 0px; font-weight: 900; text-align: center; } .featurePageAuthor .author-img { width: 100px; height: 100px; border-radius: 100%; } .featurePageAuthor .author_bio { font-size: 16px; } @media (max-width: 768px) { .authors-list { padding: 25px; } .featurePageAuthor .author-meta { width: 100%; } } .contributor { width: 100px; } .contributor .contributor-name { font-size: 13px; margin-top: 8px; text-transform: capitalize; } .infographics_section { width: 100%; padding: 50px 0px 50px 0px; border-top: 1px solid rgb(224, 224, 224); } .infographics_section .infographics-desc { position: absolute; color: #000; bottom: 0; } .infographics_section .slider { position: relative; max-width: 40rem; height: 26.625rem; margin: 0 auto; overflow: hidden; } .infographics_section .slide { position: absolute; top: 0; width: 100%; height: 26.625rem; display: flex; align-items: center; justify-content: center; transition: transform 1s; } .infographics_section .slide img { width: 200px; height: 100%; transition-duration: 0.27s; /* object-fit: contain; */ } .infographics_section button { background: none; border: none; } .infographics_section button .fas { color: #000; } .infographics_section .btn-slide { position: absolute; top: 50%; z-index: 10; height: 5.5rem; width: 5.5rem; cursor: pointer; } .infographics_section .prev { left: 3rem; transform: translate(-50%, -50%); } .infographics_section .next { right: 3rem; transform: translate(50%, -50%); } .infographics_section .dots-container { display: flex; justify-content: center; align-items: center; position: relative; } .infographics_section .dot { width: 25px; height: 5px; margin: 15px 5px; border-radius: 0.5rem; background: rgba(39, 39, 39, 0.5); cursor: pointer; } .infographics_section .dot.active { background: #272727; } .slide img { transition-duration: 0.27s; } .slide img:hover { transform: scale(1.1); box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.12); } .no-result-found-msg { font-size: 20px; color: var(--black-light); text-align: center; width: 100%; font-weight: 500; } .close-nav-ham { display: none; } .active-lang { background: #f4f5ff; border-radius: 3px; }