.s-products-container,
.s-products-img {
  width: 100%;
  height: clamp(1px, 33.698vw, 1294px) !important;
}

.p-share,
.p-share-1 {
  width: clamp(1px, 1.3542vw, 52px);
  height: clamp(1px, 1.3542vw, 52px);
}

.s-products-container .our-btn {
  border: clamp(1px, 0.2vw, 6px) solid #ffffff !important;
  padding-bottom: 1px;
}

.s-products-container .our-btn:hover {
  border: clamp(1px, 0.2vw, 6px) solid #ffffff !important;
  background-color: #ffffff !important;
}

.s-products-container .our-btn:hover a {
  color: #076abd !important;
}

.s-products-container .our-btn:hover .p-share {
  display: none !important;
}

.s-products-container .our-btn:hover .p-share-1 {
  display: block !important;
}

.s-close {
  width: clamp(1px, 1.042vw, 40px);
  height: clamp(1px, 1.042vw, 40px);
}

.w3-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999999;
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
  overflow: hidden;
}

.w3-modal-content {
  position: relative;
  margin: auto;
  background-color: white;
  max-width: clamp(1px, 47.24vw, 1814px);
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.2);
}

.modal-open {
  overflow: hidden;
}

.disable-pointer {
  pointer-events: none;
}

.share-icon img {
  width: clamp(1px, 3.907vw, 150px);
  height: clamp(1px, 3.907vw, 150px);
}

.copy-btn {
  width: clamp(1px, 6.25vw, 240px);
  height: clamp(1px, 2.865vw, 110px);
  border: clamp(1px, 0.2vw, 6px) solid #076abd !important;
  border-radius: 100px;
}

.copy-btn:hover,
.copy-btn:hover a {
  border: clamp(1px, 0.2vw, 6px) solid #076abd !important;
  background-color: #076abd;
  color: #ffffff !important;
}

.link-input {
  border: none;
  outline: none;
  flex-grow: 1;
  color: #333;
  align-items: start !important;
  background-color: transparent !important;
  border-bottom: 1px solid #333333 !important;
  --bs-border-radius: 0 !important;
  width: 100%;
  overflow: hidden;
}

#address-text {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.link-icon {
  width: clamp(1px, 1.459vw, 56px);
  height: clamp(1px, 1.459vw, 56px);
}

.what-img {
  height: clamp(1px, 37.396vw, 1436px);
  overflow: hidden;
  position: relative;
}

.what-img .product-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.c-start-icon {
  position: relative;
  width: clamp(1px, 10.771vw, 644px);
  height: clamp(1px, 8.5vw, 480px);
}

.c-start-icon img {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
}

.benefits-bg {
  width: auto;
  /*   height: clamp(1px, 19.844vw, 762px); */
  height: 100%;
  border-bottom: clamp(1px, 0.15vw, 4px) solid transparent;
}

.benefits-bg:hover {
  border-bottom: clamp(1px, 0.15vw, 4px) solid #ffffff;
}

.d-icon {
  width: clamp(1px, 1.25vw, 48px);
  height: clamp(1px, 1.25vw, 48px);
}

.download-bg {
  width: auto;
  height: clamp(1px, 9.4792vw, 364px);
  border-bottom: clamp(1px, 0.15vw, 4px) solid #333333;
}

.download-bg:hover {
  background-color: rgb(86, 198, 238, 0.1);
  border-bottom: none !important;
  border-radius: clamp(1px, 1.3vw, 50px);
}

.swiper-container {
  height: fit-content !important;
}

.swiper-pagination {
  position: relative;
}

.swiper-download .swiper-pagination-custom {
  bottom: auto !important;
  width: clamp(1px, 10.6383vw, 320px);
}

.swiper-download .swiper-pagination-progress {
  height: clamp(1px, 1.3vw, 8px);
  background-color: rgba(7, 106, 189, 0.2);
  border-radius: 6.77px;
}

.swiper-download .swiper-pagination-progressbar {
  height: clamp(1px, 1.3vw, 8px);
  background-color: #076abd;
  border-radius: 6.77px;
}

