@import"https://fonts.googleapis.com/css2?family=Rubik:wght@400;500&display=swap";header{margin:0 auto;width:80%;height:20vh;display:flex;align-items:center;justify-content:space-between}header .nav-container{display:flex;align-items:center;gap:3rem;animation:fade 1s}header .nav-container nav{text-transform:uppercase;letter-spacing:.1rem;font-size:.9rem}header .nav-container nav ul{display:flex;align-items:center;gap:3rem;list-style:none}header .nav-container nav ul .bottom-line-li{width:100%;border-bottom:1px solid rgba(189,189,189,.308);margin:0}header .nav-container nav ul li a{color:#252b46;text-decoration:none}header .nav-container nav ul li a:hover{color:#fa5757}header .nav-container .login-btn{border:none;font-size:.9rem;font-weight:700;letter-spacing:.1rem;color:#fff;border:2px solid hsl(0,94%,66%);background-color:#fa5757;border-radius:.3rem;transition:all .3s;box-shadow:0 6px 8px -2px #4b789b5d;cursor:pointer;padding:.72rem 2rem;text-transform:uppercase}header .nav-container .login-btn:hover{background-color:transparent;color:#fa5757}header .nav-container .icon-container-header{display:flex;margin-top:3rem;gap:2rem}header .nav-container .icon-container-header svg:hover{cursor:pointer}header .nav-container .icon-container-header svg:hover path{fill:#fa5757}header .nav-container .hidden{display:none}header .mobile-menu-btn{display:none;border:none;background:none;cursor:pointer}header .mobile-menu-btn img{width:30px;height:22px}header .mobile-menu-btn .close-img{display:none;height:24px}header .mobile-menu-btn .show{display:block}@media (max-width: 880px){header{display:flex;align-items:flex-start;justify-content:center}header .mobile-menu-btn{z-index:1;display:block;position:absolute;right:5%;top:10%}header .bookmark-logo{z-index:1;position:absolute;left:5%;top:10%}header .bookmark-white g path{fill:#fff}header .nav-container{position:absolute;margin-top:7.5rem;z-index:1;display:flex;align-items:center;justify-content:end;flex-direction:column;transition:all .4s;width:100%}header .nav-container .nav{width:80%}header .nav-container .nav ul{margin:0;padding:0;flex-direction:column;gap:1.4rem}header .nav-container .nav ul li a{color:#fff;font-size:1.2rem}header .nav-container .login-btn{width:220px;background-color:transparent;border-color:#fff;font-size:1rem}header .nav-container .login-btn:hover{background-color:#fff;color:#252b46}header .hidden{display:none}}.show{display:block}.hidden{display:none}.hero-section{margin:4rem auto;width:80%;display:flex;align-items:center;gap:2rem}.hero-section .hero-text-container{width:50%}.hero-section .hero-text-container h1{margin:0;font-size:3rem;font-weight:500;color:#252b46}@media (max-width: 820px){.hero-section .hero-text-container h1{font-size:2rem}}.hero-section .hero-text-container p{font-size:1.15rem;line-height:1.8rem;color:#9194a1}.hero-section .hero-text-container .btn-container{margin-top:1.8rem;display:flex;gap:1rem}.hero-section .hero-text-container .btn-container button{border:none;font-size:.9rem;font-weight:700;letter-spacing:.1rem;color:#fff;border:2px solid hsl(231,69%,60%);background-color:#5368df;border-radius:.3rem;transition:all .3s;box-shadow:0 6px 8px -2px #4b789b5d;cursor:pointer;padding:.8rem 1.4rem;letter-spacing:0}.hero-section .hero-text-container .btn-container .chrome-btn:hover{background-color:transparent;color:#5368df}.hero-section .hero-text-container .btn-container .firefox-btn{background-color:#7878781a;color:#252b46c7;border-color:transparent}.hero-section .hero-text-container .btn-container .firefox-btn:hover{border-color:#252b46c7;background-color:transparent}.hero-section .img-container{position:relative}.hero-section .img-container .hero-img{width:700px;margin-right:-100px}.hero-section .img-container .bg-img{position:absolute;width:1000px;height:72%;background-color:#5368df;border-bottom-left-radius:12rem;z-index:-1;top:30%;left:34%}@media (max-width: 1240px){.hero-section .img-container .bg-img{left:25%}}@media (max-width: 1240px){.hero-section{text-align:center;flex-direction:column-reverse;gap:4rem}.hero-section .img-container .hero-img{max-width:100%;height:100%;margin:0}.hero-section .hero-text-container{width:90%}.hero-section .btn-container{justify-content:center}}@media (max-width: 880px){.hero-section{width:90%}}.features-section{margin:10rem auto;width:80%}@media (max-width: 880px){.features-section{width:90%}}.features-section .feature-header{text-align:center}.features-section .feature-header h2{font-size:2.5rem;font-weight:500;color:#252b46}@media (max-width: 820px){.features-section .feature-header h2{font-size:2rem}}.features-section .feature-header p{font-size:1.15rem;line-height:1.8rem;color:#9194a1;max-width:52%;margin:0 auto}@media (max-width: 1240px){.features-section .feature-header p{max-width:100%}}.features-section .feature-header nav{margin:5rem auto;max-width:68%;padding-bottom:1rem}.features-section .feature-header nav .feature-bottom-line{margin-top:2rem;border-bottom:1px solid rgb(221,221,221);display:flex;justify-content:start}@media (max-width: 1240px){.features-section .feature-header nav .feature-bottom-line{display:none}}.features-section .feature-header nav .feature-bottom-line .inner-border{width:33%;border-top:4px solid hsl(0,94%,66%)}.features-section .feature-header nav .feature-bottom-line .move-to-right{margin-left:3.5rem}.features-section .feature-header nav .start{justify-content:start}.features-section .feature-header nav .center{justify-content:center}.features-section .feature-header nav .end{justify-content:end}.features-section .feature-header nav ul{padding-right:3rem;display:flex;align-items:center;justify-content:space-evenly;gap:4.5rem;list-style:none}@media (max-width: 1240px){.features-section .feature-header nav ul{flex-direction:column;justify-content:center;gap:1.5rem;padding:0}}.features-section .feature-header nav ul li span{font-size:1.1rem;letter-spacing:.02rem;color:#9194a1}.features-section .feature-header nav ul li span:hover{cursor:pointer;color:#fa5757}.features-section .feature-header nav ul .feature-bottom-line-item{width:100%;border-bottom:1px solid rgb(221,221,221);display:flex;justify-content:center;display:none}@media (max-width: 1240px){.features-section .feature-header nav ul .feature-bottom-line-item{display:flex}}.features-section .feature-header nav ul .feature-bottom-line-item .inner-border-item{width:50%;border-top:4px solid hsl(0,94%,66%)}.features-section .feature-main{display:flex;align-items:center;gap:10rem}@media (max-width: 1240px){.features-section .feature-main{flex-direction:column;text-align:center}}.features-section .feature-main .img-container{margin-left:2rem;position:relative}.features-section .feature-main .img-container .feature-img{width:600px;margin-right:-100px}@media (max-width: 1240px){.features-section .feature-main .img-container .feature-img{margin:0;max-width:100%}}.features-section .feature-main .img-container .bg-img{position:absolute;width:1000px;height:100%;background-color:#5368df;border-bottom-right-radius:12rem;z-index:-1;top:26%;right:12%}@keyframes fade{0%{opacity:0;transform:scale(1.1)}to{opacity:1;transform:scale(1)}}.features-section .feature-main .text-container h2{font-size:2rem;font-weight:500;color:#252b46}.features-section .feature-main .text-container p{font-size:1.15rem;line-height:1.8rem;color:#9194a1;max-width:95%}.features-section .feature-main .text-container .info-btn{border:none;font-size:.9rem;font-weight:700;letter-spacing:.1rem;color:#fff;border:2px solid hsl(231,69%,60%);background-color:#5368df;border-radius:.3rem;transition:all .3s;box-shadow:0 6px 8px -2px #4b789b5d;cursor:pointer;margin-top:1rem;padding:.8rem 1.4rem;letter-spacing:.02rem}.features-section .feature-main .text-container .info-btn:hover{background-color:transparent;color:#5368df}.features-section .animation-fade{animation:fade 1s}.download-section{margin:10rem auto;width:80%;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center}@media (max-width: 820px){.download-section{margin:1rem auto;width:90%}}.download-section h2{margin-top:6rem;color:#252b46;font-size:2.2rem;font-weight:500}@media (max-width: 820px){.download-section h2{font-size:1.8rem;margin-top:0}}.download-section p{font-size:1.15rem;line-height:1.8rem;color:#9194a1;max-width:52%;margin:0 auto}@media (max-width: 820px){.download-section p{max-width:100%}}.download-section .card-container{width:88%;margin:2.4rem 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem;justify-items:center}.download-section .card-container .card-extension{width:280px;height:360px;display:flex;flex-direction:column;align-items:center;justify-content:end;box-shadow:0 6px 8px #a9c4da5d;border-radius:1rem}.download-section .card-container .card-extension img{margin-bottom:2rem}.download-section .card-container .card-extension h3{margin:.4rem;font-size:1.5rem;font-weight:500;color:#252b46}.download-section .card-container .card-extension p{font-size:.95rem;margin-bottom:1rem}.download-section .card-container .card-extension hr{margin:0;width:100%;height:24px;font-weight:bolder;color:#bdbdbda8;border:none;overflow:hidden}.download-section .card-container .card-extension hr:after{content:"...............";letter-spacing:16px}.download-section .card-container .card-extension .extension-btn{margin:1rem 0 1.8rem;border:none;font-size:.9rem;font-weight:700;letter-spacing:.1rem;color:#fff;border:2px solid hsl(231,69%,60%);background-color:#5368df;border-radius:.3rem;transition:all .3s;box-shadow:0 6px 8px -2px #4b789b5d;cursor:pointer;padding:.8rem 1.6rem;letter-spacing:.04rem}.download-section .card-container .card-extension .extension-btn:hover{background-color:transparent;color:#5368df}.download-section .card-container .card-extension:nth-child(2){margin-top:2.4rem}.download-section .card-container .card-extension:nth-child(3){margin-top:4.4rem}.faq-section{margin:10rem auto;width:80%;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center}@media (max-width: 820px){.faq-section{margin:6rem auto}}.faq-section h2{color:#252b46;font-size:2.2rem;font-weight:500}@media (max-width: 820px){.faq-section h2{font-size:1.8rem}}.faq-section p{font-size:1.15rem;line-height:1.8rem;color:#9194a1;max-width:50%;margin:0 auto}@media (max-width: 820px){.faq-section p{max-width:100%}}.faq-section .faq-container{max-width:55%;margin-top:3.6rem}@media (max-width: 1040px){.faq-section .faq-container{max-width:100%}}.faq-section .faq-container hr{margin:0;border:none;border-bottom:1px solid rgba(187,187,187,.788)}.faq-section .faq-container .faq-row-wrapper .faq-body .faq-row .row-title{margin:.3rem 0;font-size:1.2rem;color:#252b46;font-weight:400;user-select:none}@media (max-width: 1040px){.faq-section .faq-container .faq-row-wrapper .faq-body .faq-row .row-title{font-size:1rem;text-align:left}}.faq-section .faq-container .faq-row-wrapper .faq-body .faq-row .row-title .icon-wrapper{margin-top:.45rem;display:flex;align-items:center;justify-content:center}.faq-section .faq-container .faq-row-wrapper .faq-body .faq-row .row-title .icon-wrapper svg{fill:#5368df;width:36px;height:36px}.faq-section .faq-container .faq-row-wrapper .faq-body .faq-row .row-title:hover{color:#fa5757}.faq-section .faq-container .faq-row-wrapper .faq-body .faq-row .row-content .row-content-text{margin:1.1rem 0;font-size:1rem;line-height:1.8rem;letter-spacing:.03rem;color:#9194a1;text-align:start;user-select:none}.faq-section .faq-btn{border:none;font-size:.9rem;font-weight:700;letter-spacing:.1rem;color:#fff;border:2px solid hsl(231,69%,60%);background-color:#5368df;border-radius:.3rem;transition:all .3s;box-shadow:0 6px 8px -2px #4b789b5d;cursor:pointer;margin-top:4rem;padding:.8rem 1.4rem;letter-spacing:.02rem}.faq-section .faq-btn:hover{background-color:transparent;color:#5368df}.contact-section{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4rem 0;background-color:#5368df;color:#fff}.contact-section .contact-title{text-align:center;font-size:2.2rem;font-weight:500;max-width:40%}@media (max-width: 700px){.contact-section .contact-title{max-width:90%;font-size:1.8rem;margin-bottom:2rem}}.contact-section .contact-subtitle{font-size:.9rem;margin:0 auto;letter-spacing:.4rem}@media (max-width: 700px){.contact-section .contact-subtitle{text-align:center}}.contact-section .contact-form{display:flex;gap:1rem}@media (max-width: 700px){.contact-section .contact-form{flex-direction:column}}.contact-section .contact-form .input-wrapper{display:flex;flex-direction:column;background-color:#fa5757;border-radius:.3rem}.contact-section .contact-form .input-wrapper .contact-input{width:280px;padding:0 1.1rem;font-size:1rem;height:50px;border:none;border-radius:.3rem}.contact-section .contact-form .input-wrapper .contact-input:focus{outline:none}.contact-section .contact-form .input-wrapper .error{height:44px;border:3px solid hsl(0,94%,66%);background-image:url(https://raw.githubusercontent.com/agusscript/bookmark-landing-page-react/94e3c897806c16012cf307075055aaf7b9fe48d9/src/assets/images/icon-error.svg);background-size:20px 20px;background-repeat:no-repeat;background-position:280px .7rem}.contact-section .contact-form .input-wrapper .error-text{padding:.15rem 0 .4rem;margin-left:1rem;font-size:.86rem;background-color:#fa5757;border-bottom-left-radius:.3rem;border-bottom-right-radius:.3rem}.contact-section .contact-form .input-wrapper .hidden{display:none}.contact-section .contact-form ::placeholder{color:#9194a1}.contact-section .contact-form .contact-btn{border:none;font-size:.9rem;font-weight:700;letter-spacing:.1rem;color:#fff;border:2px solid hsl(0,94%,66%);background-color:#fa5757;border-radius:.3rem;transition:all .3s;box-shadow:0 6px 8px -2px #4b789b5d;cursor:pointer;width:130px;height:50px;letter-spacing:.02rem}@media (max-width: 700px){.contact-section .contact-form .contact-btn{width:100%}}.contact-section .contact-form .contact-btn:hover{background-color:#fff;color:#fa5757}.contact-section .contact-form .contact-btn:active{background-color:#5368df}.contact-section .contact-modal{position:fixed;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;top:50%;left:50%;max-width:520px;min-height:300px;padding:1rem 4rem;line-height:1.7rem;-ms-transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);animation:smoth .4s;background-color:#252b46;border-radius:.4rem;box-shadow:0 6px 8px #a9c4da5d}@media (max-width: 810px){.contact-section .contact-modal{padding:1rem 2rem;width:70vw}}.contact-section .contact-modal h2{margin:.5rem;font-size:2.2rem;font-weight:500;line-height:2.2rem}@media (max-width: 810px){.contact-section .contact-modal h2{font-size:1.8rem}}.contact-section .contact-modal p{font-size:1.1rem;letter-spacing:.2rem}@media (max-width: 810px){.contact-section .contact-modal p{font-size:1rem}}.contact-section .contact-modal button{border:none;font-size:.9rem;font-weight:700;letter-spacing:.1rem;color:#fff;border:2px solid hsl(231,69%,60%);background-color:#5368df;border-radius:.3rem;transition:all .3s;box-shadow:0 6px 8px -2px #4b789b5d;cursor:pointer;margin-top:1rem;width:140px;height:46px;letter-spacing:.02rem}.contact-section .contact-modal button:hover{background-color:transparent}.contact-section .contact-modal button:active{background-color:#5368df}@keyframes smoth{0%{opacity:0}to{opacity:1}}.contact-section .hidden{display:none}html,body,#root{scroll-behavior:smooth;overflow-x:hidden}.overlay{background-color:#252b46e7;position:fixed;width:100%;height:100%;z-index:1;transition:all 1s}body{margin:0;padding:0;font-family:Rubik,serif}main{margin:0;padding:0}footer{background-color:#252b46;padding:2rem 0;display:flex;align-items:center;justify-content:space-around}@media (max-width: 700px){footer{flex-direction:column;text-align:center;gap:3.2rem}}footer .nav-container{display:flex;align-items:center;gap:1.2rem}@media (max-width: 700px){footer .nav-container{flex-direction:column;gap:3rem}}footer .nav-container img{width:170px}footer .nav-container nav ul{margin:0;display:flex;letter-spacing:.1rem;font-size:.87rem;gap:3rem;text-transform:uppercase;list-style:none}@media (max-width: 700px){footer .nav-container nav ul{flex-direction:column;padding:0;gap:2.2rem;font-size:1rem}}footer .nav-container nav ul a{text-decoration:none;color:#fff}footer .nav-container nav ul a:hover{color:#fa5757}footer .icon-container-footer{display:flex;align-items:center;gap:2rem}footer .icon-container-footer svg:hover{cursor:pointer}footer .icon-container-footer svg:hover path{fill:#fa5757}