:root {
    --primary-color: #2c3e50;
    --accent-color: #3498db;
    --text-color: #333;
    --light-gray: #f8f9fa;
      --person-image: url('../icons/man.svg');
  }
  * {
      box-sizing: border-box;
    }

html,
body {height: 100%;margin: 0;padding: 0;-webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;color: var(--text-color);background-color: #fff;
      line-height: 1.6;}

/* PORTRAIT ENFORCEMENT - Add this to your CSS */
@media (orientation: landscape) and (max-width: 768px) {
  body::before {
    content: "Please rotate to portrait mode" !important;
    position: fixed !important;
    top: 0; left: 0; width: 100%; height: 100%;
    background: #000 !important; color: white !important;
    display: flex !important; align-items: center !important;
    justify-content: center !important; z-index: 999999 !important;
    font-size: 1.2rem !important; text-align: center !important;
    padding: 20px !important;    
  }
}
#user_denied{
  position: absolute;display: none;
  margin: 0 auto;top: 30%;width: 90%;padding: 20px;left: 5%;right: 5%;background-color: brown;color: #fff;font-size: 20px;min-height: 200px; z-index: 20;
}
#register_address{display: none;}
#accuracy{
  position: absolute;display: block;
    top: 5%;left: 41%;border-radius: 50%;padding: 15px 5px;padding-right: 7px;z-index: 3000;border: 2px solid;height: 60px;width: 60px;text-align: center;font-size: 15px;
    padding-bottom: 16px;color: #fff; background-color: blueviolet
}
#accuracyText{
  display: block;position: absolute;top: 20%;left: 5%;z-index:30;height: auto;min-height: 35px;width: 90%;font-size: 15px;text-align: center;padding: 10px; color: #fff;background-color:blueviolet;
}

