/***************** Variables Start ********************/
.poppins-regular {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.section-tb-padding {
  padding-top: 100px;
  padding-bottom: 100px;
}

.section-tb-secure-padding,
#clientable,
#breadcrumb {
  padding-top: 50px;
  padding-bottom: 50px;
}

.section-about-tb-padding {
  padding-top: 100px;
  padding-bottom: 150px;
}

.text-blue {
  color: #0b79bf;
}

.text-red {
  color: #c3272e;
}

.border-blue {
  border: 3px solid #0b79bf !important;
  border-radius: 10px;
}

.border-gray {
  border: 3px solid #d4d3d3 !important;
  border-radius: 10px;
}

.bg-white {
  background-color: #fff;
}

.bg-red {
  background-color: #c3272e;
}

.btn-red {
  background-color: #c3272e;
  color: #fff;
  border: 1px solid #c3272e;
  border-radius: 5px;
  line-height: 25px;
  font-size: 14px;
}

.btn-red:hover,
.btn-danger:hover {
  background-color: #0b79bf;
  color: #fff;
  border: 1px solid #0b79bf;
  border-radius: 5px;
}

.btn-blue {
  background-color: #0b79bf;
  color: #fff;
  border: 1px solid #0b79bf;
  border-radius: 5px;
}

.btn-blue:hover {
  background-color: #c3272e;
  color: #fff;
  border: 1px solid #c3272e;
  border-radius: 5px;
}

.pointer {
  cursor: pointer;
}

.white-bg {
  background-color: #fff;
}
/****************** Variables End ********************/

body {
  background-color: #f4f4f4;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  margin: 0;
  padding: 0;
  height: 100%;
  overflow-x: hidden;
  color: #202020;
}

button.btn-danger {
  font-size: 14px;
}

input::placeholder,
textarea::placeholder {
  color: #ccc !important; /* or any color you want */
  opacity: 1; /* ensures full opacity in some browsers */
}

/***************** Header CSS Start *********************/
.top-header {
  background-color: #0b79bf;
  color: #fff;
  padding: 10px 0px;
}

.contact-info-item {
  display: flex;
  align-items: center;
  margin-right: 20px;
  font-size: 14px;
}

.contact-info-item i {
  font-size: 16px;
  margin-right: 10px;
}

.social-media-info-wrapper {
  display: flex;
  align-items: center;
}

.social-media-info-item {
  margin-right: 12px;
  font-size: 14px;
}

.social-media-info-item i {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 25px;
  height: 25px;
  font-size: 14px;
  margin-right: 0px;
  color: #fff;
  background-color: #c3272e;
  border-radius: 50%;
  transition: background-color 0.3s ease, transform 0.3s ease;
  padding-top: 2px;
}

.social-media-info-item i:hover {
  background-color: rgb(245, 211, 211);
  transform: scale(1.1);
}

.nav-logo-image {
  width: 200px;
}

.navbar-nav .nav-link {
  color: #202020;
  font-size: 16px;
}

.navbar-nav .nav-link:hover,
header .dropdown-menu li a:hover {
  color: #c3272e;
}

header .dropdown-item:active {
  background-color: unset;
}

.payment-online-link {
  background-color: #c3272e;
  border: 1px solid #c3272e;
  border-radius: 5px;
  margin-left: 23px;
  height: 30px;
  padding-top: 2px;
  padding-bottom: 0px;
  margin-top: 8px;
}

.payment-online-link:hover {
  background-color: #0b79bf;
  border: 1px solid #0b79bf;
}

.payment-online-link a {
  color: #fff !important;
  text-decoration: none;
  padding: 0px 20px !important;
}

.payment-online-link a:hover {
  color: #fff !important;
  text-decoration: none;
}

header ul.dropdown-menu {
  border: unset;
  padding: 0px;
  border-radius: 0px;
}
/*************************** Header CSS End ***************************/

/************************ Slider CSS Start ***************************/
#amr-storage-slider {
  position: relative;
}

#amr-storage-slider .carousel-wrapper {
  position: relative;
  height: calc(100vh - 105px);
  overflow: hidden;
}

#amr-storage-slider .owl-item .item::before {
  content: "";
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  position: absolute;
  background-color: #0b79bf;
  opacity: 0.75;
  z-index: 2;
}

#amr-storage-slider .item {
  position: relative;
}

#amr-storage-slider .carousel-caption {
  position: absolute;
  top: 20%;
  z-index: 3;
  left: 5%;
  width: 500px;
  text-align: left;
}

#amr-storage-slider .owl-carousel {
  position: relative;
  z-index: 0;
}

#amr-storage-slider .owl-carousel .item img {
  width: 100%;
  height: auto;
  transform: scale(1); /* Default scale */
  transition: transform 10s ease-in-out; /* Slow zoom-in animation */
}

#amr-storage-slider .owl-carousel .active img {
  transform: scale(1.2); /* Zoom-in effect for the active slide */
}

