/*--------------------------------------------------------------------- File Name: style.css ---------------------------------------------------------------------*/

/*--------------------------------------------------------------------- import Files ---------------------------------------------------------------------*/

@import url(animate.min.css);
@import url(normalize.css);
@import url(icomoon.css);
@import url(css/font-awesome.min.css);
@import url(meanmenu.css);
@import url(owl.carousel.min.css);
@import url(swiper.min.css);
@import url(slick.css);
@import url(jquery.fancybox.min.css);
@import url(jquery-ui.css);
@import url(nice-select.css);

/*--------------------------------------------------------------------- skeleton ---------------------------------------------------------------------*/

* {
  box-sizing: border-box !important;
  transition: ease all 0.5s;
}

html {
  scroll-behavior: smooth !important;
}

body {
  color: #666666;
  font-size: 14px;
  font-family: "Sen", sans-serif;
  line-height: 1.80857;
  font-weight: normal;
  overflow-x: hidden;
}

a {
  color: #1f1f1f;
  text-decoration: none !important;
  outline: none !important;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  letter-spacing: 0;
  font-weight: normal;
  position: relative;
  padding: 0 0 10px 0;
  font-weight: normal;
  line-height: normal;
  color: #111111;
  margin: 0;
}

h1 {
  font-size: 24px;
}

h2 {
  font-size: 22px;
}

h3 {
  font-size: 18px;
}

h4 {
  font-size: 16px;
}

h5 {
  font-size: 14px;
}

h6 {
  font-size: 13px;
}

*,
*::after,
*::before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
  color: #212121;
  text-decoration: none !important;
  opacity: 1;
}

button:focus {
  outline: none;
}

ul,
li,
ol {
  margin: 0px;
  padding: 0px;
  list-style: none;
}

p {
  margin: 20px;
  font-weight: 300;
  font-size: 15px;
  line-height: 24px;
}

a {
  color: #222222;
  text-decoration: none;
  outline: none !important;
}

a,
.btn {
  text-decoration: none !important;
  outline: none !important;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

img {
  max-width: 100%;
  height: auto;
}

:focus {
  outline: 0;
}

.paddind_bottom_0 {
  padding-bottom: 0 !important;
}

.btn-custom {
  margin-top: 20px;
  background-color: transparent !important;
  border: 2px solid #ddd;
  padding: 12px 40px;
  font-size: 16px;
}

.lead {
  font-size: 18px;
  line-height: 30px;
  color: #767676;
  margin: 0;
  padding: 0;
}

.form-control:focus {
  border-color: #ffffff !important;
  box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.25);
}

.navbar-form input {
  border: none !important;
}

.badge {
  font-weight: 500;
}

blockquote {
  margin: 20px 0 20px;
  padding: 30px;
}

button {
  border: 0;
  margin: 0;
  padding: 0;
  cursor: pointer;
}

.full {
  float: left;
  width: 100%;
}

.layout_padding {
  padding-top: 100px;
  padding-bottom: 0px;
}

.padding_0 {
  padding: 0px;
}

/* header section start */

.header_section {
  width: 100%;
  float: left;
  background-image: url(../images/banner-bg.png);
  height: auto;
  background-size: 100%;
  background-repeat: no-repeat;
}

.header_section::after {
  content: "";
  position: absolute;
  width: 730px;
  height: 900px;
  background-color: #e0fdf9;
  left: -40px;
  top: -70px;
  z-index: -1;
  border-bottom-right-radius: 100%;
}

.header_bg {
  background-color: #e0fdf9 !important;
}

.header_bg::after {
  display: none;
}

.header_bg {
  background: #fb6818;
  border-bottom: 1px solid #ffffff;
}

.bg-light {
  background-color: transparent !important;
}

.mr-auto,
.mx-auto {
  margin: 0 auto;
  text-align: center;
}

.ml-auto,
.mx-auto {
  margin: 0 auto;
}

.navbar-expand-lg .navbar-nav .nav-link {
  padding: 3px 10px;
  font-size: 17px;
  color: #2a2a2a;
  border-radius: 5px;
  text-transform: uppercase;
}

.navbar-light .navbar-nav .active > .nav-link,
.navbar-light .navbar-nav .nav-link.active,
.navbar-light .navbar-nav .nav-link.show,
.navbar-light .navbar-nav .show > .nav-link {
  color: #2a2a2a;
}

.navbar-light .navbar-nav .nav-link:focus,
.navbar-light .navbar-nav .nav-link:hover {
  color: #2a2a2a;
}

.navbar-brand {
  margin: 0px;
  float: right;
}

.navbar {
  padding: 15px 15px;
}

.user_icon {
  padding-right: 15px;
}

.login_bt {
  width: 250px;
}

.login_bt ul {
  margin: 0px;
  padding: 0px;
}

.login_bt li a {
  float: left;
  font-size: 17px;
  color: #252525;
  text-transform: uppercase;
  padding: 5px 10px;
  background-color: transparent;
  margin: 0px 5px;
  border-radius: 5px;
}

.login_bt li a:hover {
  color: #252525;
  background-color: #e0fdf9;
}

.login_bt li.active a {
  color: #252525;
  background-color: #e0fdf9;
}

/* header section end */

/* banner section start */

.banner_section {
  width: 100%;
  float: left;
  padding: 90px 0px;
}

/* .banner_taital {
  width: 90%;
  font-size: 60px;
  color: #28454e;
  text-transform: uppercase;
  font-weight: bold;
} */

.banner_taital {
  width: 98%;
  font-size: 45px;
  color: #28454e;
  text-transform: uppercase;
  font-weight: bold;
}

.banner_text {
  width: 80%;
  font-size: 16px;
  color: #28454e;
  float: left;
  margin-left: 0px;
  margin-bottom: 0px;
}

