@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800&display=swap');

* {margin: 0px; padding: 0px; box-sizing: border-box;}
body {font-family: 'Open Sans', sans-serif; font-size: 16px; color: #454545; background: #fbfbfb;}

.container {display: block; width: 90%; margin: 0 auto; /* max-width: 1220px; */}
.container::after {content: ''; display: block; clear: both;}

header.fixed {position: fixed; width: 100%; background: #fff; z-index: 1;}
header > .container {padding: 12px 0; display: flex; align-items: center;}
header .logo a {color: inherit; text-decoration: none;}
header .logo b {display: inline-block; vertical-align: middle; margin-left: 8px; color: #c4cedf; font-weight: 500; margin-top: 8px;}
header .logo img { height: 24px; /* optional */ outline: 0; vertical-align: middle;}
header nav { margin-left: auto; /* pushes it to the right */ display: flex; align-items: center; gap: 15px;}
header nav a {text-decoration: none; color: inherit;}
header nav img { height: 25px; /* optional styling */}
header nav ul {display: flex; flex-wrap: nowrap; list-style: none; align-items: center; gap: 22px;}
/* header nav ul li {margin-left: 20px;} */
header nav ul li i.fa-regular {display: block; width: 32px; line-height: 28px; font-size: 16px; border-radius: 50%; border: 2px solid #000; text-align: center;}
header .search { margin-left: auto; display: flex; align-items: center; gap: 15px; width: 32vw; position: relative;}
header .search input[type=text] {display: block; width: 100%; height: 40px; background: #f3f3f3; padding: 0 20px 0 50px; border-radius: 20px; border: 0; font-family: 'Open Sans', sans-serif; font-weight: 500;}
header .search::before {content: ''; display: block; position: absolute; top: 0; left: 0; width: 60px; height: 40px; background: url(../images/SearchIcon.png) center no-repeat; background-size: auto 50%;}

header .categories {box-shadow: 0 0 4px rgba(0,0,0,0.1);}
header .categories .container {}
header .categories ul {
    display: flex;
    align-items: center;
    justify-content: center;   /* centers li horizontally */
    list-style: none;
    flex-wrap: nowrap;
    width: 100%;
}
header .categories ul li {display: inline-block;}
header .categories ul li a {display: block; padding: 12px 12px; color: inherit; text-decoration: none; font-size: 15px; font-weight: 500;}
header .categories ul li a:hover {background: #f3f3f3;}
header .usernav {cursor: pointer;}

.midWrap {min-height: 60vh; position: relative;}
.banner {display: block; background: rgba(0,0,0,0.02); width: 100%; overflow: hidden; padding: 32px 0; }
.banner .bannerSlider {display: block; margin: 0 auto; /*width: 800px;*/ min-height: 200px;}
.banner img {width: 100%;}

.lnks {padding: 8px 0;}
.lnks a {display: inline-block; margin: 0 4px; color: inherit; text-decoration: none;}
.lnks a:hover {text-decoration: underline;}

.hide {display: none;}
.popW {display: none; width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: rgba(0,0,0.8); z-index: 3;}
.popW .popInW {display: block; width: 96%; max-width: 800px; height: 100%; max-height: 80%; position: absolute; top: 50%; left: 50%; background: rgba(0,0,0.8); transform: translate(-50%, -50%); background: #fff; padding: 20px; overflow: auto;}
.popW .popInW h3 {font-size: 18px; margin-bottom: 12px;}
.popW .popInW p {font-size: 14px; margin-bottom: 12px;}
.popW .popInW .popClose {line-height: 32px; width: 32px; background: #454545; color: #fff; font-size: 18px; text-align: center; position: absolute; top: 0; right: 0; cursor: pointer;}
.popW .popInW .popClose::before {content: 'X';}

footer {display: block; padding: 32px 0; font-size: 10px; color: #666; text-transform: uppercase; font-weight: 600; text-align: center;
    box-shadow: inset 0px 5px 10px 0px #b9b9b9;
    background-image: -webkit-radial-gradient(50% 50%, circle cover, white 30%, #dbdcdf 120%, #dbdcdf);
    background-image: radial-gradient(circle at 50% 50%, white 30%, #dbdcdf 120%, #dbdcdf);
}
footer .container {display: flex; flex-wrap: nowrap; justify-content: space-between;}
footer .container h4 {font-size: 24px; margin: 0 0 20px; color: #999999; text-transform: none;}
footer .container .gp img {width: 200px;}
footer .container .copy {width: 50%; text-align: left; font-size: 20px;}
footer .container .gp {width: 50%; text-align: right;}

header .menuBtn {display: inline-block; width: 28px; vertical-align: top; cursor: pointer; margin-right: 20px; font-size: 28px; color: #000;}
header .menuBtn:hover {color: #c7a80d;}
/* header .menuBtn span {display: block; width: 100%; height: 2px; background: #454545; margin: 9px 0; transition: all ease-in-out .2s;}
header .menuBtn.close span {opacity: 0;}
header .menuBtn::before, header .menuBtn::after {content: ''; display: block; width: 100%; height: 2px; background: #454545; transition: all ease-in-out .2s; transform-origin: 0;}
header .menuBtn.close::before {transform: rotate(43deg);}
header .menuBtn.close::after {transform: rotate(-43deg);} */

.mainNav.open {transform: rotateY(0deg);}

header nav ul .usernav {position: relative;}
header nav ul .usernav .dd {position: absolute; top: calc(100% + 8px); right: -20px; /* left: 50%; transform: translateX(-50%); */ width: 200px; padding: 12px 0; box-shadow: 0 0 4px rgba(0,0,0,0.1); background: #fff; z-index: 2; border-radius: 12px; display: none;}
header nav ul .usernav.active .dd {display: block;}
header nav ul .usernav .dd ul {overflow: hidden; display: block;}
header nav ul .usernav .dd::before {content: ''; display: block; position: absolute; top: -5px; right: 30px;
  width: 0; 
  height: 0; 
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  
  border-bottom: 5px solid black;}
header nav ul .usernav ul li {display: block;}
header nav ul .usernav ul li a {display: block; padding: 8px 12px;}
header nav ul .usernav ul li a:hover {background: #f3f3f3;}

#freeWall {margin-bottom: 40px; position: relative;}
#freeWall .item {border-radius: 12px; overflow: hidden; position: absolute;}
#freeWall .item .uploadedBy {position: absolute; bottom: 0; left: 0; width: 100%; padding: 0 10px 10px; display: flex; flex-wrap: nowrap; gap: 10px; color: #fff; align-items: center; justify-content: start;}
#freeWall .item .uploadedBy .uicon {width: 40px; height: 40px; border-radius: 50%; overflow: hidden; position: relative;}
#freeWall .item .uploadedBy .uicon img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
#freeWall .item .uploadedBy .uname {text-shadow: 0 0 4px rgba(0,0,0);}

#freeWall .item .vtLnks {position: absolute; display: none; bottom: 64px; right: 10px; text-align: center; width: 42px; font-size: 20px;}
#freeWall .item .uliked {display: block; width: 100%; color: #fff; border-radius: 50%; cursor: pointer; font-size: 14px;}
#freeWall .item .uliked::before {content: '\f004'; font-family: 'Font Awesome 6 Free'; font-weight: 400; display: block; font-size: 20px;}
#freeWall .item .uliked u {text-decoration: none;}

/* #freeWall .item .uliked.active {background: rgba(255,255,255,.6);} */
#freeWall .item .uliked.active::before {font-weight: 900; /* color: green; */}
#freeWall .item .uliked i {line-height: 42px;}
#freeWall .item .wrap {display: block;}
#freeWall .item .wrap a {display: block;}

@keyframes runningCar {
  0%   {left: -98px;}
  100% {left: 100%;}
}
.loading {display: block; width: 100%; height: 100%; background: rgba(255,255,255,.8); position: fixed; top: 0; left: 0; z-index: 3;}
.loading .car {display: block; height: 1px; width: 100%; position: absolute; left: 0; bottom: 24px; border-bottom: 2px dashed #454545;}
.loading .car::before {content: ''; display: block; width: 98px; height: 37px; background: url(../images/Car.gif) center no-repeat; position: absolute; bottom: 0; animation: runningCar 8s linear infinite;}


#freeWall .item {width: 200px; overflow: hidden;}
#freeWall .item img {width: 100%;}
#freeWall .item .vimg {border-radius: 12px;}


@media only screen and (max-width: 768px) {
    #freeWall .item {width: 300px;}
}

/* Video Popup Styles */
.video-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.video-popup-container video {
    width: calc((90vh - 60px) * 9 / 16);
    height: calc(90vh - 60px);
    display: block;
}
.video-popup-container {
    width: calc((90vh - 60px) * 9 / 16);
    height: calc(90vh); 
    padding-bottom: 60px;
    position: relative;
    display: inline-block;
    background-color: #000;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    animation: popupSlideIn 0.3s ease-out;
}

.video-popup-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 40px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 50%;
    font-size: 28px;
    color: #000;
    cursor: pointer;
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.3s;
}

.video-popup-close:hover {
    background-color: rgba(255, 255, 255, 1);
    transform: scale(1.1);
}

@keyframes popupSlideIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@media only screen and (max-width: 768px) {
    
    .video-popup-close {
        width: 35px;
        height: 35px;
        font-size: 24px;
    }
}
.video-popup-overlay .vPrevNext {position: fixed; top: 50%; right: 10px; transform: translateY(-50%); z-index: 10;}
.video-popup-overlay .vPrevNext button {display: block; width: 40px; height: 40px; background: #fff; color: #000; border-radius: 50%; border: 0; cursor: pointer; margin: 15px 0;}
.video-popup-overlay .vPrevNext button.hide {visibility: hidden; opacity: 0;}

.midWrap #gmap {width: 100%; height: calc(100vh - 280px);}

.soslinks {position: relative; bottom: 0; left: 0; width: 100%; padding: 20px; background: #fff; margin-top: -20px; border-top-left-radius: 20px; border-top-right-radius: 20px; text-align: center;}
.soslinks .sos4lnks .item {display: inline-block; padding: 6px; box-shadow: 0 0 4px rgba(0,0,0,0.1); border-radius: 15px; text-align: center; margin: 5px; min-width: 190px;}
.soslinks .medEmer .item {display: flex; padding: 6px; box-shadow: 0 0 4px rgba(0,0,0,0.1); border-radius: 15px; text-align: center; margin: 5px auto; width: 395px; align-items: center; gap: 10px; text-align: center;}
.soslinks .medEmer .item .txt {text-align: left;}
.soslinks .medEmer .item .icon {margin-left: 65px;}
.soslinks .icon img {height: 60px;}
.soslinks h4 {font-size: 16px;}
.soslinks p {font-size: 15px;}
.soslinks a {color: inherit; text-decoration: none; display: block; width: 100%; padding: 12px; border: 1px dashed #454545; border-radius: 12px; text-align: center;}
.soslinks .medEmer a {display: flex; gap: 10px;}

.sosForm .form-group label {font-size: 15px; font-weight: 500;}

.soslinks .sos4lnks .item:nth-child(1) a {border-color: #ffd44d;}
.soslinks .sos4lnks .item:nth-child(2) a {border-color: #ed1b24;}
.soslinks .sos4lnks .item:nth-child(3) a {border-color: #ec6f1b;}
.soslinks .sos4lnks .item:nth-child(4) a {border-color: #242aaf;}
.soslinks .medEmer a {border-color: #00aed8;}

.editSos {padding: 20px 0; max-width: 300px; margin: 0 auto;}
.editSos a {border: 0; background: #ffd634; color: #000; border-radius: 0;}

/* for left side yellow menu */
.aboutMenu {position: fixed; top: 0; left: 0; width: 100%; max-width: 320px; background: #ffd832; color: #000; height: 100%; z-index: 100; text-align: center; overflow: auto; transition: all ease-in-out .2s; transform: translateX(-100%);}
.aboutMenu.show {transform: translateX(0);}
.aboutMenu .close {text-align: left; padding: 20px;}
.aboutMenu .close .closeBtn {font-size: 28px; cursor: pointer;}
.aboutMenu .nav {padding: 0 20px;}
.aboutMenu .nav ul {display: block;}
.aboutMenu .nav ul li {display: block;}
.aboutMenu .nav ul li a {display: block; padding: 8px 12px; color: inherit; text-decoration: none;}
.aboutMenu .socialLnks {padding: 40px 20px 80px;}
.aboutMenu .socialLnks a {display: inline-block; margin: 0 6px; background: #000; color: #ffd832; text-decoration: none; width: 40px; height: 40px; border-radius: 50%; text-align: center;}
.aboutMenu .socialLnks a i {line-height: 40px; font-size: 20px;}
.aboutMenu .partners {/* position: fixed; bottom: 0; left: 0; width: 100%; max-width: 320px; */ padding: 20px 0; border-top: 1px solid #d7b941;}
.aboutMenu .partners .partnersList {padding-top: 20px; display: flex; flex-wrap: nowrap; gap: 10px;}
.aboutMenu .partners .partnersList span {width: 50%; min-height: 20px;}
.aboutMenu .partners .partnersList span img {width: 100px;}
.aboutMenu .partners .partnersList span:nth-child(2) {border-left: 1px solid #d7b941;}

header .search .catbtn {position: absolute; top: 0; right: 0; width: 60px; height: 40px; text-align: center; cursor: pointer;}
header .search .catbtn i {font-size: 18px; line-height: 40px; transform: rotate(90deg);}
header .search .catbtn:hover i {color: #c7a80d;}

header .search .catListing {position: absolute; top: 100%; left: 0; width: 100%; z-index: 100; padding: 20px; background: #fff; box-shadow: 0 0 4px rgba(0,0,0,0.1); border-radius: 12px; display: none;}
header .search .catListing.show {display: block;}
header .search .catListing span {display: block;}
header .search .catListing span a {display: block; padding: 8px 12px; color: inherit; text-decoration: none;}
header .search .catListing span a:hover {background: #f3f3f3;}

.video-popup-overlay .uploadedBy {position: absolute; bottom: 0; left: 0; width: 100%; padding: 10px 10px; color: #fff; align-items: center; justify-content: start; background: #000;}
.video-popup-overlay .uploadedBy .uinfo {display: flex; flex-wrap: nowrap; gap: 10px;}
.video-popup-overlay .uploadedBy .uicon {width: 40px; min-width: 40px; height: 40px; border-radius: 50%; overflow: hidden; position: relative;}
.video-popup-overlay .uploadedBy .uicon img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 100%;}
.video-popup-overlay .uploadedBy .namdesc {text-shadow: 0 0 4px rgba(0,0,0); width: 100%;}
.video-popup-overlay .uploadedBy .uname {display: block; font-size: 14px;}
.video-popup-overlay .uploadedBy .uname .city {display: inline-block; background: #fff; color: #000; padding: 2px 6px; border-radius: 20px; font-size: 10px; text-shadow: none;}
.video-popup-overlay .uploadedBy .description {display: block; font-size: 12px; width: calc(100%); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.video-popup-overlay .uploadedBy.show .description {overflow: visible; white-space: wrap;}

.video-popup-overlay .uploadedBy .watchBtn a {display: inline-block; padding: 2px 6px; color: #fff; background: none; border-radius: 12px; text-decoration: none; text-align: center; font-size: 10px; text-shadow: none;}
.video-popup-overlay .uploadedBy .watchBtn {padding-top: 4px; display: block;}
.video-popup-overlay .uploadedBy .watchBtn a.active {background: #ffd634; color: #000;}




.video-popup-container .vtLnks {position: absolute; display: block; bottom: 145px; right: 10px; text-align: center; width: 42px; font-size: 20px;}
.video-popup-container .uliked {display: block; width: 100%; color: #fff; border-radius: 50%; cursor: pointer; font-size: 14px;}
.video-popup-container .uliked::before {content: '\f004'; font-family: 'Font Awesome 6 Free'; font-weight: 400; display: block; font-size: 20px;}
.video-popup-container .uliked u {text-decoration: none;}

/* .video-popup-container .uliked.active {background: rgba(255,255,255,.6);} */
.video-popup-container .uliked.active::before {font-weight: 900; /* color: green; */}
.video-popup-container .uliked i {line-height: 42px;}

header nav ul .sosnav {position: relative; padding: 0 20px; cursor: pointer;}
header nav ul .sosnav .dd {position: absolute; top: calc(100% + 8px); right: -20px; /* left: 50%; transform: translateX(-50%); */ width: 200px; padding: 12px 0; box-shadow: 0 0 4px rgba(0,0,0,0.1); background: #fff; z-index: 2; border-radius: 12px; display: none;}
header nav ul .sosnav.active .dd {display: block;}
header nav ul .sosnav .dd ul {overflow: hidden; display: block;}
header nav ul .sosnav .dd::before {content: ''; display: block; position: absolute; top: -5px; right: 30px;
  width: 0; 
  height: 0; 
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  
  border-bottom: 5px solid black;}
header nav ul .sosnav ul li {display: block;}
header nav ul .sosnav ul li a {display: block; padding: 8px 12px;}
header nav ul .sosnav ul li a:hover {background: #f3f3f3;}

header .backBtn {display: inline-block; width: 28px; vertical-align: top; cursor: pointer; margin-right: 20px; font-size: 18px; color: #000;}
header .backBtn:hover {color: #c7a80d;}

.vehicleInfo h4 {font-size: 18px; margin-bottom: 8px;}
.vehicleInfo .vno {display: block; height: 40px;}

.note {font-size: 14px; margin-bottom: 13px;}
.btn {border: 0; background: #ffd634; color: #000; border-radius: 0; padding: 12px 20px; font-size: 16px; cursor: pointer;}
.sos-form .btn {min-width: 232px;}

.animBtn {
    position: relative;
    overflow: hidden;
}

/* moving shadow layer */
.animBtn::after {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 120%;
    height: 100%;
    background: linear-gradient(
        120deg,
        transparent 0%,
        rgba(255, 255, 255, 0.5) 50%,
        transparent 100%
    );
    animation: sosShadowSweep 2s infinite;
}

/* animation */
@keyframes sosShadowSweep {
    0% {
        left: -120%;
    }
    50% {
        left: 120%;
    }
    100% {
        left: 120%;
    }
}

/* Notifications layout */
.notificationsWrapper {display: block; width: 100%; max-width: 400px; position: fixed; top: 0; right: 0; height: 100vh; overflow: auto; background: #fff; z-index: 5; padding: 32px; box-shadow: 0 0 8px rgba(0, 0, 0, 0.5); transform: translateX(100%); transition: all ease-in-out .2s;}
.notificationsWrapper.show {transform: none;}
.notificationsWrapper .close {display: block; color: #000; position: absolute; top: 0; right: 0; cursor: pointer; padding: 10px;}
.notificationsWrapper .tabs {display: flex; gap: 12px; margin-bottom: 12px;}
.notificationsWrapper .tabs a {width: calc(50% - 6px); text-align: center; color: #000; background: #f3f3f3; display: block; text-decoration: none; padding: 8px 12px; border-radius: 12px;}
.notificationsWrapper .tabs a.active {background: #ffd634;}
.notificationsWrapper .tabsContent .content {display: none;}
.notificationsWrapper .tabsContent .content.active {display: block;}

.notificationsWrapper .content .item {display: flex; gap: 12px; margin-bottom: 12px;}
.notificationsWrapper .content .item .icon {width: 40px; height: 40px; overflow: hidden; border-radius: 50%; position: relative;}
.notificationsWrapper .content .item .icon img {max-width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.notificationsWrapper .content .item .message {width: calc(100% - 40px - 12px);}
.notificationsWrapper .content .item .message .uname {font-size: 13px; color: #000; font-weight: 500;}

.editProfile {max-width: 500px; margin: 40px auto; padding: 40px;}
.editProfile .field {display: block; margin-bottom: 20px; position: relative;}
.editProfile .field .inp {display: block; width: 100%; height: 40px; border: 1px solid #ccc; border-radius: 6px; padding: 10px;}
.editProfile .field textarea.inp {height: 120px;}
.editProfile .field label {display: block; padding: 4px; font-size: 14px; background: #fff; position: absolute; top: -14px; left: 6px;}

.banner .container {position: relative;}
.banner .banlnks {display: flex; position: absolute; width: 100%; height: 100%; top: 0; left: 0;}
.banner .banlnks a {display: block; width: 50%;}

.usersListing {display: block; width: 100%; max-width: 400px; position: fixed; top: 0; right: 0; height: 100vh; overflow: auto; background: #fff; z-index: 5; padding: 32px; box-shadow: 0 0 8px rgba(0, 0, 0, 0.5); transform: translateX(100%); transition: all ease-in-out .2s;}
.usersListing h4 {font-size: 18px; margin-bottom: 12px;}
.usersListing.show {transform: none;}
.usersListing .close {display: block; color: #000; position: absolute; top: 0; right: 0; cursor: pointer; padding: 10px;}

.usersListing .item {display: flex; gap: 12px; margin-bottom: 12px;}
.usersListing .item .icon {width: 40px; height: 40px; overflow: hidden; border-radius: 50%; position: relative;}
.usersListing .item .icon img {max-width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.usersListing .item .uinfo {width: calc(100% - 40px - 80px - 12px);}
.usersListing .item .uinfo .uname {font-size: 13px; color: #000; font-weight: 500;}
.usersListing .item .watchBtn  {/* width: calc(100px - 12px); */}
.usersListing .item .watchBtn a {display: block; width: 100%; color: #000; background: #f3f3f3; font-size: 12px; padding: 8px 12px; border-radius: 12px; text-decoration: none; text-align: center;}
.usersListing .item .watchBtn a.active {background: #ffd634;}

.nContent {padding: 40px 0;}
.nContent h3 {font-size: 22px; margin-bottom: 22px;}
.nContent h4 {font-size: 18px; margin-bottom: 18px;}
.nContent p {font-size: 16px; margin-bottom: 16px;}
.nContent ul {font-size: 16px; margin-bottom: 16px; padding-left: 20px;}

@media only screen and (max-width: 680px) {
    .sosheader .logo {display: none;}
    header.sosheader > .container {display: flex;}
    header.sosheader .search {width: ;}
    header.sosheader nav {width: 60px;}
}