#createAddressForm{margin-left:40px;}
#createAddressForm button{position: absolute;z-index: 100;left: 20%;right: 20%;bottom: 14%;width: 52%;}
.dialog-box{color: #000;}
.dialog-box button {color: #fff;}
.guest-remaining{
  display: none; position: fixed; top: 30%; left: 10%; background: #3498db; color: white; padding: 10px; border-radius: 5px; z-index: 9999;
}
/*add container by default*/
.hidden-by-default{
  display: none;
}
    .ad-container {
      height: 270px;
      width: 95%;
      margin: 0 auto;
      margin-bottom: 30px;
      background-color: #6969694f;
      z-index: 444;
    }

    .ad {
      width: 100%;
      height: 100%;
      display: none;
      padding: 10px;
      margin-left: 100%;
      gap: 10px;
      text-align: center;
      transition: left 0.5s ease-in-out;
      max-height: 270px;
    }

    .ad.active {
      margin-left:0;
      display: flex;
      flex-direction: column;
    }

    .ad img {
      width: 100%;
      height: 110px;
      object-fit: contain;
    }

    .ad h2 {
      font-size: 1.0rem;
      margin: 10px 0;
      color: #333;
    }

    .ad button {
      padding: 2px 15px;
      font-size: 1rem;
      background-color: #007bff;
      color: white;
      border: none;
      border-radius: 5px;
      max-width: 300px;
      margin: 5px auto;
      cursor: pointer;
      transition: background-color 0.3s;
    }
    .ad a{
        text-decoration: none;
        color: #fff;
    }

    .ad button:hover {
      background-color: #0056b3;
    }

    /*share app pages/shareLinks.php  style*/

    .share-container {
        margin: 20px 0;
        padding: 15px;
        background: #f8f9fa;
        border-radius: 8px;
        border-left: 4px solid #007bff;
    }

    .native-share-btn {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border: none;
        transition: transform 0.2s ease;
        position: absolute;
        width: 70%;
        left: 15%;
        min-height: 45px;
    }

    .native-share-btn:hover {
        transform: translateY(-2px);
    }

    .social-share-btn {
        transition: all 0.2s ease;
    }

    .social-share-btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    }

    .share-icon, .social-icon {
        margin-right: 5px;
    }
        h5{font-size: 1em;}
        .facebook { background: #3b5998; }
        .twitter { background: #1da1f2; }
        .linkedin { background: #0077b5; }
        .whatsapp { background: #25d366; }
        .telegram { background: #0088cc; }
/* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
#map_container,#myAddress{margin: 0 auto;height: 400px;width: 40%;display: none;}
#loader {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: #fff;
      z-index: 9999;
      display: flex;
      justify-content: center;
      align-items: center;
}
  .loader-hidden{opacity: 0;visibility: hidden;}
  #loader::after{
      content: "";
      width: 130px;
      height: 130px;
      border: 15px solid #f3f3f3;
      border-top: 15px solid var(--accent-color);
      border-radius: 50%;
      animation: spin 1s linear infinite;
  }
  @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
  }
#registration_page,#loginContainer .form-control {
  padding: 4px;
}
#desktop-notAvailable {
  display: block;
  margin:0 auto;
  text-align: center;
  width: 100%;
  height: 100%;
  background-color: #fff;
  color: #ccc;
}
#main {
  display: none;
}
#main-content h5,#install-app{
    background-color: #2c912c;
    padding: 1px 10px;
    border-radius: 5px;
    color: #fff;
    margin-top: 20px;
    text-align: center;
}
.requestPasswordReset{
    color: #000;
    padding: 20px;
    margin: 10px auto;
    text-align: left;
    width: 64%;
    height: 300px;
    transform: scale(1.2);
    font-size: 18px;
    position: relative;
    top: 8%;
}

    /* Navigation */
    nav.navbar {
      background-color: #fff !important;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      padding: 0.8rem 0;
      z-index: 1000;
    }

    .navbar-expand-lg{max-height: 55px;}
    
    .navbar-brand img {
      height: 40px;
    }
    a{
      text-decoration: none;
    }
    .menu-toggle {
      border: none;
      padding: 0.25rem 0.5rem;
      background-color: #008000;
      display: none;
    }
    
    .menu-toggle:focus {
      box-shadow: none;
    }

  .menu-toggle .bar {
    height: 2px;
    width: 25px;
    background-color: #fff;
    margin: 4px 0;
  }
    
    .navbar-nav .nav-link {
      color: var(--primary-color) !important;
      font-weight: 500;
      padding: 0.5rem 1rem;
      transition: color 0.3s;
    }
    
    .navbar-nav .nav-link:hover {
      color: var(--accent-color) !important;
    }
    
    .navbar-nav .nav-link img {
      margin-right: 5px;
      width: 18px;
      height: 18px;
    }
    .nav-ul > .nav-links svg{ display: none;} 

#places {
  position: absolute;
  z-index: 20000;
  width: 70%;
  left: 40%;
 }

#places ul {
  width: 100%;
  position: absolute;
  right: 0;
  display: flex;
  flex-direction: row;
  list-style: none;
}

#intro {
    display: flex;
    margin: 0 auto;
    width: 90%;
    padding: 20px;
    gap: 50px;
}

#intro p {
  margin-bottom: 1.4rem;
  text-align: left;
  font-size: 18px;
  color: #000;
}

#intro > span {
  display: block;
  font-weight: 600;
  margin: 0px 1rem;
  color: var(--accent-color);
  text-align: center;
}

#first-row,#seccond-row{
  min-height: 200px;
  display: flex;
  flex-direction: column;
  height: fit-content;
}

#first-row{
  width: 50%;
}

#seccond-row{
  width: 42%;
}
#first-row > span{
  padding: 20px;
  text-align: center;
}


/*headers/h1-h6*/
.h-title{
  margin: 0 auto;
  color: #000;
  margin-bottom: 1rem;
  font-weight: 600;
  text-align: center;
  padding: 10px;
  height: 30px;
}

footer{
  text-align: center;
  display: flex;
  flex-direction: column;
  width: 100%;z-index: 2;
}

#tutorials{
  display: flex;
  flex-wrap: wrap;
}

#items-container{
  margin: 0 auto;
  width: 90%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 5px;
}

.items{
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0px;
  height: 300px;
  max-height: 350px;
  width: 48%;
}
.items > span{font-size: 18px;}
#loginContainer{
  margin: 0 auto;
  max-width: 400px;
  margin-top: 20px;
  padding: 11px;
  margin-bottom: 40px;
  background-color: #fff;
}
#places ul > li {
  margin: 0 10px;
  padding: 3px 10px;
  text-align: left;
  background-color: #fff;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  color: black;
  font-style: italic;
  font-weight: 600;
}
#places ul > li a {
  text-decoration: none;
  font-size: 10px;
  color: #2a1905e8;
}
#places ul > li img{
  margin-right: 3px;
  margin-top: -4px;
}
#address_details {
  display: none;
}

#myPlaces{background-color: #fff; margin-bottom: 150px;}
#myPlaces .list{display: flex; flex-direction: column;}
#myPlaces > h4{color: red; font-size: 25px;}
#myPlaces .place_name{color: red;font-size: 25px;}
#myPlaces .place_number{color: red; font-size: 40px;}
#main-content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
#main-content > #map {
  margin: 0 auto;
  height: 100%;
  width: 100%;
  z-index: 9;
}

