body{ width: 100%; height: 100vh; margin:0px; padding:0px; overflow-x: hidden; background: #0c0c18 !important; } *{ list-style: none; box-sizing: border-box; } .container{ display: flex; align-items: center; justify-content: center; flex-wrap: wrap; } .container .card{ width:400px; height:350px; margin: 50px auto !important; background: #131320 !important; color:#fff; border:none; outline:none; box-shadow: 0px 0px 4px #000; display: flex; align-items: center; justify-content: center; flex-direction: column; } .container .v-loc{ width: 500px; display: grid; grid-template-columns: 1fr; grid-template-areas: "location" "geo" ; } .container .v-loc .location{ width:100%; display:flex; flex-wrap:wrap; grid-area: location; flex-wrap:wrap; } .container .v-loc .icon{ color:#ffff00; font-size:30px; padding:5px; float:left; } .container .v-loc .location .box{ width:245px; padding:15px 45px; background: #131320 !important; color:#fff; border:none; outline:none; box-shadow: 0px 0px 4px #000; margin-right:2px; border-radius: 2px; display:flex; text-align: start; } .container .v-loc .location .box h5{ padding:8px; font-size:28px; } .container .v-loc .geo{ margin:10px auto; display:flex; flex-wrap:wrap; grid-area: geo; background: #131320 !important; color:#fff; border:none; outline:none; box-shadow: 0px 0px 4px #000; width:100%; padding:12px; } .container .v-loc .geo .box{ display:flex; flex-wrap:wrap; padding:12px; } .container .v-loc .geo .box .box-1{ width:195px; padding:10px 45px; margin:5px; } .container .v-loc .geo .box .box-1 i{ padding:12px; } .container .v-loc .geo .ip{ display:flex; align-items:center; justify-content:center; flex-direction: column; width:100%; text-align: center; } .loader-cont{ display:flex; flex-direction:column; align-items:center; justify-content:center; width:100%; height:100vh; position:fixed; background:#000000e3; top:0px; left:0px; /* display:none; */ } .loader-cont .icon{ font-size:55px; color:#ffff00; animation: spin linear infinite; }