#changing_title,
#changing_paragraph {
  transition: opacity 1s ease-in-out; /* Smooth fade effect */
}

/*
.banner_text {
  width: 80%;
  font-size: 16px;
  color: #28454e;
  float: left;
  margin-left: 0px;
} */

.started_text {
  width: 180px;
  float: left;
  margin-top: 60px;
}

.started_text a {
  width: 100%;
  float: left;
  padding: 8px 10px;
  color: #ffffff;
  background-color: #28454e;
  text-align: center;
  font-size: 18px;
  border-radius: 5px;
  text-transform: uppercase;
}

.started_text a:hover {
  color: #252525;
  background-color: #ffffff;
}

#banner_slider a.carousel-control-prev {
  left: -15px;
  top: 263px;
  color: #252525;
}

#banner_slider a.carousel-control-next {
  right: -15px;
  top: 263px;
}

#banner_slider .carousel-control-next,
#banner_slider .carousel-control-prev {
  width: 40px;
  height: 40px;
  opacity: 1;
  font-size: 40px;
  color: #00c8ac;
}

#banner_slider .carousel-control-next:focus,
#banner_slider .carousel-control-next:hover,
#banner_slider .carousel-control-prev:focus,
#banner_slider .carousel-control-prev:hover {
  color: #252525;
}

.play_icon {
  width: 100%;
  float: left;
  position: relative;
  z-index: 5;
  text-align: center;
  margin-top: 80px;
}

.play_icon::before {
  content: "" !important;
  position: absolute !important;
  top: 48px !important;
  left: 100px !important;
  width: 100px !important;
  height: 100px !important;
  transform: translate(-50%, -50%) !important;
  background-color: #ffffff !important;
  border-radius: 100% !important;
  animation: fadeEffect 1.3s infinite ease !important;
  box-shadow: 0px 0px 10px 0px !important;
  right: 0px !important;
  margin: 0 auto !important;
  z-index: -1 !important;
}

@keyframes fadeEffect {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.2);
    opacity: 0;
  }
}

/* Mobile View Adjustments */
@media (max-width: 767px) {
  .play_icon {
    position: fixed;
    bottom: 100px; /* Positioned above the chatbot container */
    left: 28px;    /* Adjust left margin as needed */
    width: 50px;
    height: 50px;
    background-color: #0d5560; /* Accent background for contrast */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3000; /* Ensure the play icon appears above the chatbot */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    cursor: pointer !important;
    transition: bottom 0.3s ease;
  }
  /* hides the video-play button when the class is added (mobile only) */
@media (max-width: 767px){
  .play_icon.hidden{display:none!important;}
}

  .play_icon img {
    width: 24px;
    height: 24px;
  }
  /* Tooltip for the play icon */
  .play_icon:hover::after {
    content: "Watch Archelolab Video" !important;
    position: absolute !important;
    bottom: 110% !important; /* Tooltip appears above the icon */
    left: 120% !important;
    transform: translate(-50%, -50%) !important;
    background: #37ccaa !important;
    color: #28454e !important;
    padding: 8px 12px !important;
    border-radius: 4px !important;
    white-space: nowrap !important;
    font-size: 12px !important;
  }

  /* Pseudo-element animation matching play icon size in mobile */
  .play_icon::before {
    content: "";
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 50px  !important;
    height: 50px  !important;
    border-radius: 50% !important;
    background-color: #15deae !important;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5) !important;
    z-index: -1 !important;
    transform: translate(-50%, -50%) !important;
    animation: fadeEffect 1.3s infinite ease !important;
  }
}

/* Video Modal Mobile Fix */
@media (max-width: 767px) {
  .video-modal {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px; /* Optional: add some padding around the modal */
  }
  .video-modal-content {
    width: 100%;
    max-width: 90%;  /* Adjust max-width as needed */
    margin: 0 auto;
    position: relative;
  }
  .video-modal iframe {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;  /* Maintain a 16:9 aspect ratio */
  }
}

/* banner section end */

/* select box section start */

.select_box_section {
  width: 100%;
  float: left;
  margin-bottom: 100px;
  border-top: 10px solid #000;
  border-radius: 20px;
}

.select_box_main {
  width: 100%;
  background-color: #ffffff;
  height: auto;
  padding: 40px 20px;
  border-radius: 20px;
  box-shadow: 0px 20px 50px 0px #eaeaea !important;
}

.md-outline.select-wrapper + label {
  top: 0.5em !important;
  z-index: 2 !important;
}

.nice-select {
  width: 100%;
  background-color: transparent !important;
  border: 1px solid #252525;
  border-radius: 5px;
}

.nice-select:after {
  width: 10px;
  height: 10px;
}

.nice-select {
  color: #d0d1d2;
  font-size: 18px;
}

.enter_bt {
  width: 100%;
  float: left;
  font-size: 18px;
  color: #d0d1d2;
  background-color: transparent;
  padding: 10px;
  border: 1px solid #252525;
  border-radius: 5px;
}

input.enter_bt::placeholder {
  color: #d0d1d2;
}

.search_btn {
  width: 170px;
  margin: 0 auto;
  text-align: center;
  padding-top: 50px;
}

.search_btn a {
  width: 100%;
  float: left;
  font-size: 18px;
  color: #0f0f0f;
  text-transform: uppercase;
  background-color: #e0fdf9;
  padding: 10px;
  text-align: center;
  border-radius: 5px;
}

.search_btn a:hover {
  color: #ffffff;
  background-color: #28454e;
}

/* select box section end */

/* services section start */

.services_section {
  width: 100%;
  float: left;
}