iframe {
  display: block; /* or inline-block */
  visibility: visible;
  opacity: 1;
  width: 100% !important;
}

#video-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #068e4f;
    z-index: 10000;
}

#youtube-player {
    width: 100%;
    height: 100%;
    border: none;
}

/* Minimal close button */
#close-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  background: rgba(0,0,0,0.5);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  cursor: pointer;
  z-index: 1000;
  border: none;
}


#close-btn:hover {
    background: rgba(255, 0, 0, 0.8);
    transform: scale(1.1);
}

/* Loading indicator */
#loading {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 20px;
    z-index: 10002;
    display: none;
}
.content-section {
    margin: 40px 0;
}
#toggleEye{
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%); cursor: pointer;
}
#forgotPassword{
  margin-top: 60px padding: 5px;
    text-align: left; width: 100%;
}
.requestPasswordReset{margin-left: 10px;}

#video-container{display: none;}
#heroSection{
  width: 1133px;
  margin: 0 auto;
}
#heroSection > .hero-item{
  width: 100% !important;
  height: 350px;
}
  /* YouTube Wrapper */
  .youtube-wrapper {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 2rem auto;
    background-color: #ced4da;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s;
  }
    
    .youtube-wrapper:hover {
      transform: translateY(-5px);
    }
    
    .youtube-wrapper::before {
      content: '';
      display: block;
      padding-top: 56.25%; /* 16:9 Aspect Ratio */
    }
    
    .youtube-wrapper .play-btn {
      position: absolute;
      top: 50%;
      left: 62%;
      height: 50px;
      z-index: 1;
      transition: transform 0.3s;
      transform: translate(-50%, -50%) scale(1.1);
    }
    
    .youtube-wrapper:hover .play-btn {
      transform: translate(-50%, -50%) scale(1.1);
    }
    
    .youtube-wrapper iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border: none;
    }

  .youtube-wrapper{
    background-image: var(--person-image);
    background-repeat: no-repeat;
  }
      .youtube-wrapper > iframe {
        display: block; /* or inline-block */
        visibility: visible;
        opacity: 1;
        width: 100% !important;
      }

  h1 {
  color: #333;
  }
  p {
    color: #666;
  }
  #buttons{
    text-align: center;
    position: relative;
    bottom: 5%;
    left: 30%;
    display: flex;
    flex-direction: column;
    width: 35%;
    gap: 20px;
    margin-bottom: 50px;
    margin-top: 50px;
  }
  #buttons button{ width: 80%; margin: 0 auto;}
#more{
  width: 100%;
  min-height: 90vh;
  background-color: #ddd;
  padding: 20px;
}
#more ul{
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    grid-template-columns: 48% 48%;
    grid-gap: 10px;
    grid-auto-rows: 111px;
    list-style: none;
    width: 100%;
    margin-top: 4vh;
    padding: 5px;
}
#more ul li{
    width: 45%;
    padding: 0px;
    margin: 10px 5px;
}

#more ul li > a{
        place-items: center;
        background-color: #149216d9;
        min-width: 100%;
        text-decoration: none;
        color: #fff;
        padding: 10px 0px;
        margin: 0 auto;
        font-size: 14px;
        height: 70px;
        border-radius: 12px;
        padding: 20px;
        display: flex;
        flex-direction: column;
}

#loginContainer{
  margin: 0 auto;
  width: 80%;
  transform: scale(1.2);
  margin-top: 20%;
  border-top-left-radius: 25px;
  border-top-right-radius: 25px;
  padding: 5px;
}

/*leaflet js zoom control*/ 
.leaflet-left {
    left: 95%;
}
.leaflet-top {
    top: 63%;
}
.bg-dark {
  width: 25%;
  height: 100vh;
  margin-top: -23px;
  float: left;
}
      #map_container {
        display:block;
        margin: 0 auto;
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
      }
      #map_container #map {
        width: 100%;
        height: 100vh;
        margin: 0 auto;

      }
      #map_container .btn-warning {
        color: #000;
        background-color: #ffc107;
        position: absolute;
        z-index: 10;
        margin: 0 auto;
        bottom: 22%;
        left: 14%;
     }

     #map_container form {
      margin-bottom: 120px;
     }


.custom-map-control-button {
  background-color: #fff;
  border: 0;
  border-radius: 2px;
  box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3);
  margin: 10px;
  padding: 0 0.5em;
  font: 400 18px Roboto, Arial, sans-serif;
  overflow: hidden;
  height: 40px;
  cursor: pointer;
}
.custom-map-control-button:hover {
  background: #ebebeb;
}