.swiper-button-next:after,
.swiper-rtl .swiper-button-prev:after {
  display: none !important;
}

.swiper-button-prev:after,
.swiper-rtl .swiper-button-next:after {
  display: none !important;
}

.swiper-button-next,
.swiper-button-prev {
  display: block;
  position: relative;
  top: auto !important;
  right: 0;
  width: clamp(1px, 3.1771vw, 122px);
  height: clamp(1px, 3.1771vw, 122px) !important;
  margin-top: 0 !important;
  z-index: 10;
  cursor: pointer;
  color: var(--swiper-navigation-color, var(--swiper-theme-color));
}

.swiper-button-next .d-arrow,
.swiper-button-prev .d-arrow {
  width: clamp(1px, 1.615vw, 62px);
}

.d-arrow-1 {
  position: absolute;
  top: 1;
}

.swiper-button-next:hover .d-arrow,
.swiper-button-prev:hover .d-arrow {
  display: none !important;
}

.swiper-button-next:hover .d-arrow-1,
.swiper-button-prev:hover .d-arrow-1 {
  display: block !important;
  width: clamp(1px, 2.917vw, 112px);
  height: clamp(1px, 2.917vw, 112px);
}

.doc_check img {
  width: clamp(1px, 1.823vw, 70px);
  height: clamp(1px, 1.823vw, 70px);
}

.doc-icon {
  position: relative;
  width: clamp(1px, 11vw, 300px);
  height: clamp(1px, 11vw, 340px);
  top: -50px;
}

.doc-clip,
.doc-line {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
}

.contact-label input {
  width: clamp(1px, 32.813vw, 1260px);
  height: clamp(1px, 3.386vw, 130px);
  margin: 0;
  border: none;
  background-color: transparent !important;
  border-bottom: 2px solid #076abd;
  padding: 0px 5px;
}

.wpcf7-submit {
  background: transparent;
  width: clamp(1px, 8.8542vw, 340px);
  height: clamp(1px, 2.865vw, 110px);
  border: clamp(1px, 0.2vw, 6px) solid #076ABD;
  border-radius: 100px;
  padding: 0 !important;
}

.form-btn p {
  position: relative;
  width: 100%;
  margin: 0 !important;
}

.wpcf7-submit:hover {
  background-color: #076abd;
  border: clamp(1px, 0.2vw, 6px) solid #076abd;
  color: white !important;
}

.contact-label input:focus,
.contact-label input:focus-visible {
  outline: none;
  box-shadow: none;
}

textarea {
  width: clamp(1px, 32.813vw, 1260px);
  min-height: clamp(1px, 3.6vw, 140px);
  border: none;
  background-color: transparent !important;
  border-bottom: 2px solid #076abd;
  padding: clamp(1px, 1.1vw, 40px) 5px;
  margin: 0;
  max-height: clamp(1px, 3.6vw, 140px);
  transition: max-height 0.2s ease;
}

textarea:focus,
textarea:focus-visible {
  outline: none;
  box-shadow: none;
  max-height: clamp(1px, 10.5vw, 400px);
  border-bottom: clamp(1px, 0.2vw, 4px) solid #076abd;
}

.contact-label label {
  color: #076abd !important;
  padding-top: 6px;
}

.contact-label label {
  transition: opacity 0.3s ease, transform 0.3s ease;
  opacity: 0;
  pointer-events: none;
}

@keyframes bounce {
  0% {
    transform: translateY(100%) scale(1);
  }

  80% {
    transform: translateY(0%) scale(1);
  }

  100% {
    transform: translateY(0%) scale(1.05);
  }
}

/* Ensure the label becomes visible when input is focused or filled */
.contact-label div:focus-within label,
.contact-label input:not(:placeholder-shown)+label,
.contact-label textarea:not(:placeholder-shown)+label {
  opacity: 1 !important;
  animation: bounce 0.5s;
}

/* For input and textarea, hide placeholder when filled or focused */
input:focus::placeholder,
textarea:focus::placeholder,
input:not(:placeholder-shown)::placeholder,
textarea:not(:placeholder-shown)::placeholder {
  opacity: 0;
  animation: bounce 0.5s;
}