.services_taital {
  width: 100%;
  float: left;
  font-size: 40px;
  color: #232323;
  font-weight: bold;
  text-transform: uppercase;
}

.services_text {
  width: 100%;
  float: left;
  font-size: 15px;
  color: #232323;
  margin-left: 0px;
  padding-top: 20px;
}

.readmore_btn {
  width: 170px;
  float: left;
  margin-top: 80px;
}

.readmore_btn a {
  width: 100%;
  float: left;
  font-size: 18px;
  color: #0f0f0f;
  text-transform: uppercase;
  background-color: #e0fdf9;
  padding: 10px;
  border-radius: 5px;
  text-align: center;
}

.readmore_btn a:hover {
  color: #ffffff;
  background-color: #28454e;
}

.services_box {
  width: 100%;
  display: flex;
  margin-top: 20px;
}

.fashion_text {
  width: 100%;
  float: left;
  font-size: 20px;
  color: #232323;
  text-align: center;
  text-transform: uppercase;
  font-weight: bold;
}

.services_box_left {
  width: 220px;
  height: auto;
  padding: 50px 0px;
  text-align: center;
  box-shadow: 0px 0px 10px 0px;
  top: 50px;
  position: relative;
  border-radius: 5px;
}

.services_box_right {
  width: 220px;
  height: auto;
  padding: 50px 0px;
  text-align: center;
  box-shadow: 0px 0px 10px 0px;
  margin-left: 20px;
  border-radius: 5px;
}

.services_box_2 {
  width: 100%;
  display: flex;
  margin-top: 20px;
  padding-left: 240px;
  position: relative;
  top: -50px;
}

/* blog section start */

.blog_section {
  width: 100%;
  float: left;
}

.blog_taital {
  width: 100%;
  float: left;
  font-size: 50px;
  color: #292929;
  text-transform: uppercase;
  font-weight: bold;
  text-align: center;
}

.blog_section_2 {
  width: 100%;
  float: left;
  padding-top: 60px;
}

.blog_img {
  width: 100%;
  float: left;
  position: relative;
}

.blog_img img {
  min-height: 380px;
  margin-top: 10px;
}

.number_text {
  width: 40px;
  height: 40px;
  font-size: 20px;
  color: #fff;
  background-color: #28454e;
  text-align: center;
  text-transform: uppercase;
  position: absolute;
  justify-content: center;
  align-items: center;
  padding: 8px;
  top: 0px;
}

.callnow_btn {
  width: 100%;
  display: flex;
  padding-top: 30px;
}

.chat_bt {
  width: 170px;
  float: right;
}

.chat_bt a {
  width: 100%;
  float: left;
  font-size: 16px;
  color: #232323;
  text-align: center;
  background-color: #e0fdf9;
  padding: 8px;
}

.chat_bt a:hover {
  color: #ffffff;
  background-color: #28454e;
}

.call_bt {
  width: 170px;
  float: right;
  margin-left: 20px;
}

.call_bt a {
  width: 100%;
  float: right;
  font-size: 16px;
  color: #232323;
  text-align: center;
  background-color: #e0fdf9;
  padding: 8px;
}

.call_bt a:hover {
  color: #ffffff;
  background-color: #28454e;
}

.call_bt.active a {
  color: #ffffff;
  background-color: #28454e;
}

#main_slider a.carousel-control-prev {
  left: -80px;
  top: 150px;
}

#main_slider a.carousel-control-next {
  right: -80px;
  top: 150px;
}

#main_slider .carousel-control-next,
#main_slider .carousel-control-prev {
  width: 40px;
  height: 40px;
  opacity: 1;
  font-size: 50px;
  color: #252525;
}

#main_slider .carousel-control-next:focus,
#main_slider .carousel-control-next:hover,
#main_slider .carousel-control-prev:focus,
#main_slider .carousel-control-prev:hover {
  color: #00c8ac;
}

/* blog section end */

/* about_section section start */

.about_section {
  width: 100%;
  float: left;
}

.about_taital_main {
  width: 100%;
  float: left;
  padding: 180px 0px 181px 115px;
  background-color: #e0fdf9;
  height: auto;
  background-size: 100%;
}

.about_taital {
  width: 100%;
  float: left;
  font-size: 40px;
  color: #262626;
  font-weight: bold;
  text-transform: uppercase;
}

.about_text {
  width: 60%;
  float: left;
  font-size: 20px;
  color: #4c4c4b;
  margin: 0px;
  padding-top: 20px;
  font-weight: bold;
}

.btn_main {
  width: 100%;
  float: left;
  padding-top: 40px;
}

.started_bt {
  width: 175px;
  float: left;
}

.started_bt a {
  width: 100%;
  float: left;
  font-size: 18px;
  background-color: #28454e;
  color: #ffffff;
  text-align: center;
  padding: 8px;
}

.started_bt a:hover {
  color: #ffffff;
  background-color: #df3a14;
}

.buy_bt {
  width: 175px;
  float: left;
}

.buy_bt a {
  width: 100%;
  float: left;
  font-size: 18px;
  background-color: #28454e;
  color: #ffffff;
  text-align: center;
  padding: 8px;
  margin-left: 10px;
}

.buy_bt a:hover {
  color: #ffffff;
  background-color: #df3a14;
}

.buy_bt.active a {
  color: #ffffff;
  background-color: #df3a14;
}

.about_img {
  width: 100%;
  height: 100%; /* Ensure the parent has a defined height via flex or fixed value */
  display: flex;
  align-items: center;
  justify-content: center;
  /* Remove float if using flex */
}

.about_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*make sure the parent container (or the row) is set up with flex properties so both columns adjust to the same height.*/
.about_section .container-fluid .row {
  display: flex;
  align-items: stretch;
}


.padding_left0 {
  padding-left: 0px;
}

