@property --angle{syntax: "<angle>"; initial-value: 0deg; inherits: false;}*{--service-box-width: 450px;--service-box-height: 180px}.service-item-container{position:relative;width:var(--service-box-width);height:var(--service-box-height);z-index:0;display:flex;justify-content:center;align-items:center;transform:scale(1);transition:transform .5s linear;background-color:var(--gray061);border-radius:10px}.service-item-container .content-con{width:calc(var(--service-box-width) - 5px);height:calc(var(--service-box-height) - 5px);border-radius:10px;background-color:var(--dark-gray);position:relative;padding:10px;transition:background-color .3s linear}.service-item-container:after,.service-item-container:before{content:"";position:absolute;top:0;left:0;width:var(--service-box-width);height:var(--service-box-height);border-radius:10px;background-image:conic-gradient(from var(--angle),transparent 100%,var(--primary-green));opacity:0;z-index:-1;transition:opacity .7s ease-out}.service-item-container .content-con .count{text-align:end;margin:0;opacity:.7;transition:opacity .7s ease-out;font-family:Bungee Outline;font-size:26px;letter-spacing:3px;color:var(--white)}.service-item-container .content-con .title{text-align:center;font-family:Protest Riot;font-size:32px;opacity:.6;transition:opacity .7s ease-out;margin-top:20px;color:var(--white)}.service-item-container .content-con .image{width:calc(var(--service-box-height) - 50px);height:auto;position:absolute;top:0;right:0;transform:translate(-20%,30%) rotate(30deg);opacity:.3}.service-item-container:hover{transform:scale(1.07)}.service-item-container:hover:after,.service-item-container:hover:before{opacity:1;background-image:conic-gradient(from var(--angle),transparent 70%,var(--primary-green));animation:spin 5s linear infinite}.service-item-container:before{filter:blur(.5rem)}.service-item-container:hover .content-con{background-color:var(--gray07)}.service-item-container:hover .content-con .count{color:var(--primary-green);opacity:1}.service-item-container:hover .content-con .title{opacity:1}@keyframes spin{0%{--angle: -0deg}to{--angle: 360deg}}@media screen and (max-width: 1200px){*{--service-box-width: 380px;--service-box-height: 180px}}@media screen and (max-width: 1000px){*{--service-box-width: 320px;--service-box-height: 160px}.service-item-container .content-con .count{font-size:20px;letter-spacing:3px}.service-item-container .content-con .title{font-size:26px;margin-top:20px}}@media screen and (max-width: 800px){*{--service-box-width: 450px;--service-box-height: 180px}.service-item-container .content-con .count{font-size:32px;letter-spacing:3px}.service-item-container .content-con .title{font-size:32px;margin-top:20px}}@media screen and (max-width: 550px){*{--service-box-width: 380px;--service-box-height: 160px}.service-item-container .content-con .count{font-size:28px;letter-spacing:5px;opacity:1}.service-item-container .content-con .title{font-size:26px;letter-spacing:4px;margin-top:20px;opacity:1}}@media screen and (max-width: 400px){*{--service-box-width: 300px;--service-box-height: 160px}.service-item-container .content-con .title{margin-top:10px}}@media screen and (max-width: 300px){*{--service-box-width: 250px;--service-box-height: 160px}.service-item-container .content-con .title{margin-top:6px}}.bubble{position:absolute;bottom:0;background-color:#8d8d8d8c;filter:blur(3px);border-radius:50%;animation:floatUp ease-in infinite}.service-item-container:hover .bubble{background-color:#2ba63f8c}@keyframes floatUp{0%{transform:translateY(0);opacity:1}to{transform:translateY(-160px);opacity:0}}[lang=ar] .service-item-container .content-con .count,[lang=ar] .service-item-container .content-con .title{font-family:Cairo}[lang=ur] .service-item-container .content-con .count,[lang=ur] .service-item-container .content-con .title{font-family:Noto Nastaliq Urdu}