body,
html {
  height: 100%;
  width: 100%;
}

main {
  /* Value of full screen minus footer and navbar (289px + 65px = 354px ~ 22rem) */
  min-height: calc(100% - 23rem);
  width: 100%;
  /* margin-bottom: 1rem; */
}

.hover\:text-blue-green:hover {
    --tw-text-opacity: 1 !important;
    color: rgb(35 98 172 / var(--tw-text-opacity)) !important;
}

.o_footer a:not(.btn) {
    color: #525252 !important;
}

a:hover {
    color: #133739;
    text-decoration: none !important;
}

.head {
  height: 25vh;
  /* background-attachment: fixed; */
}

/* CSS for header carousel  */

.carousel {
  height: 90vh;
  width: 100%;
  position: relative;
  overflow: hidden;
}

.slides {
  display: flex;
  height: 100%;
  width: 100%;
}

.slide {
  flex: 1 0 100%;
}

/* CSS for linear gradient on newsletter section */

.bg-gradient-newletter {
  background: linear-gradient(135deg, #00317C, #7BB4C3);
  opacity: 0.90;
}

/* CSS for scroller infinite list */

.tag-list {
  margin: 0;
  padding-inline: 0;
  list-style: none;
}

.tag-list .campaign-product {
  /* padding: 1rem; */
  background: #DFECFB; 
  border-radius: 0.5rem; 
  width: 16rem;
  height: 18rem;
  display: flex;
  align-items: center;
  justify-content: center;
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color),
    0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
    var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.tag-list .partner-logo {
  padding-left: 2rem;
  padding-right: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media only screen and (max-device-width: 768px) {
  .tag-list .campaign-product {
    width: 12rem;
    height: 14rem;
  }
}

.scroller {
  max-width: 1376px;
}

.scroller-inner {
  padding-block: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}

@media only screen and (max-device-width: 375px) {
  .scroller-inner {
    padding-block: 0rem;
  }
}

.scroller[data-animated="true"] {
  overflow: hidden;
}

.scroller[data-animated="true"] .scroller-inner {
  width: max-content;
  flex-wrap: nowrap;
  animation: scroll var(--_animation-duration, 120s) var(--_animation-direction, forwards) linear infinite;
}

.scroller[data-direction="left"] {
  --_animation-direction: forwards;
}

.scroller[data-direction="right"] {
  --_animation-direction: reverse;
}

.scroller[data-speed="slow"] {
  --_animation-duration: 200s;
}

.scroller[data-speed="fast"] {
  --_animation-duration: 80s;
}

@keyframes scroll {
  to {
    transform: translate(calc(-50% - 1rem));
  }
  
}

/* CSS for dropdown button */
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: hsl(0, 0%, 100%);
  border-radius: 4px;
  z-index: 40;
  transform: translateY(20px);
  overflow: hidden;
}

.dropdown-content a {
  padding: 8px 16px;
  text-decoration: none;
  display: block;
  margin-block: 0.5rem;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.dropdown-content a:hover {
  color: #2362AC;
  /* #d0d3dd; */
}

.show {
  display: block;
}

/* Style for image on section service */
.animate-liquid-one {
  /* background: url("../assets/img/supply-support.jpg") no-repeat; */
  background-size: 100% 100%;
  height: 20rem;
  width: 100%;
  max-width: 700px;
  box-shadow: 0 0 20px #0000;
  border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  animation: liquid-one 20s ease-in-out infinite;
}

.animate-liquid-two {
  /* background: url("../assets/img/market-place.jpg") no-repeat; */
  background-size: 100% 100%;
  height: 20rem;
  width: 100%;
  max-width: 700px;
  box-shadow: 0 0 20px #0000;
  border-radius: 50% 70% 50% 40% / 70% 30% 80% 40%;
  animation: liquid-two 15s ease-in-out infinite;
}

@keyframes liquid-one {
  0% {
    transform: translate(0, 0);
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  }
  25% {
    transform: translate(25px, 20px);
    border-radius: 70% 50% 60% 40% / 50% 60% 70% 70%;
    background-size: 110% 100%;
  }
  50% {
    transform: translate(20px, -10px);
    border-radius: 30% 70% 40% 60% / 70% 40% 60% 30%;
    background-size: 110% 110%;
  }
  75% {
    transform: translate(-10px, 10px);
    border-radius: 40% 60% 50% 40% / 60% 70% 50% 40%;
    background-size: 115% 115%;
  }
  100% {
    transform: translate(0, 0);
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  }
}

@keyframes liquid-two {
  0% {
    transform: translate(0, 0);
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  }
  25% {
    transform: translate(-20px, 15px);
    border-radius: 60% 60% 60% 60% / 60% 60% 60% 60%;
  }
  50% {
    transform: translate(-15px, -5px);
    border-radius: 70% 60% 50% 40% / 50% 40% 70% 60%;
  }
  75% {
    transform: translate(5px, 15px);
    border-radius: 50% 50% 50% 50% / 40% 30% 70% 60%;
  }
  100% {
    transform: translate(0, 0);
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  }
}

.google-map {
  padding-bottom: 25rem;
  position: relative;
}

.google-map iframe {
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  position: absolute;
}