/* about section end */

/* pricing section start */

.pricing_section {
  width: 100%;
  float: left;
}

.pricing_taital {
  width: 100%;
  float: left;
  font-size: 50px;
  color: #2c2b2b;
  text-align: center;
  font-weight: bold;
  text-transform: uppercase;
}

.pricing_section_2 {
  width: 100%;
  float: left;
  margin-top: 40px;
}

.pricing_box {
  width: 100%;
  background-color: #ffffff;
  height: 305px;
  padding: 0px 0px 20px 0px;
  border-radius: 5px;
}

.pricing_box:hover {
  box-shadow: 0px 0px 10px 0px;
}

.pricing_box.active {
  box-shadow: 0px 0px 10px 0px;
}

.pricing_box .readmore_bt a:hover {
  color: #ffffff;
  background-color: #28454e;
}

.pricing_box.active .readmore_bt a {
  color: #ffffff;
  background-color: #28454e;
}

.pricing_box:hover .regular_text {
  color: #252525;
  background-color: #e0fdf9;
}

.regular_text {
  width: 100%;
  font-size: 18px;
  text-align: center;
  text-transform: uppercase;
  color: #ffffff;
  padding: 10px;
  background-color: #28454e;
  border-radius: 5px;
}

.taital_main {
  width: 70%;
  display: flex;
  margin: 0 auto;
  text-align: center;
  justify-content: center;
}

.dolor_text {
  font-size: 26px;
  color: #2c2b2b;
  font-weight: bold;
  padding-top: 20px;
}

.dolor_text_1 {
  font-size: 50px;
  color: #00c8ac;
  font-weight: bold;
}

.month_text {
  font-size: 16px;
  color: #00c8ac;
  margin: 0px;
  padding-top: 30px;
  text-transform: uppercase;
}

.using_text {
  width: 45%;
  font-size: 16px;
  text-align: center;
  color: #2a2a29;
  margin: 0 auto;
  padding: 20px 0px;
}

.readmore_bt {
  width: 170px;
  margin: 0 auto;
  text-align: center;
  padding-top: 30px;
}

.readmore_bt a {
  width: 100%;
  float: left;
  font-size: 18px;
  background-color: #e0fdf9;
  color: #28454e;
  text-align: center;
  padding: 8px;
  border-radius: 5px;
  text-transform: uppercase;
}

.readmore_bt a:hover {
  color: #ffffff;
  background-color: #28454e;
}

/* pricing section end */

/* customer section start */

.customer_section {
  width: 100%;
  float: left;
  margin-bottom: 90px;
}

.customer_taital {
  width: 100%;
  float: left;
  font-size: 40px;
  color: #232323;
  font-weight: bold;
  text-transform: uppercase;
  text-align: center;
}

.customer_section_2 {
  width: 70%;
  margin: 0 auto;
  margin-top: 50px;
  padding-bottom: 60px;
}

.box_main {
  width: 100%;
  float: left;
  background-color: #ffffff;
  padding: 0px 50px 40px 50px;
  box-shadow: 0px 0px 18px -6px;
  margin-bottom: 10px;
}

.customer_main {
  width: 100%;
  margin-top: 50px;
}

.customer_left {
  width: 23%;
  float: left;
}

.customer_right {
  width: 70%;
  float: left;
  margin-top: 40px;
}

.customer_name {
  width: 100%;
  float: left;
  font-size: 26px;
  font-weight: bold;
  color: #001431;
  padding-bottom: 0px;
  text-transform: uppercase;
}

.enim_text {
  width: 100%;
  float: left;
  font-size: 16px;
  color: #232323;
  margin: 0px;
  padding-bottom: 30px;
}

.web_text {
  width: 100%;
  float: left;
  font-size: 18px;
  margin: 0px;
  color: #0d5560;
}

.box_main::after {
  content: "";
  position: absolute;
  width: 300px;
  height: 430px;
  background-color: #defbf7;
  left: -40px;
  top: -40px;
  z-index: -1;
}

#my_slider a.carousel-control-prev {
  left: initial;
  top: 410px;
  right: 280px;
  background-color: #28454e;
  color: #ffffff;
}

#my_slider a.carousel-control-next {
  right: 220px;
  top: 410px;
}

#my_slider .carousel-control-next,
#my_slider .carousel-control-prev {
  width: 55px;
  height: 55px;
  background: #e0fdf9;
  opacity: 1;
  font-size: 40px;
  color: #252525;
}

#my_slider .carousel-control-next:focus,
#my_slider .carousel-control-next:hover,
#my_slider .carousel-control-prev:focus,
#my_slider .carousel-control-prev:hover {
  color: #ffffff;
  background-color: #28454e;
}

/* customer section end */

/* contact section start */

.contact_section {
  width: 100%;
  float: left;
}

.contact_taital {
  width: 100%;
  float: left;
  font-size: 40px;
  color: #121111;
  text-transform: uppercase;
  text-align: center;
  font-weight: bold;
}

.contact_section_2 {
  width: 60%;
  margin: 0 auto;
  padding-bottom: 70px;
}

.contact_section .map_form_container .map_container {
  display: none;
}

.contact_section .map_form_container.map_show form {
  display: none;
}

.contact_section .map_form_container.map_show .map_container {
  display: block;
}

.mail_section {
  width: 100%;
  float: left;
}

.mail_text {
  width: 100%;
  float: left;
  font-size: 16px;
  color: #4f4e4e;
  border: 1px solid #8e8e8e;
  background-color: transparent;
  padding: 14px 15px;
  margin-top: 40px;
  border-radius: 8px;
}

input.mail_text::placeholder {
  color: #4f4e4e;
}