/* Navigation Bullets */
#amr-storage-slider .owl-dots {
  position: absolute;
  right: 20px; /* Move bullets to the right */
  top: 50%; /* Center bullets vertically */
  transform: translateY(-50%);
  display: flex;
  flex-direction: column; /* Stack bullets vertically */
  z-index: 2; /* Ensure dots are above the overlay */
  pointer-events: auto; /* Ensure dots are clickable */
}

#amr-storage-slider .owl-dot {
  width: 12px !important; /* Square size */
  height: 12px !important;
  background-color: #ccc !important;
  margin: 10px 0 !important; /* Increased space between bullets */
  border-radius: 0 !important; /* Remove circular shape */
  opacity: 1 !important;
}

#amr-storage-slider .owl-dot.active {
  background-color: #c3272e !important; /* Active bullet color */
}

#amr-storage-slider .owl-dot span {
  display: none !important; /* Hide the default circular span inside the dot */
}
/******************* Slider CSS End **************************/

/********************** About Section CSS Start ************************/
.about-us-left-wrapper {
  position: relative;
}

.about-us-left-wrapper img {
  width: 100%;
  height: auto;
}

.vision-wrapper,
.mission-wrapper {
  background-color: #fff;
  padding: 20px;
  margin-bottom: 20px;
  border: 3px solid #d4d3d3;
  border-radius: 10px;
}

.vision-wrapper:hover,
.mission-wrapper:hover {
  border: 3px solid #0b79bf;
}

.vision-wrapper h2 {
  font-size: 30px;
  color: #0b79bf;
  margin-bottom: 20px;
}

.vision-wrapper p {
  color: #333;
  line-height: 1.6;
}

.number-wrapper {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-bottom: 20px;
  background-color: #0b79bf;
  color: #fff;
  padding: 20px 0px;
  border: 3px solid #d4d3d3;
  border-radius: 10px;
}

.number-item {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.number-item p {
  margin-bottom: 0px;
}

.about-us-left-content-wrapper {
  position: absolute;
  width: 90%;
  left: 5%;
  bottom: -20%;
}

.service-item-wrapper {
  background-color: #fff;
  padding: 20px;
  margin-bottom: 20px;
  border: 3px solid #d4d3d3;
  border-radius: 10px;
}

.service-item-wrapper:hover {
  border: 3px solid #0b79bf;
}

.service-item-wrapper p {
  margin-bottom: 0px;
}

/******************** About Section CSS End *********************/

/******************** Clientable Section CSS Start **************/
#clientable {
  background-color: #0b79bf;
  /* opacity: 0.75; */
}

#clientable .owl-carousel .owl-item img {
  width: 800px;
  height: 200px;
}

/******************** Clientable Section CSS End ******************/

/************************ testimonials CSS Start **********************/
.testimonials {
  background-image: url("../images/warehouse.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.about-us-testimonial {
  background-image: url("../images/about-us-testimonial.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

#testimonials {
  position: relative; /* Ensure the pseudo-element is positioned relative to the section */
}

.testimonial-content-wrapper {
  position: relative; /* Ensure the content is above the overlay */
  z-index: 2; /* Ensure the content is above the background and overlay */
  padding: 20px;
  color: #fff; /* Text color for better visibility on dark background */
}

#testimonials::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #0b79bf;
  opacity: 0.75;
  z-index: 1;
}

.customer-image {
  width: 50px !important;
  height: 50px !important;
}

#testimonials .owl-dots {
  display: flex !important;
  justify-content: center;
  margin-top: 20px;
}

#testimonials .owl-dot {
  width: 12px;
  height: 12px;
  background-color: #ccc;
  border-radius: 50%;
  margin: 0 5px;
  cursor: pointer;
}

#testimonials .owl-dot.active {
  background-color: #c3272e;
}

#testimonials .owl-dot span {
  display: none !important; /* Hide the default circular span inside the dot */
}

/* testimonials CSS End */

/* Service Section CSS Start */
#why-choose-us .rounded-circle {
  width: 60px;
  height: 60px;
}

#why-choose-us .icon-wrapper {
  font-size: 30px;
}

#secure-storage {
  position: relative;
  background-image: url("../images/secure-storage.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.secure-storage-wrapper {
  position: relative; /* Ensure the content is above the overlay */
  z-index: 2; /* Ensure the content is above the background and overlay */
  color: #fff; /* Text color for better visibility on dark background */
}

#secure-storage::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(49 119 190 / 82%);
  z-index: 1; /* Ensure the overlay is above the background but below the content */
}

.secure-storage-wrapper p {
  font-size: 16px;
}

/* Service Section CSS End */

/* Footer CSS Start */
footer {
  background-color: #0b79bf;
  color: #fff;
  padding: 20px 0px;
  font-size: 14px;
}

ul.footer-list-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

ul.footer-list-links li {
  margin-bottom: 10px;
}

footer .social-icons a {
  font-size: 15px;
  display: inline-block;
  border: 1px solid #ffffff6b;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  text-align: center;
  padding: 3px;
}

.footer-company-info {
  max-width: 300px;
}

#breadcrumb {
  position: relative;
}

#breadcrumb::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #0b79bf;
  z-index: 1;
  opacity: 0.75;
}

