.form-control:focus {
    box-shadow: unset;
}


#google-map-locator {
    display: flex;
/*    height: 500px;*/
    position: relative;
    overflow: hidden;
}

#map {
    width: 70%;
    height: 100%;
    background-color: #e8e8e8;
}

/* locator  */
/*#locator-options {
    padding: 10px;
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    position: absolute;
    left: 2%;
    top: 5%;
    z-index: 1000;
}
#locator-options h3 {
    margin: 0 0 10px;
    font-size: 16px;
}*/

.locator-wrapper {
    position: absolute;
    top: 0%;
    left: 2%;
/*    transform: translateX(-50%);*/
/*    text-align: center;*/
    z-index: 97;
}

.locator-title {
    font-family: 'GalanoGrotesque';
    font-size: 5vw !important;
    font-weight: bold !important;
    color: #000 !important;
    margin-bottom: 0px;
}

.locator-toggle {
    display: flex;
    background: #f3f3f300;
    padding: 5px;
    border-radius: 50px;
/*    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);*/
    overflow: hidden;
}

.btn-2 {
    margin-left: -10%;
}

.btn-1 {
/*    z-index: 99999;*/
}

.toggle-btn {
    background: none;
    border: none !important;
    font-size: 18px;
    font-family: 'GalanoGrotesque';
    font-weight: bold;
    cursor: pointer;
    border-radius: 50px !important;
    transition: all 0.3s ease !important;
    padding: 1vw 5.3vw !important;

    filter: blur(0px);
    background-color: #e7e8eb99 !important;
    opacity: 0.75;
    mix-blend-mode: normal;
    box-shadow: inset 2px 2px 5px rgb(0 0 0 / 5%);
    backdrop-filter: blur(3px);

}

.toggle-btn.active {
    background: #000 !important;
    color: #fff;
    z-index: 99999;
}


/* locator  */

#location-list-container {
    width: 24%;
    padding: 20px;
    overflow-y: auto;
    max-height: -webkit-fill-available;
    border-left: 1px solid #ccc;
    background: #ffffff;
    position: absolute;
    left: 2%;
    top: 31%;
    scrollbar-width: none;
    border-top-left-radius: 2rem;
    border-top-right-radius: 2rem;

    height: calc(100vh - 31%);
    display: flex;
    flex-direction: column;

}

/* Location List: Takes the remaining space and is scrollable */
#location-list {
    flex: 1;
    overflow-y: auto;
    scrollbar-width: thin; /* Firefox */
    -ms-overflow-style: none; /* IE 10+ */
    overflow-x: hidden;
}


/* Webkit Scrollbar styling */
#location-list::-webkit-scrollbar {
    width: 6px;
}

#location-list::-webkit-scrollbar-track {
    background: #f1f1f1;
}

#location-list::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 3px;
}

#location-list::-webkit-scrollbar-thumb:hover {
    background: #555;
}



.location-item {
    padding: 10px;
    cursor: pointer;
}

.location-item:hover {
/*    background-color: #f1f1f1;*/
    transform: scale(1.05);
}

.location-item h4 {
    margin: 0;
    font-size: 16px;
    font-family: 'GalanoGrotesque';
}



.location-item .img-list {
    width: 80%;
    height: auto;
}



/*new*/


        #map {
            width: 100%;
            height: 100vh;
        }
        .locator-container {
            display: flex;
            max-width: 1200px;
            margin: auto;
        }
        .locations-list {
            width: 30%;
            padding: 20px;
            background: #f9f9f9;
        }
        .map-container {
            width: 70%;
        }
      
      
        .location-item h3 {
            margin: 0;
            font-size: .88vw;
            font-family: 'GalanoGrotesque';
            color : #0C0F13;
            /*overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;*/
        }
        .location-item p {
            margin: 5px 0;
            font-size: .77vw;
            font-family: 'GalanoGrotesque';
            color: #7c7b7b;
            line-height: normal;
            /*overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;*/
        }

        .location-item span {
            color: #7c7b7b; 
            font-size: .67vw;
            font-family: 'GalanoGrotesque';
        }

        .location-details {
            width: 26vw;
        }
        

        .location-details h3 {
            margin: 0;
            font-size: .88vw;
            font-family: 'GalanoGrotesque';
            color : #0C0F13;
            /*overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;*/
        }

        .location-details p {
            margin: 5px 0;
            font-size: .77vw;
            font-family: 'GalanoGrotesque';
            color: #7c7b7b;
            line-height: 1.5em;
            font-weight:500;
            /*overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;*/
        }

        .location-details span {
            color: #7c7b7b; 
            font-size: .77vw;
            font-family: 'GalanoGrotesque';
            font-weight:500;
        }

        .location-details .button-details {
            display: flex;
            justify-content: space-between;
            background: #007bff;
            color: white;
            border: none;
            padding: 12px 40%;
            border-radius: 15px;
            cursor: pointer;
            width: 100%;
            margin-top: 10px;
            font-size: .8vw;
            font-family: 'GalanoGrotesque';
            font-weight: bold;
        }


.map-search-form #search-box {
    margin-top: .5%;
    margin-left: 1.5%;
}

.map-search-form {
    margin-bottom: 4%;
    flex: 0 0 auto;
}





.map-search-form .input-group {
    border: 0.13rem solid #eeeff1;
    border-radius: 1rem;
}

.map-search-form input[type="text"] {
    border: none;
    border-radius: .8vw !important;
    padding: 2%;
    font-size: 1rem;
    font-family: 'GalanoGrotesque';
    margin-right: 0px;
    color: #0C0F13;
}