#registration_page {
  margin:  0 auto;
}
#registration_page form{
  margin: 0 auto;
  width: 30%;
}
#registration_page ul{
    margin: 0 auto;
    list-style: none;
    width: 30%;
}
#registration_page ul .alert {
    padding: 0px;
    margin: 1px;
    text-align: center;
}
#m-bottom-nav {
  display: none;
  background-color: #2e799df5;
    width: 100vw;
}
.contactForm {
    margin: 0 auto;
    width: 90%;
    max-width: 500px;
    text-align: center;
    margin-top: 50px;
}
#search form {
    width: 26%;
    height: 40px;
    margin: 0 auto;
    position: absolute;
    top: 13.5%;
    left: 1.4%;
    z-index: 1000;
    appearance: none;
    border-radius: 0.25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
    .baro{
      margin: 0 auto;
      padding: 20px;
      width: 100%;
      height: auto;
      z-index: 1;
      padding-bottom: 100px;
      text-align: left;
      color: #000000eb;

    }
    .baro iframe{
      width: 30% !important;
      height: 300px !important;
    }


#search form .form-control {
  width: 80%;
  border: none !important;
}
#search form input {
  width: 85%;
  height: 35px;
  text-align: left;
  font-size: 17px;
  border: 1px;
  border-bottom: 2px #256818e0;
  padding-left: 40px;
  border-top-right-radius: 25px;
  border-bottom-right-radius: 25px;
  border-top-left-radius: 25px;
  border-bottom-left-radius: 25px;
}
.form-control:focus {
  border-right-color: #fff !important;
  box-shadow: 0 0 0 0.25rem rgb(13 110 253 / 4%) !important;
}

#search form .form-control:focus #search,#search-arrow-right{
  border-color: #86b7fe;
  box-shadow: 0 0 0 0.25rem rgb(13 110 253 / 25%);
}
#search-icon {
  margin: 0px 0px;
    margin-top: 3px;
    position: absolute;
    padding: 0px;
    height: 20px;
    left: 9px;
    right: 0px;
    top: 6px;
    padding-right: 7px;
    width: 30px;
    object-fit: fill;
}
#search form #search-arrow-right {
    position: absolute;
    right: 0;
    height: 37px;
    margin-top: -33px;
    width: 14%;
}
  #search li{display: block;margin: 0 auto;position: relative;z-index: 1000;height: 50px;text-align: center;width: 100%;margin-top: 10px;margin-right: 104px;list-style: none;width: 409px;font-size: 20px;padding: 20px;border-radius: 3%;border: 0.3px solid #000;text-align: center;}

#updatePrompt{display: none;}
#updatePrompt button{
    position: absolute;
    width: 70%;
    left: 13%;
    top: 30%;
    transform: scale(1.3);
    padding: 8px;
    border-radius: 18px;
    border: none;
}
@media screen and (display-mode:  standalone){
  #search {top: 1vh;}
  #places {margin-top: 6vh;}
  .mapboxgl-ctrl-top-right {
    right: 0;
    top: 36% !important;
  }
}