.massage-bt {
  color: #4f4e4e;
  width: 100%;
  height: 130px;
  font-size: 18px;
  background-color: transparent;
  padding: 40px 15px 0px 15px;
  border: 1px solid #8e8e8e;
  margin-top: 40px;
  border-radius: 8px;
}

textarea#comment::placeholder {
  color: #4f4e4e;
}

.contact_btn_main {
  width: 51%;
  margin: 0 auto;
  text-align: center;
}

.send_bt {
  width: 160px;
  float: left;
}

.send_bt a {
  width: 100%;
  text-align: center;
  font-size: 18px;
  color: #ffffff;
  background-color: #e0fdf9;
  padding: 10px;
  text-transform: uppercase;
  margin-top: 30px;
  display: block;
  font-weight: bold;
  border-radius: 5px;
  font-family: "poppins", sans-serif;
}

.send_bt a:hover {
  color: #fff;
  background-color: #00c6aa;
}

.send_bt.active a {
  color: #ffffff;
  background-color: #0d5560;
}

.map_bt {
  width: 160px;
  float: left;
  margin-left: 15px;
}

.map_bt a {
  width: auto;
  text-align: center;
  font-size: 18px;
  color: #28454e;
  background-color: #e0fdf9;
  padding: 10px 60px;
  text-transform: uppercase;
  margin-top: 30px;
  display: block;
  font-weight: bold;
  border-radius: 5px;
  font-family: "poppins", sans-serif;
}

.map_bt a:hover {
  color: #fff;
  background-color: #0d5560;
}

.map_center {
  width: auto;
}

.map_main {
  width: 100%;
  float: left;
  padding-top: 40px;
}

/* contact section end */

/* footer section start */

.footer_section {
  width: 100%;
  float: left;
  background-color: #28454e;
  height: auto;
  padding-bottom: 65px;
}

.footer_logo {
  width: 100%;
  float: left;
  text-align: center;
}

.input_main {
  width: 100%;
  display: flex;
  padding-top: 40px;
}

.email_text {
  width: 90%;
  font-size: 16px;
  color: #363636;
  background-color: #ffffff;
  border-radius: 0px;
  text-transform: uppercase;
  border-radius: 30px;
  border: 0px !important;
  padding: 10px 20px;
  margin-right: 30px;
}

input.email_text::placeholder {
  color: #363636;
}

.subscribe_bt {
  width: 300px;
  float: left;
}

.subscribe_bt a {
  width: 100%;
  float: left;
  background-color: #ec5121;
  color: #ffffff;
  text-align: center;
  padding: 10px;
  text-transform: uppercase;
  border-radius: 30px;
  font-size: 18px;
}

.subscribe_bt a:hover {
  background-color: #ffffff;
  color: #363636;
}

.footer_section_2 {
  width: 100%;
  float: left;
  padding-top: 50px;
}

.useful_text {
  width: 100%;
  font-size: 30px;
  color: #ffffff;
  font-weight: bold;
}

.footer_text {
  width: 100%;
  float: left;
  font-size: 16px;
  color: #ffffff;
  margin: 0px;
  padding-top: 10px;
}

.footer_menu {
  width: 100%;
  float: left;
}

.footer_menu ul {
  margin: 0px;
  padding: 0px;
}

.footer_menu li {
  font-size: 16px;
  color: #ffffff;
}

.footer_menu li a {
  color: #ffffff;
}

.footer_menu li a:hover {
  color: #00c6aa;
}

.location_text {
  width: 100%;
  float: left;
  font-size: 16px;
  color: #fffcfc;
  padding-top: 10px;
}

.useful_text {
  padding-top: 30px;
}

.footer_section_2 {
  padding-top: 20px;
}

.location_text a {
  color: #fffcfc;
}

.location_text a:hover {
  color: #f4d739;
}

.padding_left_15 {
  padding-left: 15px;
}

.social_icon {
  width: 100%;
  float: left;
}

.social_icon ul {
  margin: 0px;
  padding: 0px;
  display: inline-block;
}

.social_icon li {
  float: left;
}

.social_icon li a {
  float: left;
  padding: 5px 15px;
  background-color: #ffffff;
  color: #28454e;
  border-radius: 100%;
  font-size: 18px;
  margin-right: 5px;
  width: 43px;
  text-align: center;
  margin-top: 10px;
}

.social_icon li a:hover {
  background-color: #e0fdf9;
  color: #252525;
}

/* footer section end */

/* copyright section start */

.copyright_section {
  width: 100%;
  float: left;
  background-color: #28454e;
  height: auto;
}

.copyright_text {
  width: 100%;
  float: left;
  font-size: 16px;
  color: #ffffff;
  text-align: center;
  margin-left: 0px;
}

.copyright_text a {
  color: #ffffff;
}

.copyright_text a:hover {
  color: #00c6aa;
}

/* copyright section end */

.margin_top90 {
  margin-top: 90px;
}

/* 28th January 2025 */

/* Video modal styling */
.video-modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 9999; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  background-color: rgba(0, 0, 0, 0.8); /* Black background with transparency */
}

.video-modal-content {
  position: relative;
  margin: 10% auto;
  padding: 0;
  width: 80%;
  max-width: 700px;
}

.video-close {
  position: absolute;
  top: -10px;
  right: -10px;
  color: white;
  font-size: 30px;
  font-weight: bold;
  cursor: pointer;
}

.video-close:hover,
.video-close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