/* When the input or textarea is focused, show the label */
.contact-label input:focus+label,
.contact-label textarea:focus+label,
.contact-label input.filled+label,
.contact-label textarea.filled+label {
  opacity: 1 !important;
  animation: bounce 0.5s;
}

.contact-label div.focused label,
.contact-label div.filled label {
  opacity: 1 !important;
}

.contact-label :-webkit-autofill,
.contact-label textarea:-webkit-autofill,
.contact-label select:-webkit-autofill {
  background-color: transparent !important;
  -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
  -webkit-text-fill-color: #333333 !important;
  caret-color: #333333 !important;
  transition: background-color 5000s ease-in-out 0s;
}

.contact-label input:focus,
.contact-label textarea:focus {
  outline: none;
  background-color: transparent !important;
}

.animation-icon,
.mail-animation {
  position: relative;
}

.animation-icon img {
  width: clamp(1px, 57.292vw, 2200px);
  height: 100%;
}

.con-icon {
  position: absolute;
  top: 0;
  left: 0;
}

.mail-animation img {
  width: clamp(1px, 24.896vw, 956px);
  height: 100%;
}

.mail-icon {
  width: clamp(1px, 5vw, 386px);
  height: clamp(1px, 5vw, 404px);
}

.mail-icon {
  position: absolute;
  top: 0;
  left: 0;
}

.explore-bg {
  height: clamp(1px, 6.25vw, 240px);
  width: 100%;
  border-bottom: 1px solid #333333;
}

.explore-bg:hover {
  color: #076abd !important;
}

.explore-bg:hover .e-arrow,
.explore-bg.active .e-arrow,
.explore-bg-m:hover .e-arrow,
.explore-bg-m.active .e-arrow {
  display: none !important;
}

.explore-bg:hover .e-arrow-1,
.explore-bg.active .e-arrow-1,
.explore-bg-m:hover .e-arrow-1,
.explore-bg-m.active .e-arrow-1 {
  display: block !important;
}

.nav-pills .nav-link {
  border-radius: 0 !important;
}

.border-top {
  border-top: 1px solid #333333 !important;
}

.active.border-bottom {
  border-bottom: 1px solid #333333 !important;
}

.explore-img {
  width: clamp(1px, 23.438vw, 900px) !important;
  height: clamp(1px, 20.834vw, 800px) !important;
  object-fit: cover;
}

.explore-img img {
  width: 100% !important;
  height: 100% !important;
}

.explore-bg-m.active {
  color: #076abd;
}

.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
  color: #076abd !important;
  background-color: transparent !important;
}

.explore-img-content {
  display: none;
}

.explore-img-content.active {
  display: block;
}

.arrow-bounce {
  animation: bounce-subtle 2s infinite ease-in-out;
}

@keyframes bounce-subtle {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-20px);
  }
}

/* .benefits-title {
  height: 6vh;
} */

.benefits-icon {
  height: auto;
  width: clamp(1px,1.823vw,70px) !important;
}

.copy {
  position: relative;
  display: inline-block;
}

.copied-image {
  position: absolute;
  top: -45px;
  right: -25px;
  width: 80px !important;
  display: none;
  animation: fadeOut 5s ease-out forwards;
  z-index: 10;
}

.copied-image.show {
  display: block;
}