@media screen and (max-width: 768px){
    body {
      margin: 0 auto;
      width: 100%;
      height: 100vh;
    }
    .menu-toggle{
        display: flex;
        flex-direction: column;
        margin-right: 0vw;
        margin-top: -13px;
        width: 40px;
        height: 33px;
        padding: 6px 6px;
        background-color: #2c912c;
        border-radius: 5px;
    }
    .nav-ul{
        margin: 0px auto;
        padding: 10px;
        color: #fff;
        display: none;
        position: fixed;
        display: none;
        left: 0;
        top: 0vh;
        width: 70%;
        border-radius: 2px;
        height: 100%;
        font-size: 17px;
        list-style: none;
    }
    .showMenu {
        display: block; /* Show when active */
        background-color: #e9ecef;
        padding: 30px 20px;
        color: #fff;
    }

    .nav-links li {
        padding: 5px 10px;
        width: 100%;
        text-align: left;
    }
    .navbar-nav .nav-link {color: #fff;}

   .nav-links svg{
        margin-right: 10px;
        display: block;
    }

    .menu-toggle .bar {
        height: 3px;
        width: 27px;
        background-color: #fff;
        margin: 2px 0;
    }

  .nav-links a {
      color: #fff;
      text-decoration: none;
      font-size: 15px;;
  }
  #intro{flex-direction: column;padding: 0px; width: 100%;}
  #first-row{width: 100%;}
  #seccond-row{width: 100%}
  #heroSection {width: 100%;}
  #heroSection > .hero-item{height: 200px; width: 100%;}
  #items-container{flex-direction: column; gap: 10px;}
  .items{width: 100%;height: 200px; margin: 0 auto;}
  .youtube-wrapper {width: 100%; height: 200px;margin: 0 auto;}
  .h-title {margin-bottom: 1rem; padding: 0;}
  .navbar-brand img {
     height: 35px;
  }

  .dialog-box {
        display: flex;
        flex-direction: column;
        position: absolute;
        min-height: fit-content;
        width: 90%;
        font-size: 20px;
        margin: 0 auto;
        top: 40%;
        left: 5%;
        background: #fff;
        padding: 20px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        z-index: 1001;
        border-radius: 20px;
}
  #smartInstall{ margin-bottom: 50px; }
.install-guide .step-item {
  display: flex;
  align-items: center;
  margin-bottom: 1.5rem;
}

.step-icon {
  width: 40px;
  height: 40px;
  background: #007AFF;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  margin-right: 1rem;
  flex-shrink: 0;
}

#transactionsThanks{
  border-top-right-radius: 50px;
  position: relative;
  top: 8%;
  font-size: 17px;
  width: 90%;
  left: 5%;
  right: 5%;
  text-align: left;
  font-size: 20px;
  background-color: #fffffff0;
  padding: 20px;
  border-top-left-radius: 50px;
  padding: 20px;
  min-height: 50vh;
}
#inputPassword{
  position: relative;
}
#editAddressBtn{min-width: 150px; max-width: 300px; margin: 20px auto;}
#deleteAddress{min-width: 150px; max-width: 300px; margin: 20px auto; color: #fff; text-decoration: none;}
#deleteAddress > a{text-decoration: none;color: #fff;}
#transactionsThanks > h1{color: red; font-size: 40px;}
#diiwaan{margin: 50px auto; width: 50%; height: 50px;}
#diiwaan > a{padding-bottom: 130px; margin-bottom: 40px; text-decoration: none;}
.step-text {
  flex: 1;
}

.step-text strong {
  display: block;
  color: #333;
}

.step-text small {
  color: #666;
  font-size: 0.875rem;
}
.goLink{margin-top: -39px;margin-right: 26px;}
.more-dots-first{margin-right: -10px;}
.more-dots-last{margin-left: -10px;}
.dialog-box h1 {
    color: #333;
    background-color: green;
    padding: 10px;
    border: none;
}
  #updatePrompt,.updatePrompt{
    display: block;
    position: absolute;
    left: 0;
    margin-top: 10px;
    top: 0%;
    width: 100%;
    margin: 0 auto;
    height: 100vh;
    border-radius: 20px;
    padding: 20px;
    border: #198754;
    background: rebeccapurple;
    color: #fff;
  }
  #updatePrompt p{
    position: relative;
    top: 30%;
    margin: 0 auto;
    text-align: center;
  }
#refreshUpdate{
  position: relative;
  top: 40%;
  left: 0;
  margin-top: 10px;
  top: 40%;
  width: 37%;
  margin: 0 auto;
  height: 50px;
  border-radius: 20px;
  padding: 8px;
  border: #198754;
}

#buttons {width: 100%; left: 5%;}

#logo {
  width: 40px;
  margin-top: 0px;
  object-fit: contain;
  margin-left: 5px;
  position: relative;
  top: -6px;
  height: 21px;
}

  /* WhatsApp Button Styles */
.whatsapp-button {
  position: fixed;
  bottom: 13%;
  right: 15px;
  z-index: 1000;
  display: block;
  background-color: #25D366;
  padding: 1px;
  border-radius: 50%;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease-in-out;
  animation: float 3s ease-in-out infinite;
}

.whatsapp-button svg {
    width: 60px;
    height: 60px;
}