/* /28th January 2025 */
@media (max-width: 991px) {
  .login_bt {
    margin: 0 auto;
    float: none;
    text-align: center;
  }
  .login_bt ul {
    display: flex;
    justify-content: center;
    padding: 0;
    margin: 0;
  }
  .login_bt li,
  .login_bt li a {
    float: none;
    display: inline-block;
  }
}

  /* Container for the animated year digits */
  #animated-year {
    display: inline-flex;
  }
  /* Each digit styled individually */
  .year-digit {
    display: inline-block;
    color: white;
    font-size: 16px;
    font-weight: bold;
    perspective: 1000px; /* Needed for 3D effect */
  }
  /* Define the flip keyframes (rotating around the X-axis) */
  @keyframes flip {
    0% {
      transform: rotateX(0deg);
    }
    50% {
      transform: rotateX(90deg);
    }
    100% {
      transform: rotateX(0deg);
    }
  }
  /* When added, this class triggers the flip animation */
  .flip {
    animation: flip 0.8s ease-in-out;
  }
/***********************************/
/*---------------------------------------------------------------------
   Sticky Social Sidebar - Desktop (Default)
---------------------------------------------------------------------*/
/***********************************/
/* Default (Desktop > 820px): Slide-in Hover */
/***********************************/
.sticky-social-container {
  position: fixed;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  z-index: 1000;
}

.sticky-social-container ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sticky-social-container ul li {
  margin: 10px 0;
  overflow: hidden;
}

.sticky-social-container ul li a {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background: #333; /* Body background color */
  color: #fff;
  text-decoration: none;
  padding: 8px 8px;
  border-radius: 30px 0 0 30px; /* Changed to get a more curved border */
  width: 178px;
  transform: translateX(140px);
  transition: transform 0.3s ease;
}

/* Hover slides link into full view */
.sticky-social-container ul li:hover a {
  transform: translateX(0);
}

/* Optional space if using icon fonts */
.sticky-social-container ul li a i {
  margin-right: 10px;
  min-width: 20px;
  text-align: center;
}

/* Staggered transition delays for each icon */
.sticky-social-container ul li:nth-child(1) a { transition-delay: 0.05s; }
.sticky-social-container ul li:nth-child(2) a { transition-delay: 0.1s; }
.sticky-social-container ul li:nth-child(3) a { transition-delay: 0.15s; }
.sticky-social-container ul li:nth-child(4) a { transition-delay: 0.2s; }
.sticky-social-container ul li:nth-child(5) a { transition-delay: 0.25s; }
.sticky-social-container ul li:nth-child(6) a { transition-delay: 0.3s; }

/* If in the footer (.footer_section), use a different background color */
.footer_section .sticky-social-container ul li a {
  background: #3de7be; /* Footer icons background color */
  color: #222;         /* For contrast */
}

/* Logo images (if used) on desktop */
.sticky-social-container ul li a img {
  max-width: 24px;
  height: auto;
  margin-right: 10px;
  display: block;
}

/***********************************/
/* Mobile & Small Tablets (<= 820px): No Slide-in, Circular Icons */
/***********************************/
@media (max-width: 820px) {
  /* Remove fixed position so it flows in the footer */
  .footer_section .sticky-social-container {
    position: static;
    transform: none;
    margin: 20px auto;
    text-align: center;
  }

  /* Icons in a horizontal row */
  .footer_section .sticky-social-container ul {
    display: inline-block;
    padding: 0;
    margin: 0;
  }
  .footer_section .sticky-social-container ul li {
    display: inline-block;
    margin: 0 5px;
    overflow: visible;
  }

  /* Circular buttons, no text labels, no slide-in effect */
  .footer_section .sticky-social-container ul li a {
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-radius: 50%;
    padding: 0;
    transform: none;
    transition: none;
    background: transparent !important; /* Remove colored background */
    color: #222; /* Or #fff; adjust as desired for the icon color */
  }

  /* Images scaled to fit the 40×40 circle */
  .footer_section .sticky-social-container ul li a img {
    max-width: 60%;
    height: auto;
    margin: 0 auto;
    display: block;
  }

  /* Hide text spans (like "Facebook") for a clean circle icon */
  .footer_section .sticky-social-container ul li a span {
    display: none;
  }

  /* Simple hover effect if desired */
  .footer_section .sticky-social-container ul li a:hover {
    opacity: 0.8;
  }
}
/* 1) Default (body) background & text color on icons */
.sticky-social-container:not(.inside-footer) ul li a {
  background: #28454e;  /* Body background color */
  color: #fff;       /* Text/icon color */
}

/* 2) When inside the footer, switch to the footer color scheme */
.sticky-social-container.inside-footer ul li a {
  background: #3de7be; /* Footer background color */
  color: #222;         /* Text/icon color for contrast */
}
/* When the body is in preloading mode, hide the sticky social container */
body.preloader .sticky-social-container {
  display: none !important;
}

/*---------------------------------------------------------------------
   Mobile Responsive Overrides (max-width: 820px)
   - Display the icons as small circular buttons without hover effects.
   - Hide text labels for a clean mobile look.
---------------------------------------------------------------------*/
@media (max-width: 820px) {
  .footer_section .sticky-social-container {
    position: static;      /* Remove fixed positioning */
    transform: none;       /* Remove vertical centering */
    margin: 20px auto;     /* Vertical spacing */
    text-align: center;    /* Center the content */
  }
  .footer_section .sticky-social-container ul {
    display: inline-block;
    padding: 0;
    margin: 0;
  }
  .footer_section .sticky-social-container ul li {
    display: inline-block;
    margin: 0 5px;
    overflow: visible;
  }
  .footer_section .sticky-social-container ul li a {
    display: inline-block;
    width: 40px;           /* Circular button width */
    height: 40px;          /* Circular button height */
    line-height: 40px;     /* Vertically center the image */
    text-align: center;
    transform: none;       /* No slide-in effect */
    border-radius: 50%;    /* Circular shape */
    padding: 0;
    transition: none;
    background: transparent !important;  /* Remove background color */
  }
  .footer_section .sticky-social-container ul li a img {
    max-width: 60%;
    margin: 0 auto;
    display: block;
  }
  .footer_section .sticky-social-container ul li a span {
    display: none;         /* Hide text labels */
  }
  .footer_section .sticky-social-container ul li a:hover {
    opacity: 0.8;
  }
}
/* Prevent horizontal scroll on small screens */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