#breadcrumb .breadcrumb-content-wrapper {
  position: relative; /* Ensure the content is above the overlay */
  z-index: 2; /* Ensure the content is above the background and overlay */
  color: #fff; /* Text color for better visibility on dark background */
}

#faq-section .accordion .accordion-item {
  margin-bottom: 20px;
}

#faq-section .accordion .accordion-item:last-child {
  margin-bottom: 20px;
}

.accordion-button:focus,
input:focus {
  box-shadow: none !important;
}

.driving-direction-wrapper {
  background-color: #fff;
  padding: 20px;
  /* margin-bottom: 20px; */
  border: 3px solid #d4d3d3;
  border-radius: 10px;
  height: 100%;
}

.driving-direction-wrapper button {
  font-size: 14px;
}

.row-flex {
  display: flex;
  flex-wrap: wrap;
}

.amenities-list-wrapper {
  list-style-type: none;
  padding: 0px;
  margin: 0px;
  columns: 2;
  -webkit-columns: 2;
  -moz-columns: 2;
}

#unit-pricing .table th,
#size-prices .table th,
.floor-plan-table th {
  background-color: #0b79bf;
  color: #fff;
}

.about-us-breadcrumb {
  background-image: url("../images/about-us-hero-banner.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.size-prices-breadcrumb {
  background-image: url("../images/size-prices.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.faq-breadcrumb {
  background-image: url("../images/faq.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.contact-breadcrumb {
  background-image: url("../images/breadcrumb/contact-us.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.floor-plan-breadcrumb {
  background-image: url("../images/breadcrumb/floor-plan.jpeg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.more-info-wrapper .icon-wrapper {
  width: 30px;
  height: 30px;
  background-color: #c3272e;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #c3272e;
  border-radius: 50%;
  margin-right: 15px;
}

.more-info-wrapper {
  display: flex;
}

.more-info-content-wrapper p {
  margin-bottom: 0px;
}

.team-member-wrapper:hover {
  border: 3px solid #0b79bf !important;
}

.team-member-wrapper img {
  border-top-left-radius: 7px;
  border-top-right-radius: 7px;
}

#size-prices .nav {
  border-bottom: unset !important;
}

#size-prices .nav .nav-item {
  width: 25%;
}

#size-prices .nav .nav-item button {
  width: 100%;
  border-radius: 0px;
}

#size-prices .nav .nav-item .nav-link {
  background-color: #c3272e;
  color: #fff;
}

#size-prices .nav .nav-item .nav-link.active {
  background-color: #0b79bf;
  color: #fff;
}

#size-prices .nav .nav-item {
  padding-right: 10px;
}

#size-prices .nav .nav-item:last-child {
  padding-right: 0px;
}

.search-input {
  border-radius: 0px;
  border-left: 0px;
}

.search-input:focus {
  box-shadow: none;
  border-color: #dee2e6;
}

.input-group-text {
  background-color: unset;
  border-radius: 0px;
  border-right: unset;
}

.fa-search {
  -webkit-text-stroke: 1px white;
}

.size-table td,
#size-prices table td,
#unit-pricing table td {
  vertical-align: middle;
}

.size-table td button,
#unit-pricing table td button {
  font-size: 14px;
}

#secure-storage p {
  font-size: 18px;
  font-weight: 400;
}

/* Default state */
.sort-icon {
  display: inline-block;
  position: relative;
  width: 10px;
  height: 10px;
  cursor: pointer;
}

.sort-icon::before,
.sort-icon::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 0px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  transition: all 0.3s ease;
}

/* Upper triangle (ascending) */
.sort-icon::before {
  top: 0;
  border-bottom: 5px solid #fff; /* Default gray */
}

/* Lower triangle (descending) */
.sort-icon::after {
  bottom: 0;
  border-top: 5px solid #fff; /* Default gray */
}

/* Active ascending state */
.sort-icon.asc::before {
  border-bottom: 5px solid #fff; /* Blue for ascending */
}

.sort-icon.asc::after {
  border-top: 5px solid transparent; /* Hide lower triangle */
}

/* Active descending state */
.sort-icon.desc::after {
  border-top: 5px solid #fff; /* Red for descending */
}

.sort-icon.desc::before {
  border-bottom: 5px solid transparent; /* Hide upper triangle */
}

#size-prices .tab-pane table tbody tr td:nth-child(1),
#size-prices .tab-pane table tbody tr td:nth-child(3) {
  font-size: 16px;
}

.floor-plan-table tbody tr td:nth-child(1) {
  font-size: 16px;
  font-weight: 700;
}

.accordion-button {
  background-color: #d9d9d9;
  color: #000;
  font-size: 14px;
}

.accordion-button:not(.collapsed) {
  background-color: #0b79bf;
  color: #fff;
}

.accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !important;
}

.form-inner-wrapper {
  border: 3px solid #0b79bf;
  padding: 30px;
  border-radius: 10px;
  background-color: #0b79bf;
}

.find-us-on-wrapper .icon-wrapper i.fa {
  width: 50px;
}

.external-footer-site {
  color: #fff !important;
  text-decoration: none !important;
  font-weight: 500;
  font-size: 14px;
}

.external-footer-site:hover {
  color: #c3272e !important;
}