.whatsapp-button:hover {
    transform: scale(1.1);
}
  .mapboxgl-ctrl-top-right {
    right: 0;
    top: 35% !important;
  }
    #desktop-notAvailable{
      display: none;
    }
    #outputPage {
      margin-bottom: 400px !important;
    }

    .baro{
      margin: 0 auto;
      padding: 10px;
      width: 100%;
      height: auto;
      z-index: 1;
      padding-bottom: 100px;
    }
    .baro iframe{
      margin: 0 auto !important;
      width: 90% !important;
      height: 300px;
    }
    /*user location error display*/
    #x {
        position: absolute;
        margin: 0 auto;
        width: 95%;
        top: 30%;
        left: 2%;
        color: #fff;
        font-size: 20px;
        background-color: #d75e5e;
        padding: 18px;
        font-size: 20px;
        text-align: left;
        z-index: 1000;
        display: none;
    }
  .profile {
    margin: 0 auto;
    position: absolute;
    left: 0%;
    right: 0;
    top: 0vh;
    background-color: #fff;
    min-height: 100vh;
    width: 100vw;
    padding: 20px;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
  }
  .profile .btn {
    margin-top: -52px;
  }

  .profile a {
    text-decoration: none;
  }
    #main {
      margin: 0 auto;
      display: block;
        position: absolute;
        top: 34%;
        left: 0;
        right: 0;
        transform: scale(1.3);
        width: 76%;
        height: 45vh;
    }
    #myAddress{
      width: 90%;
    }

    .leaflet-touch .leaflet-control-attribution{
        margin-right: -276px !important;
    }

    #main #latLngValue1{
      margin: 0 auto;
    text-align: center;
    width: 80%;
    margin-top: 35px;
    }

  #main #latLngValue2{
    margin: 0 auto;
    text-align: center;
    width: 80%;
    margin-top: 45px;
    }
    #registration_page .btn-success,#registration_page > p {
      width: 132px;
      position: relative;
     left: 20%;
     text-align: center;
    }

    #registration_page .btn-success{
      margin-bottom: 80px;
    }
    #header {
      height: 10vh;
      display: none;
    }
    #payment_index {
      margin: 0 auto;
      width: 95%;
      min-height: 100vh;
      height: auto;
      position: relative;
      padding: 20px;
      top: 10%;
      left: 0;
      right: 0;
      bottom: 5%;
      padding-bottom: 100px;
      margin-bottom: 40px;
    }
    #map_container,#myAddress{
      height: 100%;
      display: block;
      position: fixed;
      width: 100%;
      left: 0;
      right: 0;
      display: block;
    }


    #pyment_index {
      margin: 0 auto;
      width: 90%;
    }

    #payment_index .btn-warning {
      margin: 0 auto;
      width: 100%;
      font-size: 20px;
    }
  #payment_index .btn-warning a 
  {
    color: #fff;
    text-decoration: none;
  }
    .sahal {
      width: 100%;
      min-height: 98vh;
      margin: 0px auto;
      margin-top: 10%;
      padding-bottom: 7px;
      padding-bottom: 100px;
      text-align: left;
      margin-bottom: 170px;
      border-top-left-radius: 50px;
      border-top-right-radius: 50px;
      background-color: #fffffff0;
      padding: 17px;
      padding-top: 25px;
      font-size: 16px;
      }

      .sahal .btn {
        background-color:#125335;
        border: #125335;
      }
    .sahal .alert {
        position: relative;
        margin-bottom: 1rem;
        border: 1px solid transparent;
        border-radius: 0.25rem;
        padding: 5px !important;
        margin-top: 4px;
    }
      .sahal h3,h4 {
        font-size: 16px;
        padding: 5px;

      }
      .sahal .account {
        margin: 0 auto;
        width: 100%;
      }
      .sahal #order_id {
        height: 70px;
      }

      .sahal #order_id {
        height: 36px;
        margin: 10px;
        margin: 0 auto;
        width: 100%;
        margin: 10px auto;
      }
      .sahal p{
        height: auto;
        margin: 0px auto;
        margin-bottom: -3px;
        width: 100%;
      }

      #more {
        margin: 0 auto;
        width: 100%;
        position: relative;
        background-color: #fffffff0;
        padding: 5px;
        border-top-right-radius: 50px;
        border-top-left-radius: 50px;
      }

      #more ul li a{   
      place-items: center;
      min-width: 100%;
      color: #fff;
      padding: 10px 0px;
      margin: 0 auto;
      font-size: 13px;
      height: 50px;
      border-radius: 12px;
    }
    #main-content {
      margin: 0 auto;
      padding: 20px;
      height: auto;
      width: 97%;
      display: flex;
      flex-direction: column;
    }
    #main-content hr{display: none;}
    #search {
      margin: 0 auto;
      grid-area: overlap;
      display: grid;
      justify-self: center;
      align-self: center;
      height: 40px;
      width: 93vw;
      position: absolute;
      top: 2vh;
      background-color: white;
      z-index: 1001;
      color: white;
      border-radius: 10px;
      border-top-right-radius: 54px;
      border-bottom-right-radius: 54px;
      border-bottom-left-radius: 54px;
      border-top-left-radius: 54px;
      margin-left: 10px;
    }

    #search .form-control {
    display: block;
    width: 100%;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    /* background-clip: padding-box; */
    border: 0px solid #ced4da;
    /* -webkit-appearance: none; */
    -moz-appearance: none;
    /* appearance: none; */
    /* border-radius: 0.25rem; */
    /* transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out; */
}

    #search form {
      margin: 0 auto;
      width: 100%;
      height: 100%;
      display: grid;
      padding: 0px;
      grid-template-rows: 32% 109%;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      border-radius: 10px;
      border-top-right-radius: 56px;
      border-bottom-right-radius: 56px;
      border-bottom-left-radius: 56px;
      border-top-left-radius: 56px;
}