/* Improve footer responsiveness for small devices */
@media (max-width: 768px) {
  .footer_section .footer_section_2 .row > [class*="col-"] {
    margin-bottom: 20px; /* Add spacing between stacked columns */
  }
}

html {
  scroll-behavior: smooth !important; /* Ensures smooth scrolling in modern browsers */
}

/* Prevent overlap by a sticky/fixed navbar */
#bar-search {
  scroll-margin-top: 70px; /* Adjust this if your fixed navbar height differs */
}


/* 7th February 2025 - Preloader Animation */
/* Global styles from your original CSS */
/* Preloader styles */
/* prevent white flash on slow connections */

body.preloader-active{overflow:hidden!important}
#site-wrapper[hidden]{display:none!important}
/* Hide the navbar while the body carries the preloader flag */
body.preloader-active #mainNavbar {
    opacity: 0;
    pointer-events: none;   /* really no clicks */
}


.preloader {

  position: fixed;
  inset:0;
  top: 0;

  left: 0;

  width: 100vw;

  height: 100vh;

  background-image: radial-gradient(

    circle farthest-corner at 10% 20%,

    rgba(0, 152, 155, 1) 0.1%,

    rgba(0, 94, 120, 1) 94.2%

  );

  background-size: 100%;

  display: flex !important;
  flex-direction:column;    /* word on top, icons below */
  justify-content: center;

  align-items: center;

  z-index: 9999 !important; /*need sticky social icons not in show preloader*/

  overflow: hidden;

}



/* Loading container and text */

.loading-container {

  text-align: center;

  color: #fff;

  font-family: "League Spartan", serif;

}



/* Loading Line */

.loading-container:before {

  content: "";

  position: absolute;

  width: 100%;

  height: 3px;

  background-color: #fff;

  bottom: 0;

  left: 0;

  border-radius: 10px;

  animation: movingLine 2.4s infinite ease-in-out;

}



/* Loading line animation keyframes */

@keyframes movingLine {

  0% {

    opacity: 0;

    width: 0;

  }



  33.3%,

  66% {

    opacity: 0.8;

    width: 100%;

  }



  85% {

    width: 0;

    left: initial;

    right: 0;

    opacity: 1;

  }



  100% {

    opacity: 0;

    width: 0;

  }

}



.loading-text {
  font-size: 5vw;
  letter-spacing: 10px;
  display: flex;
  justify-content: space-evenly;
}



.loading-text span {

  animation: moveLetters 2.4s infinite ease-in-out;

  transform: translatex(0);

  position: relative;

  display: inline-block;

  opacity: 0;

  text-shadow: 0px 2px 10px rgba(46, 74, 81, 0.3);

}



.loading-text span:nth-child(1) {

  animation-delay: 0.1s;

}

.loading-text span:nth-child(2) {

  animation-delay: 0.2s;

}

.loading-text span:nth-child(3) {

  animation-delay: 0.3s;

}

.loading-text span:nth-child(4) {

  animation-delay: 0.4s;

}

.loading-text span:nth-child(5) {

  animation-delay: 0.5s;

}

.loading-text span:nth-child(6) {

  animation-delay: 0.6s;

}

.loading-text span:nth-child(7) {

  animation-delay: 0.7s;

}



@keyframes moveLetters {

  0% {

    transform: translateX(-15vw);

    opacity: 0;

  }



  33.3%,

  66% {

    transform: translateX(0);

    opacity: 1;

  }



  100% {

    transform: translateX(15vw);

    opacity: 0;

  }

}



.socials {

  position: fixed;

  bottom: 16px;

  right: 16px;

  display: flex;

  align-items: center;

}



.social-link {

  color: #fff;

  display: flex;

  align-items: center;

  cursor: pointer;

  text-decoration: none;

  margin-right: 12px;

}



/* Main content is hidden initially */

.main-content {

  display: none;

  padding: 20px;

}
/* Keep body from scrolling while loader is up */
.preloader-active {
  overflow: hidden;
}

/* Small fade-out animation so the swap feels smooth */
.preloader.fade-out {
  transition: opacity .45s ease;
  opacity: 0;
  pointer-events: none;          /* ignores accidental taps during fade */
}
/* ░░ Hide chatbot while the body is in “preloading” mode ░░ */
body.preloader-active #chatbot-container,
body.preloader-active #chatbot {
  visibility: hidden !important;   /* invisible but still in DOM */
  pointer-events: none !important; /* prevents accidental taps */
}

/* ░░ Make 100 % sure the loader is on top ░░ */
.preloader {
  z-index: 12000 !important;       /* higher than any other overlay */
}

/* Ensure Always Visible on Mobile/Tablet/Desktop */
@media (max-width: 991px) {
  .preloader {
    display: flex !important;
  }
}