@media (max-width: 767px) {

  .s-products-container,
  .s-products-img {
    height: 100% !important;
  }

  .s-products-img .our-btn {
    width: clamp(1px, 39.535vw, 200px);
    height: clamp(1px, 11.63vw, 50px) !important;
    border: clamp(1px, 0.6vw, 3px) solid #ffffff !important;
  }

  .p-share,
  .p-share-1 {
    width: clamp(1px, 5.117vw, 25px);
    height: clamp(1px, 5.117vw, 25px);
  }

  .w3-modal-content {
    max-width: clamp(1px, 86.05vw, 1814px);
  }

  .link-icon {
    width: clamp(1px, 4.652vw, 56px);
    height: clamp(1px, 4.652vw, 56px);
  }

  .copy-btn {
    width: clamp(1px, 32.56vw, 240px);
    height: clamp(1px, 11.63vw, 50px) !important;
    border: clamp(1px, 0.6vw, 4px) solid #076abd !important;
  }

  .share-icon img {
    width: clamp(1px, 10.931vw, 70px);
    height: clamp(1px, 10.931vw, 70px);
  }

  .s-close {
    width: clamp(1px, 4.652vw, 20px);
    height: clamp(1px, 4.652vw, 20px);
  }

  .what-img {
    height: clamp(1px, 53.024vw, 1436px);
  }

  .coverage-container {
    background-image: url("../../images/custom/Products/Marine\ Cargo\ Section\ 2-mob.png") !important;
    background-repeat: no-repeat;
  }

  .c-start-icon {
    position: relative;
    width: clamp(1px, 49.41vw, 644px);
    height: clamp(1px, 24.187vw, 480px);
  }

  .benefits-bg {
    /* height: clamp(1px, 83.721vw, 762px); */
    border-bottom: clamp(1px, 0.6vw, 4px) solid #ffffff;
  }

  .benefits-bg:hover {
    border-bottom: clamp(1px, 0.6vw, 4px) solid #ffffff;
  }

  .row .col-md-4:last-of-type .benefits-bg {
    border-bottom: none !important;
    margin-bottom: 0 !important;
  }

  .swiper-download .swiper-pagination-custom {
    width: clamp(1px, 37.21vw, 320px);
  }

  .swiper-button-next .d-arrow,
  .swiper-button-prev .d-arrow {
    width: clamp(1px, 6.28vw, 62px);
  }

  .swiper-button-next,
  .swiper-button-prev {
    width: clamp(1px, 14.187vw, 122px);
    height: clamp(1px, 14.187vw, 122px) !important;
  }

  .swiper-button-next:hover .d-arrow-1,
  .swiper-button-prev:hover .d-arrow-1 {
    display: block !important;
    width: clamp(1px, 11.63vw, 112px);
    height: clamp(1px, 11.63vw, 112px);
  }

  .d-icon {
    width: clamp(1px, 5.582vw, 48px);
    height: clamp(1px, 5.582vw, 48px);
  }

  .download-bg {
    height: clamp(1px, 36.047vw, 364px);
  }

  .download-bg:hover {
    border-radius: clamp(1px, 4vw, 50px);
  }

  .doc-icon {
    position: relative;
    width: clamp(1px, 59.535vw, 700px);
    height: clamp(1px, 59.77vw, 668px);
    top: clamp(-90px, -20vw, 0px);
    left: clamp(-35px, -7.6vw, 0px);
  }

  .doc_check img {
    margin-top: clamp(1px, 1.1vw, 5px);
    width: clamp(1px, 4.98vw, 25px);
    height: clamp(1px, 4.98vw, 26px);
  }

  .contacts-container h2 {
    font-size: clamp(1px, 10.46512vw, 60px) !important;
  }

  .contact-container {
    background-image: url("../../images/custom/Contact\ Us/News Section.png") !important;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .contact-label input {
    width: 100%;
    height: clamp(1px, 12.096vw, 65px);
  }

  textarea {
    width: 100%;
    min-height: clamp(1px, 12.096vw, 70px);
  }

  .wpcf7-submit {
    width: clamp(1px, 30.931vw, 170px);
    height: clamp(1px, 11.63vw, 50px) !important;
    border: clamp(1px, 0.6vw, 3px) solid #076abd;
  }

  .animation-icon,
  .mail-animation {
    position: absolute;
    top: auto;
    right: 0;
  }

  .mail-animation img {
    width: clamp(1px, 68.373vw, 956px);
    height: 100%;
  }

  .explore-bg-m {
    height: clamp(1px, 23.256vw, 240px);
    width: 100%;
    border-bottom: 1px solid #333333;
  }

  .explore-img-content img {
    width: 100%;
    height: clamp(1px, 76.745vw, 660px);
    object-fit: cover;
  }

  .benefits-icon {
    height: auto;
    width: clamp(1px,8.14vw,40px) !important;
  }
}