#search form input {
  margin: 0 auto;
    width: 88%;
    height: 40px;
    z-index: 1001;
    border: none;
    padding: 20px;
    position: absolute;
    left: 45px;
    right: 0;
    font-size: 20px;
    border-radius: 10px;
    border-top-right-radius: 54px;
    border-bottom-right-radius: 54px;
}
    #main-content #map {
    margin: 0 auto;
    padding: 0;
    height: 100vh;
    position: absolute;
    width: 100vw;
    text-align: center;
    top: 0;
    bottom: 10%;
    z-index: 9;
    }
    #places {
    width: auto;
    height: 50px;
    border-bottom: 1px solid #fff;
    display: inline-flex;
    left:0;
    margin-top: 9vh;
    }
    #places ul {
    position: initial;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* IE 10+ */
    margin-left: -29px;

    }
    #places ul li {
      overflow: auto;
      direction: ltr;
      margin: 0 8px;
      padding: 4px 14px;
      text-align: left;
      background-color: #fff;
      border-top-left-radius: 20px;
      border-top-right-radius: 20px;
      border-bottom-left-radius: 20px;
      border-bottom-right-radius: 20px;
      color: black;
      font-style: italic;
      font-weight: 600;
      width: 128px;
      height: 23px;
      font-size: 10px;
    }

    #places ul li a{
      overflow-x: scroll;   
      overflow-y: hidden;   
      white-space: nowrap;
    }

    .leaflet-top .leaflet-control {
        margin-top: 145px;
    }
    .leaflet-control-container{
      position: absolute;
      top: 40%;
      right: 13%;
    }

    .leaflet-bottom, .leaflet-right{
      bottom: -20% !important;
    }

    .grecaptcha-badge {
      height: 20px !important;
      margin-bottom: -100px !important;
    }
    #footer-container > p{
      display: none;
    }
    .ad-container {width: 100%; margin-bottom: 80px;}
    #registration_page .panel-heading{
      margin-top: 10px;
    }
    #registration_page form {
      margin: 0 auto;
      width: 70%;
      font-family: bold;
      transform: scale(1.4);
      margin-top: 20vh;
      margin-bottom: 50px;
      padding-bottom: 60px;
    }
    #registration_page ul {
      margin: 0 auto;
      list-style: none;
      width: 100%;
  }
 
  #address_details {
    display: block;
    margin: 5% auto;
    min-height: 84vh;
    height: auto;
    width: 100%;
    background-color: #fffffff0;
    padding: 10px 2px;
  }

  #address_details form {
    transform: scale(1.3);
    margin: 0 auto;
    width: 70%;
    height: auto;
    margin-top: 80px;
    margin-bottom: 175px;
}
  
  #address_details form .btn-warning {
    color: #fff;
    background-color: #198754;
    border-color: #198754;
    margin-bottom: 60px;
  }
      #addres_checout {
        margin: 0 auto;
        width: 80%;
        height: 80vh;
      }

      #addres_checout .details {
        height: 60vh;
        width: 70%;
        transform: scale(1.2);
        margin: 0 auto;
      }

      .evc button {
        width: 100%; 
      }
    .evc button a{
        color: #fff !important;
        color: #fff !important;
        font-size: 20px;
        font-family: sans-serif;
        text-decoration: none;
        font-weight: 700;
    }
    #m-bottom-nav {
      display: block;
      background-color: #fff;
      z-index: 100;
    }
    .mobile-bottom-nav {
        margin: 0 auto;
        padding: 0px 4px;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 5000;
        display: flex;
        width: 100%;
        height: 70px;
        box-shadow: 0 0px 13px -2px #333;
        background-color: #fff;
        list-style: none;
    }
    .mobile-bottom-nav ul:nth-child(0) {
      margin-left: 5px;
      background-color: red;
    }

  .mobile-bottom-nav ul >li:nth-child(2) {
      margin-left: 15px;
      background-color: red;
    }

    .nav--link{
    list-style: none;
    margin: 0 4px;
    flex-grow: 1;
    margin-left: 4vw;
    margin-right: 2vw;
    height: 48px;
  }
  .nav--link a {
      font-size: 10px;
      margin-top:-8px;
      display: inline-grid;
      place-items: center;
      color: #000;
      text-decoration: none;
      flex-basis: 25%;
      z-index: 1;
      height: 48px;
      margin-top: 0.5vh;
    }
      .nav-link--active{
        color: #1c4e97;
        border-top: 2px solid #1c4e97;
      }

      .nav-link--active a {
        color: #0464ef;
      }

      .nav--link a .elm1 {
        position: absolute;
        top: 12px;
        left: 10px;
        object-fit: fill;
        height: 18px;
      }

    .nav--link a .elm2 {
      position: absolute;
      top: 21px;
      left: 23px;
      object-fit: fill;
      height: 16px;
      }
      .nav--link a #elm4 {
        margin-top: 23px;
    }
      .nav--link a .elm3 {
        position: absolute;
        top: 11px;
        left: 24px;
        height: 13px;
        object-fit: cover;
      }
      .nav--link #go{
        margin-top: 3px;
        margin-left: 0px;
      }
      #more-dots{
        display: inline-flex;
        align-items: flex-start;
        justify-items: center;
        margin: 1px;
        flex-flow: row;
    }

    #more-dots span {
      margin-top: -3px;
      font-size: 11px;
    }
      .nav-content:hover{
        display: block;
      }

      #registration_page {
        margin: 0 auto;
        margin-top: 0%;
        border-top-left-radius: 70px;
        border-top-right-radius: 70px;
        background-color: #fffffff0;
        padding: 10px 10px;
        width: 100%;
      }

      #registration_page .mb-3 {
        margin-bottom: 0.5rem!important;
      }

      #registration_page .panel {
        width: 95%;
        text-align: left;
      }

      #loginContainer {
        width: 85%;
      }

      #loginContainer .pnale,.panel-primary{
        width: 100%;
        padding: 20px;
        margin: 0 auto;
      }

      #loginContainer .btn-success{
        color: #fff;
        background-color: #198754;
        border-color: #198754;
        font-size: 13px;
        width: 100%;
      }

      #loginContainer .btn-warning {
        border-color: #d9db35;
        font-size: 13px;
        width: 100%;
      }


      #loginContainer form{
        margin: 0 auto;
        width: 100%;
        width: 100%;
        margin-bottom: 60px;
      }
  }

  @media only screen and (max-width: 576px){
    .navbar-nav .nav-link {
        padding: 4px 0.75rem;
        font-size: 18px;
      }
  }

   @media only screen and (max-width: 411px){
      .panel-heading {
        padding: 10px;
      }
   }

  @media only screen and (max-width: 320px){
    #loginContainer {
      margin: 0 auto;
      width: 85%;
    }


    .panel-primary {
      width: 100%;
      padding: 0px;
      margin: 0 auto;
    }
    #go2 {
      margin-top: -45px;
      margin-right: -22px;
    }
    .form-control{
      font-size: 16px;
      padding: 2px !important;
    }
    #loginContainer .btn {
      width: 100%;
      font-size: 13px;
      margin: 0 auto;
    }
    .nav--link a { 
      font-size: 11px;
    }
    #more ul {
      padding: 2px;
  }
}

   @media only screen and (max-width: 311px){
    .mobile-bottom-nav {
      height: 50px;
      padding: 4px 1px;
      margin-top: -10px;

    }
   .mobile-bottom-nav svg {
      height: 30px;
      width: 15px;
    }
    .mobile-bottom-nav .nav--link {margin-top: 5px;}
    .mobile-bottom-nav .nav--link a > span{
      margin-top: -19px;
    }
      .nav--link a { 
        font-size: 9px;
      }

   }

  @media only screen and (max-width: 280px){
    body{
      font-size: 12px;
    }

    .sahal {
      width: 73%;
      height: auto;
      margin: 0 auto;
      margin-top: 127px;
      padding-bottom: 7px;
      transform: scale(1.4);
      text-align: left;
      margin-bottom: 175px;
    }
    .nav--link a { 
      font-size: 8px;
    }

    #profile {
      padding: 5px;
    }

    #profile .btn-success {
      width: 35%;
    }

    #profile .btn-primary {
      width: 55%;
    }

  }