*{margin:0;padding:0;border:none;outline:none;font-size:16px;font-weight:540;font-weight:normal;text-decoration:none;box-sizing:border-box;background:transparent;font-family:"Poppins",Arial,Helvetica,sans-serif}a,button{cursor:pointer}body{background:linear-gradient(45deg,rgba(255,0,0,.150),rgba(0,0,255,.150))}header{height:60px;display:flex;margin-bottom:20px;align-items:center;justify-content:center;background:linear-gradient(45deg,red,blue);& nav{padding:10px;display:flex;align-items:center;gap:calc(5px + 2vw);justify-content:space-between;& a{color:#fff;font-weight:bold;font-size:clamp(16px,2vw,22px)}& button{width:40px;height:40px;line-height:40px;border-radius:8px;background:rgba(255,255,255,.3);& i{color:#fff;font-size:20px;margin-bottom:-4px}}}}main{width:100%;display:flex;margin:30px 0;position:relative;align-items:center;flex-direction:column;padding:calc(20px + 1vw) calc(10px + 1vw);&>h1{width:90%;max-width:650px;color:#38393e;line-height:1.2;font-weight:bold;text-align:center;margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid #eee;font-size:clamp(20px,calc(20px + .5vw),30px)}&>p{width:95%;max-width:650px;font-size:15px;line-height:1.4;color:#515359;text-align:center;margin-bottom:30px}}footer{left:0;width:100%;margin-top:20px;position:relative;background:#23242a;& .wrapper{width:96%;margin:auto;display:flex;max-width:1000px;padding:30px 10px;align-items:center;flex-direction:column;justify-content:space-between;& p{color:#85878f;font-size:14px;text-align:center;& a{color:#c5c8d2;text-decoration:underline}}& ul{gap:1px;width:80%;display:flex;flex-wrap:wrap;list-style:none;align-items:center;margin-bottom:10px;padding-bottom:10px;justify-content:center;border-bottom:1px solid #44464f;& li a{display:block;font-size:13px;color:#85878f;padding:4px 6px;width:fit-content;border-radius:50px;transition:background .2s,color .2s;&:hover{color:#d4d7df;background:#3b3d46}}}}}@media (min-width:48rem){footer{& .wrapper{padding:10px;flex-direction:row-reverse;& p{text-align:left;margin-bottom:0;padding-bottom:0;border-bottom:none}& ul{margin-bottom:0;padding-bottom:0;border-bottom:none;width:fit-content;justify-content:flex-end}}}}.form{width:100%;display:flex;max-width:800px;align-items:center;flex-direction:column;justify-content:center;& .wrapper{width:100%;padding:2px;display:flex;align-items:center;justify-content:center;background:linear-gradient(45deg,red,blue);border-radius:50px;& input{width:100%;background:rgb(255,255,255);padding:20px 40px;border-radius:50px 0 0 50px}& .buttons{& button{color:#fff;font-size:11px;padding:20px 10px;border-radius:0 50px 50px 0;&:nth-child(1){display:none;background:red;border-radius:0 50px 50px 0}&:nth-child(2){display:flex;background:blue;border-radius:0 50px 50px 0}&:hover{filter:brightness(.8)}& i{margin-right:4px;font-size:15px}}}}&>button{width:100%;color:#fff;margin:auto;font-size:15px;max-width:400px;font-weight:bold;margin-block:20px;padding:20px 20px;border-radius:50px;transition:background .3s;background:linear-gradient(45deg,red,blue);& i{margin-right:10px}&:hover{background:#232326}}}.results{}.results{gap:20px;width:100%;display:flex;max-width:800px;align-items:center;flex-direction:column;justify-content:center;&>h2{font-weight:bold;text-align:center;font-size:clamp(18px,calc(20px + .5vw),22px)}& .wrapper{gap:20px;width:100%;display:flex;align-items:center;flex-direction:column;justify-content:center;& .zip-saver{gap:30px;display:flex;margin-top:20px;width:fit-content;background:#fff;padding-right:12px;border-radius:50px;align-items:center;align-self:flex-start;justify-content:space-between;& button{padding:15px 10px;color:#fff;font-size:15px;min-width:130px;font-weight:bold;background:#00b100;border-radius:0 50px 50px 0;& i{margin-right:5px}}& ul{width:95%;display:flex;max-width:230px;align-items:center;justify-content:space-between;list-style:none;gap:clamp(5px,2vw,15px);& li{text-align:center;& span{font-size:14px}& input:checked~span{color:#009600}}}}& .thumb-boxes{width:100%;display:grid;margin-top:10px;align-items:center;flex-direction:column;gap:clamp(20px,calc(20px + 1vw),30px);grid-template-columns:repeat(auto-fit,minmax(250px,1fr));& .box{width:100%;background:#fff;border-radius:20px 20px 4px 4px;& img{width:100%;aspect-ratio:16/9;border-radius:20px 20px 0 0}& .footer{display:flex;padding:10px 20px;align-items:center;justify-content:space-between;& h3{font-size:16px;font-weight:bold}& span{font-size:13px}}&>span{display:flex;align-items:center;border-block:1px solid #eee;justify-content:space-between;& button{font-size:12px;flex-basis:100%;padding:10px 4px;border-right:1px solid #eee;& i{font-size:12px}&:first-child{border-left:2px solid #eee}&:last-child{color:#fff;min-width:140px;font-size:14px;padding:10px 4px;font-weight:bold;background:#00b100;& i{font-size:14px}}}}}}}}.howtouse{width:90%;margin:auto;max-width:800px;margin:30px auto;& h2{width:100%;color:#38393e;line-height:1.2;font-weight:bold;text-align:center;margin-bottom:10px;padding-bottom:10px;font-size:clamp(20px,calc(19px + .5vw),24px)}& .wrapper{display:grid;align-items:center;flex-direction:column;gap:clamp(20px,calc(20px + 1vw),50px);grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}& .box{gap:8px;width:100%;display:flex;align-items:center;.number{display:flex;color:#fff;font-size:40px;min-width:60px;max-width:60px;min-height:60px;max-height:60px;font-weight:bold;margin-right:10px;align-items:center;border-radius:50px;justify-content:center}&:nth-child(1) .number{background:red}&:nth-child(2) .number{background:#00b100}&:nth-child(3) .number{background:blue}&>span:last-child{& h3{font-size:16px;font-weight:bold;margin-bottom:10px}& p{font-size:14px}}}}@media (min-width:30rem){.howtouse{& .box{padding:20px;background:#fff;text-align:center;flex-direction:column;justify-content:center;border-radius:100% 100% 0 0;.number{margin-bottom:5px}}}}.features{width:90%;margin:auto;max-width:800px;margin:30px auto;& h2{width:100%;color:#38393e;line-height:1.2;font-weight:bold;text-align:center;margin-bottom:10px;padding-bottom:10px;font-size:clamp(20px,calc(19px + .5vw),24px)}& .wrapper{display:grid;align-items:center;flex-direction:column;gap:clamp(20px,calc(20px + 1vw),50px);grid-template-columns:repeat(auto-fit,minmax(240px,1fr));& .box{display:flex;background:#fff;text-align:center;border-radius:20px;flex-direction:column;& i{width:100%;display:flex;height:140px;font-size:80px;align-items:center;justify-content:center;border-radius:20px 20px 0 0}&:nth-child(1) i{background:#ff000018;color:red;border-bottom:2px dashed red}&:nth-child(2) i{background:#00800018;color:green;border-bottom:2px dashed green}&:nth-child(3) i{background:#0000ff18;color:blue;border-bottom:2px dashed blue}&:nth-child(4) i{background:#ffbf0018;color:#ffbf00;border-bottom:2px dashed #ffbf00}&:nth-child(5) i{background:#00cbd518;color:#00cbd5;border-bottom:2px dashed #00cbd5}&:nth-child(6) i{background:#ff620018;color:#ff6200;border-bottom:2px dashed #ff6200}& h3{width:90%;margin:10px;font-size:19px;font-weight:bold;text-transform:capitalize}& p{width:90%;margin:auto;font-size:15px;line-height:1.4;text-align:center;margin-bottom:15px}}}}footer{left:0;width:100%;margin-top:20px;position:relative;background:#23242a;& .wrapper{width:96%;margin:auto;display:flex;max-width:1000px;padding:30px 10px;align-items:center;flex-direction:column;justify-content:space-between;& p{color:#85878f;font-size:14px;text-align:center;& a{color:#c5c8d2;text-decoration:underline}}& ul{gap:1px;width:80%;display:flex;flex-wrap:wrap;list-style:none;align-items:center;margin-bottom:10px;padding-bottom:10px;justify-content:center;border-bottom:1px solid #44464f;& li a{display:block;font-size:13px;color:#85878f;padding:4px 6px;width:fit-content;border-radius:50px;transition:background .2s,color .2s;&:hover{color:#d4d7df;background:#3b3d46}}}}}
.fa-spinner {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}