/*End of preloader*/

  /* Add padding so content isn’t hidden behind fixed header */
  body {
    padding-top: 70px; /* Adjust based on your header height */
  }
  /* New class for the gradient background */
  .navbar-gradient {
    background: linear-gradient(90deg, rgb(61, 231, 190) 0.1%, rgba(0, 94, 120, 1) 94.2%);
  }


 /* Override the default navbar-toggler-icon for navbar-light so it appears dark */
  .navbar-dark .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0,0,0,0.7)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
  }
      /* So the body smoothly moves down/up when navbar expands/collapses */
  body {
    transition: margin-top 0.3s ease;
  }
 .navbar-dark .navbar-toggler {
   border-color: rgba(0,0,0,0.2);
 }

 :root {
        --primary-text: #0d5560;
        --secondary-text: #e9fff3;
        --white-text-white: #ffffff;
        --black-text-black: #000000;
      }



 body::-webkit-scrollbar {
        width: 8px;
      }



 body::-webkit-scrollbar-track {
        background-color: var(--secondary-text);
        border-radius: 100px;
      }



 body::-webkit-scrollbar-thumb {
        background-color: var(--primary-text);
        border-radius: 100px;
      }

 @media (min-width: 768px) and (max-width: 991px) {
   .navbar-toggler {
     background-color: transparent !important;
   }
 }

     .notification-container {
          position: fixed;
          top: 20px;
          right: 20px;
          z-index: 1050; /* Ensures the notifications are above other elements */
          display: flex;
          flex-direction: column;
          gap: 10px;
        }

        /* Optional fade-out animation for when notifications are dismissed */
        .fade-out {
          animation: fadeOut 0.5s forwards;
        }

        @keyframes fadeOut {
          to {
            opacity: 0;
            transform: translateY(-20px);
          }
        }

/* If you have a transparent navbar, e.g., with .navbar-transparent */
.navbar-expand-lg .navbar-nav .nav-link:hover,
.navbar-expand-lg .navbar-nav .nav-link:focus {
  color: #37ccaa !important;
}
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus {
  color: #090808 !important;
}

/* ─────────────────────────────────────────────
   CALLOUT BUTTON — keeps colour logic separate
   Works in both navbar states (transparent & scrolled)
   ───────────────────────────────────────────── */
.cta-link{
  /* default: transparent navbar (white text all around) */
  /*color:#2a2a2a!important;            teal text */
  /*border:1px solid #37ccaa;*/
  border-radius:4px;
  padding:6px 14px;
  transition:all .25s ease;
}

/* hover / focus while still at the top */
.navbar-dark .cta-link:hover,
.navbar-dark .cta-link:focus{
  background: #28454e;
  color:#fff!important;
}

/* navbar AFTER SCROLL (you add .navbar-light) */
.navbar-light .cta-link{
  background:#37ccaa;
  color:#2a2a2a!important;              /* keep it readable */
  border-color:#37ccaa;
}

/* hover / focus after scroll */
.navbar-light .cta-link:hover,
.navbar-light .cta-link:focus{
  background:#2ab294;               /* a touch darker on hover */
  border-color:#2ab294;
}


/* ──────────────────────────────────────────────────────────────
   AVATAR  ▼  PROFILE  DROPDOWN
────────────────────────────────────────────────────────────────*/

/* 1) anchor the whole hover-area under the avatar */
#profileDropdown {
  position: relative;
}

/* 1-b) invisible bridge so the mouse doesn’t “fall through” the 8 px gap */
#profileDropdown::after {
  content: "";
  position: absolute;
  top: 100%;              /* starts right below the avatar */
  left: 0;
  width: 100%;
  height: 16px;           /* covers gap + arrow */
}

/* 2) curved dropdown panel (initially hidden) */
#profileDropdown .dropdown-menu {
  display: block !important;
  visibility: hidden;
  opacity: 0;
  transform: translateY(8px);
  transition:
    visibility 0s linear .18s,
    opacity     .18s ease,
    transform   .18s ease;
  position: absolute !important;
  top: calc(100% + 8px) !important;   /* keep the visual gap */
  right: 0 !important;
  margin: 0 !important;
  border-radius: .25rem;
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
  background-color: #fff;
  padding: .5rem 0;
}

/* 3) center the little white arrow under the avatar */
/* 3) perfectly centre the little white arrow beneath the avatar */
#profileDropdown .dropdown-menu::before{
  content:"";
  position:absolute;
  top:-0.25rem;          /* sits in the 8 px gap you already created   */
  right:13px;            /* 40 px avatar ⇒ 20 px to centre;            *
                          * arrow half-width ≈12 px; 20-12 = 8;        *
                          * nav-item has ~5 px horizontal padding;     *
                          * 8 + 5 = 13  → arrow tip dead-centre        */
  width:0;
  height:0;
  border-left: .75rem solid transparent;
  border-right:.75rem solid transparent;
  border-bottom:.75rem solid #fff;
  transform:none;        /* make sure no leftover translateX runs     */
}
/* ——— FINAL override: place arrow under the avatar, right-aligned ——— */
#profileDropdown .dropdown-menu::before{
  left:auto !important;          /* cancel the old 50 % rule                   */
  right:120px !important;          /* 40 px avatar: 20 − 12 = 8  (tweak ±2 px)   */
  transform:none !important;     /* remove previous translateX                 */
}



/* NEW — enlarge the “hot zone” so a near hover also opens the menu */
#profileDropdown::before {
  content: "";
  position: absolute;
  top:   -10px;   /* extend 10 px around the avatar */
  left:  -10px;
  right: -10px;
  bottom:-10px;
}


/* 4) show-state (for keyboard fallback) */
#profileDropdown .dropdown-menu.show {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0s;
}

/* 5) kill Bootstrap caret */
.dropdown-toggle::after { display: none !important; }

/* 6) avatar sizing */
#profileDropdown img.rounded-circle {
  width: 40px;
  height: 40px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* 7) cart / avatar / search icons in one row */
.login_bt ul {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0; padding: 0;
}
.login_bt ul li { list-style: none; }

/* 8) reveal dropdown on hover OR keyboard focus */
#profileDropdown:hover           > .dropdown-menu,
#profileDropdown:focus-within    > .dropdown-menu {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0s;
}