.map-search-form .btn {
    border-radius: 30px !important;
    max-height: 45px;
    margin-right: 3%;
    margin-top: 1%;
    margin-bottom: 1%;
    padding: 3% 4% 3% 4%;
    font-size: 1rem;
    font-family: 'GalanoGrotesque';
    background-color: #000000;
    color: #fff;
    z-index: 9 !important;
}

.map-search-form .btn:hover {
    background-color: #0056b3;
}



@media (min-width: 2500px) {

    .map-search-form input[type="text"] {
        height: 5vh;
        font-size: 2rem;
        font-family: 'GalanoGrotesque';
        padding-left: 30px;
    }

    .map-search-form .btn {
        margin-top: 1%;
        max-height: 100px;
        border-radius: 40px !important;
    }

    .locator-title {
        margin-bottom: 5%;
    }

    .toggle-btn {
        font-size: 1vw;
    }


    .gm-style .gm-style-iw-c {
        max-width: 50vw !important; 
    }

    .location-details strong {
        font-size: .77vw;
    }


    .map-search-form .input-group {
        display: inline-flex !important;   /* Ensures items are side by side */
        align-items: center !important;    /* Vertically center the icon & input */
        justify-content: flex-start !important;
        gap: 1rem;                         /* Space between input and button */
      }
}


@media (min-width: 3500px) {

    .map-search-form .btn {
        margin-top: 1%;
        max-height: 90px;
        font-size: 1.4rem;
        padding-top: 3.5%;
        border-radius: 50px !important;
    }

    .bi-search::before {
        vertical-align: -.1em;
    }

    .locator-title {
        margin-bottom: 10%;
    }

    .toggle-btn {
        font-size: 1vw;
    }
}



@media (max-width: 768px) {

    .toggle-btn {
        padding: 2vw 10vw !important;
    }

    .map-search-form .btn {
        padding: 2% 3% 3% 3%;
        max-height: 40px;
        margin-top: 2%;
        margin-bottom: 2%;
    }

    .locator-wrapper {
        left: 5%;
    }

    #location-list-container {
        width: 95%;
        top: 55%;
    }

    .location-item .img-list {
        width: 100%;
        height: auto;
    }

    .location-details {
        width: 100%;
        max-height: 25vh;
    }

    .location-item h3 {
        font-size: 5vw;
        font-family: 'GalanoGrotesque';
    }

    .location-item p {
        font-size: 4vw;
        font-family: 'GalanoGrotesque';
    }

    .location-item span {
        font-size: 4vw;
        font-family: 'GalanoGrotesque';
    }

    .location-details h3 {
        font-size: 3.5vw;
        font-family: 'GalanoGrotesque';
    }

   .location-details p {
        font-size: 3vw;
        font-family: 'GalanoGrotesque';
   }

   .location-details span {
        font-size: 2.77vw;
        font-family: 'GalanoGrotesque';
    }


    .location-details .button-details {
        font-size: 2.5vw;
        font-family: 'GalanoGrotesque';
    }

    .locator-title {
        line-height: 2em !important;
    }

}






/* 1) Extra-small phones: up to 360px */
@media (max-width: 360px) {
  /* Styles for screens up to 360px wide */
  #location-list-container {
    /* CSS here */
  }
}

/* 2) Small phones: 361px to 767px */
@media (min-width: 361px) and (max-width: 390px) {
  /* Styles for 361–767px */
  #location-list-container {
    /* CSS here */
  }

  .map-search-form .btn {
    padding: 2% 3% 1% 3%;
  }

}


@media (min-width: 768px) and (max-width: 880px) {
  /* Styles for 361–767px */
  #location-list-container {
    /* CSS here */
    width: 95%;
    top: 55%;
  }

  .map-search-form input[type="text"] {
    height: 6vh;
  }

  .map-search-form .btn {
    max-height: 60px;
    margin-top: 1.2%;
    padding: 3% 3% 5% 3%;
  }

  .location-item p ,.location-details p {
    font-size: 1.8vw;
  }

  .location-item h3 ,.location-details h3 , .location-details .button-details {
    line-height: normal;
    font-size: 2vw;
  }

  .location-item span ,.location-details span {
    font-size: 1.8vw;
  }

  .location-details {
    width: 60vw;
  }
}


/* 3) Tablets: 768px to 1024px */
@media (min-width: 881px) and (max-width: 1024px) {
  /* Styles for 768–1024px */
  #location-list-container {
    /* CSS here */
    width: 40%;
    top: 15%;
  }

    .location-details {
        width: 40vw;
    }

  .location-item h3 ,.location-details h3{
    font-size: 1.8vw;
  }


  .location-item p ,.location-item span {
    font-size: 1.6vw;
  }


  .location-details p ,.location-details span {
    font-size: 1.2vw;
  } 

  .toggle-btn {
    padding: 1.5vw 8.3vw !important;
  }


}

/* 3) Tablets: 768px to 1024px */
@media (min-width: 1025px) and (max-width: 1200px) {
  /* Styles for 768–1024px */
  #location-list-container {
    /* CSS here */
  }
}

/* 4) Small laptops: 1025px to 1366px */
@media (min-width: 1201px) and (max-width: 1366px) {
  /* Styles for 1025–1366px */
  #location-list-container {
    /* CSS here */
    width: 25%;
  }
}

/* 5) Medium laptops: 1367px to 1440px */
@media (min-width: 1367px) and (max-width: 1440px) {
  /* Styles for 1367–1440px */
  #location-list-container {
    /* CSS here */
  }
}

/* 6) Large desktops: 1441px to 1600px */
@media (min-width: 1441px) and (max-width: 1600px) {
  /* Styles for 1441–1600px */
  #location-list-container {
    /* CSS here */
  }
}