@import url(https://fonts.googleapis.com/css2?family=Inter:wght@200..800&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Inter:wght@200..800&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Inter:wght@200..800&display=swap);
.hero{align-items:center;color:#fff;display:flex;flex-direction:row;position:relative}

.hero::before{background-color:#1a2226;content:"";display:block;height:100%;left:0;position:absolute;top:0;width:100%;z-index:-1}

[dir="rtl"] .hero::before{left:auto;right:0}

.hero::after{background:radial-gradient(farthest-corner at 100% 100%, #3DF2B6 0%, rgba(0, 0, 0, 0) 100%);bottom:0;content:"";display:block;filter:blur(100px);height:724px;opacity:.6;position:absolute;right:0;width:50%;z-index:-1}

[dir="rtl"] .hero::after{right:auto;left:0}

.hero .container{overflow-x:hidden;padding:142px 60px;position:relative}

.hero .container>div{flex:0 0 50%;padding:0 8px}

.hero h1{font-family:inter,helvetica,"Helvetica Neue",sans-serif;font-size:56px;font-weight:800;line-height:120%}

@media(width <= 768px){
.hero h1{font-size:30px}}

.hero ul{list-style:disc;padding-left:24px}

[dir="rtl"] .hero ul{padding-left:0;padding-right:24px}

.hero ul li{text-wrap:pretty}

.hero h1,.hero p,.hero ul{margin-bottom:30px}

.hero .install-buttons-holder{align-items:center;display:flex;flex-direction:row;gap:30px;justify-content:center;margin-bottom:30px}

.hero .install-buttons-holder .install-mobile-button{height:55px;width:168px}

.hero .install-buttons-holder .ms-button{box-shadow:2px 4px 6px 0 rgba(0,35,128,.45);font-size:14px;padding:24px 20px;white-space:nowrap;width:400px}

[dir="rtl"] .hero .install-buttons-holder .ms-button{box-shadow:-2px 4px 6px 0 rgba(0,35,128,.45)}

.hero .hero-image img{width:635px}

.hero .hero-badges-container{display:flex;gap:30px;margin-top:30px}

.hero .hero-badge{height:70px}

.hero.clipped-img .container .hero-image.top,.hero.mini .container .hero-image.top{background-position-y:top}

.hero.clipped-img .container .hero-image.bottom,.hero.mini .container .hero-image.bottom{background-position-y:bottom}

.hero.clipped-img .container .hero-image.left,.hero.mini .container .hero-image.left{background-position-x:left}

[dir="rtl"] .hero.clipped-img .container .hero-image.left,[dir="rtl"] .hero.mini .container .hero-image.left{background-position-x:right}

.hero.clipped-img .container .hero-image.right,.hero.mini .container .hero-image.right{background-position-x:right}

[dir="rtl"] .hero.clipped-img .container .hero-image.right,[dir="rtl"] .hero.mini .container .hero-image.right{background-position-x:left}

.hero.clipped-img .container .hero-image{background-position:center;background-repeat:no-repeat;background-size:cover;clip-path:url("#clip-hero");height:100%;left:calc(50% + 12px);position:absolute;right:0;top:0}

[dir="rtl"] .hero.clipped-img .container .hero-image{right:calc(50% + 12px);left:0}

.hero.mini .container{padding:120px}

.hero.mini .container .hero-image{background-position:center;background-repeat:no-repeat;background-size:cover;clip-path:url("#clip-hero-mini");height:100%;left:calc(50% + 12px);position:absolute;right:0;top:0}

[dir="rtl"] .hero.mini .container .hero-image{right:calc(50% + 12px);left:0}

.hero.mini .container .hero-text h1{font-size:40px}

.hero.mini .install-buttons-holder .ms-button{font-size:10px;padding:12px 20px}

.hero.mini-light{background-color:#ececf9;color:#010921;padding:112px 120px}

.hero.mini-light .hero-text{margin:0 auto;text-align:center}

.hero.mini-light .hero-text .install-buttons-holder{justify-content:center}

.hero.mini-light .hero-badges-container{justify-content:center}

@media screen and (width <= 992px){
.hero{flex-direction:column-reverse}

.hero .container{padding:60px 30px}

.hero .container>div{max-width:100%}

.hero .container .hero-text{align-items:center;display:flex;flex-direction:column}

.hero .install-buttons-holder{margin-bottom:30px;max-width:100%}

.hero .install-buttons-holder .ms-button{font-size:10px}

.hero .hero-image img{max-width:100%;width:368px}

.hero .hero-badges-container{display:grid;gap:24px;grid-template-columns:repeat(2, 1fr)}

.hero.clipped-img .container{padding-bottom:440px}

.hero.clipped-img .container .hero-image{bottom:0;clip-path:url("#clip-hero-mobile");height:420px;left:0;top:auto;width:auto}

[dir="rtl"] .hero.clipped-img .container .hero-image{left:auto;right:0}

.hero.mini .container{padding:60px 30px 440px}

.hero.mini .container .hero-image{background-position:top;bottom:0;clip-path:url("#clip-hero-mini-mobile");height:420px;left:0;top:auto;width:auto}

[dir="rtl"] .hero.mini .container .hero-image{left:auto;right:0}

.hero.mini-light{padding:60px 30px}}

.ratings{align-items:center;display:flex;flex-direction:row;gap:48px}

.ratings>div{text-align:center}

.ratings h5{font-family:inter,helvetica,"Helvetica Neue",sans-serif;font-size:14px;font-weight:400;line-height:150%}

@media(width <= 768px){
.ratings h5{font-size:12px}}

.ratings h5 span{display:block;font-size:17px;line-height:120%}

.ratings .star-holder img{height:20px}

.ratings .store-holder h5{font-size:12px;font-weight:700;line-height:18px}

.ratings .store-holder h5 span.category{font-size:inherit;font-weight:600;line-height:inherit}

.ratings .store-holder h5 span.store{font-size:8px;font-weight:400;line-height:inherit}

.ratings.full{flex-wrap:wrap;gap:30px 58px;justify-content:center;padding:12px 90px}

.ratings.full h4{font-family:inter,helvetica,"Helvetica Neue",sans-serif;font-size:40px;font-weight:700;line-height:125%;font-weight:400;text-align:center;width:100%}

@media(width <= 768px){
.ratings.full h4{font-size:24px}}

@media screen and (max-width: 992px){
.ratings .star-holder img{height:18px}}

@media screen and (max-width: 768px){
.ratings{gap:30px}

.ratings h5 span{font-family:inter,helvetica,"Helvetica Neue",sans-serif;font-size:14px;font-weight:400;line-height:150%;font-weight:700;padding-top:6px}}

@media screen and (max-width: 768px)and (width <= 768px){
.ratings h5 span{font-size:12px}}

@media screen and (max-width: 768px){
.ratings .star-holder img{height:12px}}

.privacy-and-security .hero .container{justify-content:center}

.privacy-and-security .hero .container .hero-text{align-items:center;display:flex;flex:1 1 100%;flex-direction:column;justify-content:center}

.privacy-and-security .hero .container ul{list-style:none}

.security-logos{display:grid;gap:16px;grid-template-columns:1fr 1fr 1fr 1fr;padding:40px;place-items:center}

.security-logos .item{align-items:center;display:flex;flex-direction:column;gap:8px}

.security-logos .item h2{font-family:inter,helvetica,"Helvetica Neue",sans-serif;font-size:20px;font-weight:600;line-height:24px}

@media(width <= 768px){
.security-logos .item h2{font-size:16px}}

.security-logos .item p{font-family:inter,helvetica,"Helvetica Neue",sans-serif;font-size:16px;font-weight:400;line-height:150%;font-size:12px;text-align:center}

@media(width <= 768px){
.security-logos .item p{font-size:14px}}

.security-logos .item img{height:40px;width:40px}

.security-logos .item.gdpr svg{color:#6964ce}

.security-logos .item.iso27001 img{height:120px;width:120px}

.faq{padding:40px}

.faq .card{background-color:#fff;border-radius:8px;box-shadow:0 0 16px rgba(0,0,0,.08);color:#1a2226;display:flex;flex-direction:column;gap:16px;margin:20px 0;padding:32px}

@media screen and (width <= 992px){
.security-logos{grid-template-columns:1fr;justify-items:center;padding:40px 20px}

.colored-bg{background-image:url("//s3-eu-west-1.amazonaws.com/io.mailtrack.assets/backend/eb794135/bundles/mailtrackfrontend/img/team/background-mobile.jpg")}}