.main[view=totpGenerator]{padding-bottom:0}.main[view=totpGenerator] .intro{position:relative;background:#000;padding:0;overflow:hidden;max-width:100%}@media (max-width:768px){.main[view=totpGenerator] .intro{display:flex;flex-flow:column nowrap;justify-content:flex-start;align-items:center}}@media (max-width:991px){.main[view=totpGenerator] .intro .container{flex-flow:column nowrap}}@media (max-width:768px){.main[view=totpGenerator] .intro .container{padding:0 16px}}.main[view=totpGenerator] .intro .intro-content{padding:64px 0;max-width:590px;order:1}@media (max-width:991px){.main[view=totpGenerator] .intro .intro-content{width:100%;max-width:100%;flex-flow:row nowrap;justify-content:center;align-items:center;padding-top:0}}@media (max-width:768px){.main[view=totpGenerator] .intro .intro-content{padding:0 0 40px}}.main[view=totpGenerator] .intro .intro-content .preHeading{color:#ffc700;font-size:28px;font-weight:500}@media (max-width:991px){.main[view=totpGenerator] .intro .intro-content .preHeading{font-size:26px;text-align:center}}@media (max-width:768px){.main[view=totpGenerator] .intro .intro-content .preHeading{font-size:24px}}@media (max-width:480px){.main[view=totpGenerator] .intro .intro-content .preHeading{font-size:20px}}@media (max-width:991px){.main[view=totpGenerator] .intro .intro-content h1,.main[view=totpGenerator] .intro .intro-content p{text-align:center}}@media (max-width:991px){.main[view=totpGenerator] .intro .intro-content .actions{justify-content:center}}.main[view=totpGenerator] .intro .intro-image{order:2}@media (max-width:991px){.main[view=totpGenerator] .intro .intro-image{width:100%;max-width:100%;display:flex;flex-flow:row nowrap;justify-content:center;align-items:center;text-align:center}}.main[view=totpGenerator] .howItWorks{padding:56px 0}@media (max-width:991px){.main[view=totpGenerator] .howItWorks [data-cols="4"]{--columns:2}}@media (max-width:640px){.main[view=totpGenerator] .howItWorks [data-cols="4"]{--columns:1}}.main[view=totpGenerator] .howItWorks .container{padding:0}.main[view=totpGenerator] .howItWorks .container h2{text-align:center;width:100%;max-width:982px;margin-inline:auto}.main[view=totpGenerator] .howItWorks .text-content{position:relative;display:flex;flex-direction:column;gap:16px;background-repeat:no-repeat;background-position:top 40px var(--inline-start) 40px;border-radius:8px}@media (max-width:768px){.main[view=totpGenerator] .howItWorks .text-content{background-position-x:center;background-position-y:16px}}.main[view=totpGenerator] .howItWorks .text-content img{width:100%;height:auto}@media (max-width:768px){.main[view=totpGenerator] .howItWorks .text-content h3{text-align:center;font-weight:500}}@media (max-width:768px){.main[view=totpGenerator] .howItWorks .text-content p{text-align:center}}.main[view=totpGenerator] .officeManagement h2{width:1000px;max-width:100%;margin:0 auto;text-align:center}.main[view=totpGenerator] .officeManagement .content{align-items:center}@media (max-width:991px){.main[view=totpGenerator] .officeManagement .content{grid-template-columns:1fr}}.main[view=totpGenerator] .officeManagement .text-content{display:flex;flex-flow:column nowrap;justify-content:center;align-items:flex-start;gap:16px;width:592px;max-width:100%}@media (max-width:991px){.main[view=totpGenerator] .officeManagement .text-content{width:100%}}.main[view=totpGenerator] .officeManagement .text-content ul{display:flex;flex-flow:column nowrap;justify-content:center;align-items:flex-start;gap:16px}.main[view=totpGenerator] .officeManagement .text-content .actions{margin-top:40px}.main[view=totpGenerator] .officeManagement .image-content{display:flex;flex-flow:column nowrap;justify-content:center;align-items:center;position:relative;padding:24px;background:rgba(40,82,144,.5);border-radius:16px}@media (max-width:991px){.main[view=totpGenerator] .officeManagement .image-content{width:fit-content;order:2}}.main[view=totpGenerator] .officeManagement .image-content img{border-radius:8px}