/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */
/**************** mouse cursor css starts***************/
.cb-cursor {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 150;
	contain: layout style size;
	pointer-events: none;
	will-change: transform;
	-webkit-transition: opacity 0.3s, color 0.4s;
	-o-transition: opacity 0.3s, color 0.4s;
	-moz-transition: opacity 0.3s, color 0.4s;
	transition: opacity 0.3s, color 0.4s;
}

.cb-cursor:before {
	content: "";
	position: absolute;
	top: -24px;
	left: -24px;
	display: block;
	width: 48px;
	height: 48px;
	-webkit-transform: scale(0);
	-moz-transform: scale(0);
	-ms-transform: scale(0);
	-o-transform: scale(0);
	transform: scale(0);
	background: #1E84B5;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	-webkit-transition: opacity 0.1s, -webkit-transform 0.3s ease-in-out;
	transition: opacity 0.1s, -webkit-transform 0.3s ease-in-out;
	-o-transition: opacity 0.1s, -o-transform 0.3s ease-in-out;
	-moz-transition: transform 0.3s ease-in-out, opacity 0.1s, -moz-transform 0.3s ease-in-out;
	transition: transform 0.3s ease-in-out, opacity 0.1s;
	transition: transform 0.3s ease-in-out, opacity 0.1s, -webkit-transform 0.3s ease-in-out, -moz-transform 0.3s ease-in-out, -o-transform 0.3s ease-in-out;
}

.cb-cursor-text {
	position: absolute;
	top: -18px;
	left: -18px;
	width: 36px;
	height: 36px;
	display: -webkit-box;
	display: -webkit-flex;
	display: -moz-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-moz-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	-moz-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-transform: scale(0) rotate(10deg);
	-moz-transform: scale(0) rotate(10deg);
	-ms-transform: scale(0) rotate(10deg);
	-o-transform: scale(0) rotate(10deg);
	transform: scale(0) rotate(10deg);
	opacity: 0;
	color: white;
	font-size: 16px;
	line-height: 20px;
	text-align: center;
	letter-spacing: -0.01em;
	-webkit-transition: opacity 0.4s, -webkit-transform 0.3s;
	transition: opacity 0.4s, -webkit-transform 0.3s;
	-o-transition: opacity 0.4s, -o-transform 0.3s;
	-moz-transition: opacity 0.4s, transform 0.3s, -moz-transform 0.3s;
	transition: opacity 0.4s, transform 0.3s;
	transition: opacity 0.4s, transform 0.3s, -webkit-transform 0.3s, -moz-transform 0.3s, -o-transform 0.3s;
}

@supports (mix-blend-mode: exclusion) {
	.cb-cursor.-exclusion, .cb-cursor.-opaque {
		mix-blend-mode: exclusion;
	}
}

@supports (mix-blend-mode: exclusion) {
	.cb-cursor.-exclusion:before, .cb-cursor.-opaque:before {
		background: white;
	}
}

.cb-cursor.-normal, .cb-cursor.-text {
	mix-blend-mode: normal;
}

.cb-cursor.-normal:before, .cb-cursor.-text:before {
	background: currentColor;
}

.cb-cursor.-inverse {
	color: white;
}

.cb-cursor.-visible:before {
	-webkit-transform: scale(0.2);
	-moz-transform: scale(0.2);
	-ms-transform: scale(0.2);
	-o-transform: scale(0.2);
	transform: scale(0.2);
}

.cb-cursor.-visible.-active:before {
	-webkit-transform: scale(0.23);
	-moz-transform: scale(0.23);
	-ms-transform: scale(0.23);
	-o-transform: scale(0.23);
	transform: scale(0.23);
	-webkit-transition-duration: 0.2s;
	-moz-transition-duration: 0.2s;
	-o-transition-duration: 0.2s;
	transition-duration: 0.2s;
}

.cb-cursor.-pointer:before {
	-webkit-transform: scale(0);
	-moz-transform: scale(0);
	-ms-transform: scale(0);
	-o-transform: scale(0);
	transform: scale(0);
}

.cb-cursor.-text:before {
	background: #000;
	opacity: 0.80;
	backdrop-filter: blur(10);
	-webkit-transform: scale(1.7);
	-moz-transform: scale(1.7);
	-ms-transform: scale(1.7);
	-o-transform: scale(1.7);
	transform: scale(1.7);
}

.cb-cursor.-text .cb-cursor-text {
	opacity: 1;
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	-o-transform: scale(1);
	transform: scale(1);
}

.cb-cursor.-text.-active:before {
	-webkit-transform: scale(1.6);
	-moz-transform: scale(1.6);
	-ms-transform: scale(1.6);
	-o-transform: scale(1.6);
	transform: scale(1.6);
	-webkit-transition-duration: 0.2s;
	-moz-transition-duration: 0.2s;
	-o-transition-duration: 0.2s;
	transition-duration: 0.2s;
}

.cb-cursor.-opaque:before {
	-webkit-transform: scale(1.32);
	-moz-transform: scale(1.32);
	-ms-transform: scale(1.32);
	-o-transform: scale(1.32);
	transform: scale(1.32);
}

.cb-cursor.-opaque.-active:before {
	-webkit-transform: scale(1.2);
	-moz-transform: scale(1.2);
	-ms-transform: scale(1.2);
	-o-transform: scale(1.2);
	transform: scale(1.2);
}

.cb-cursor.-lg:before {
	-webkit-transform: scale(2);
	-moz-transform: scale(2);
	-ms-transform: scale(2);
	-o-transform: scale(2);
	transform: scale(2);
}

.cb-cursor.-hidden:before {
	-webkit-transform: scale(0);
	-moz-transform: scale(0);
	-ms-transform: scale(0);
	-o-transform: scale(0);
	transform: scale(0);
}

.-color-red {
	color: red;
}

.-color-green {
	color: #51c67d;
}

.cb-demo {
	background: #fff;
}

.cb-demo-content {
	display: -webkit-box;
	display: -webkit-flex;
	display: -moz-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-moz-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	-moz-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	height: 100vh;
}

.cb-demo-container {
	padding: 0 20px;
}

@media (min-width: 1600px) {
	.cb-demo-container {
		padding: 0 120px;
	}
}

.cb-demo-row {
	display: -webkit-box;
	display: -webkit-flex;
	display: -moz-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	-moz-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	text-align: center;
	margin: 30px 0;
}

@media (min-width: 1600px) {
	.cb-demo-row {
		margin: 60px 0;
	}
}

.cb-demo-item {
	position: relative;
	-webkit-box-flex: 1;
	-webkit-flex: 1;
	-moz-box-flex: 1;
	-ms-flex: 1;
	flex: 1;
	padding: 50px 30px;
	margin: 0 20px;
	color: #000;
}

@media (min-width: 1600px) {
	.cb-demo-item {
		padding: 90px 30px;
		margin: 0 30px;
	}
}

.cb-demo-item-title {
	position: relative;
	margin: 0 0 25px 0;
	font-size: 30px;
	font-weight: bold;
}

.cb-demo-item-text {
	position: relative;
	max-width: 70%;
	margin: 0 auto;
	color: rgba(0, 0, 0, 0.5);
	font-size: 16px;
	font-weight: 300;
	line-height: 150%;
}

.cb-demo-item:before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	border-radius: 30px;
	background: #f8f8f8;
	-webkit-transition: -webkit-box-shadow 0.2s;
	transition: -webkit-box-shadow 0.2s;
	-o-transition: box-shadow 0.2s;
	-moz-transition: box-shadow 0.2s, -moz-box-shadow 0.2s;
	transition: box-shadow 0.2s;
	transition: box-shadow 0.2s, -webkit-box-shadow 0.2s, -moz-box-shadow 0.2s;
}
/**************** mouse cursor css ends***************/

/**************** animate css starts***************/
@charset "UTF-8";
/*!
Animate.css - http://daneden.me/animate
Licensed under the MIT license - http://opensource.org/licenses/MIT

Copyright (c) 2014 Daniel Eden
*/

.animated {
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}

.animated.infinite {
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}

.animated.hinge {
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
}

@-webkit-keyframes bounce {
  0%, 20%, 53%, 80%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
            transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    -webkit-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0);
  }

  40%, 43% {
    -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
            transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -30px, 0);
            transform: translate3d(0, -30px, 0);
  }

  70% {
    -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
            transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -15px, 0);
            transform: translate3d(0, -15px, 0);
  }

  90% {
    -webkit-transform: translate3d(0,-4px,0);
            transform: translate3d(0,-4px,0);
  }
}

@keyframes bounce {
  0%, 20%, 53%, 80%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
            transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    -webkit-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0);
  }

  40%, 43% {
    -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
            transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -30px, 0);
            transform: translate3d(0, -30px, 0);
  }

  70% {
    -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
            transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -15px, 0);
            transform: translate3d(0, -15px, 0);
  }

  90% {
    -webkit-transform: translate3d(0,-4px,0);
            transform: translate3d(0,-4px,0);
  }
}

.bounce {
  -webkit-animation-name: bounce;
          animation-name: bounce;
  -webkit-transform-origin: center bottom;
      -ms-transform-origin: center bottom;
          transform-origin: center bottom;
}

@-webkit-keyframes flash {
  0%, 50%, 100% {
    opacity: 1;
  }

  25%, 75% {
    opacity: 0;
  }
}

@keyframes flash {
  0%, 50%, 100% {
    opacity: 1;
  }

  25%, 75% {
    opacity: 0;
  }
}

.flash {
  -webkit-animation-name: flash;
          animation-name: flash;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
            transform: scale3d(1.05, 1.05, 1.05);
  }

  100% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}

@keyframes pulse {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
            transform: scale3d(1.05, 1.05, 1.05);
  }

  100% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}

.pulse {
  -webkit-animation-name: pulse;
          animation-name: pulse;
}

@-webkit-keyframes rubberBand {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }

  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
            transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
            transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
            transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    -webkit-transform: scale3d(.95, 1.05, 1);
            transform: scale3d(.95, 1.05, 1);
  }

  75% {
    -webkit-transform: scale3d(1.05, .95, 1);
            transform: scale3d(1.05, .95, 1);
  }

  100% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}

@keyframes rubberBand {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }

  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
            transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
            transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
            transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    -webkit-transform: scale3d(.95, 1.05, 1);
            transform: scale3d(.95, 1.05, 1);
  }

  75% {
    -webkit-transform: scale3d(1.05, .95, 1);
            transform: scale3d(1.05, .95, 1);
  }

  100% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}

.rubberBand {
  -webkit-animation-name: rubberBand;
          animation-name: rubberBand;
}

@-webkit-keyframes shake {
  0%, 100% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }

  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translate3d(-10px, 0, 0);
            transform: translate3d(-10px, 0, 0);
  }

  20%, 40%, 60%, 80% {
    -webkit-transform: translate3d(10px, 0, 0);
            transform: translate3d(10px, 0, 0);
  }
}

@keyframes shake {
  0%, 100% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }

  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translate3d(-10px, 0, 0);
            transform: translate3d(-10px, 0, 0);
  }

  20%, 40%, 60%, 80% {
    -webkit-transform: translate3d(10px, 0, 0);
            transform: translate3d(10px, 0, 0);
  }
}

.shake {
  -webkit-animation-name: shake;
          animation-name: shake;
}

@-webkit-keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
            transform: rotate3d(0, 0, 1, 15deg);
  }

  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
            transform: rotate3d(0, 0, 1, -10deg);
  }

  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
            transform: rotate3d(0, 0, 1, 5deg);
  }

  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
            transform: rotate3d(0, 0, 1, -5deg);
  }

  100% {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
            transform: rotate3d(0, 0, 1, 0deg);
  }
}

@keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
            transform: rotate3d(0, 0, 1, 15deg);
  }

  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
            transform: rotate3d(0, 0, 1, -10deg);
  }

  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
            transform: rotate3d(0, 0, 1, 5deg);
  }

  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
            transform: rotate3d(0, 0, 1, -5deg);
  }

  100% {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
            transform: rotate3d(0, 0, 1, 0deg);
  }
}

.swing {
  -webkit-transform-origin: top center;
      -ms-transform-origin: top center;
          transform-origin: top center;
  -webkit-animation-name: swing;
          animation-name: swing;
}

@-webkit-keyframes tada {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }

  10%, 20% {
    -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
            transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
  }

  30%, 50%, 70%, 90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
            transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }

  40%, 60%, 80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
            transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }

  100% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}

@keyframes tada {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }

  10%, 20% {
    -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
            transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
  }

  30%, 50%, 70%, 90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
            transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }

  40%, 60%, 80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
            transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }

  100% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}

.tada {
  -webkit-animation-name: tada;
          animation-name: tada;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes wobble {
  0% {
    -webkit-transform: none;
            transform: none;
  }

  15% {
    -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
            transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
  }

  30% {
    -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
            transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
  }

  45% {
    -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
            transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
  }

  60% {
    -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
            transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
  }

  75% {
    -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
            transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
  }

  100% {
    -webkit-transform: none;
            transform: none;
  }
}

@keyframes wobble {
  0% {
    -webkit-transform: none;
            transform: none;
  }

  15% {
    -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
            transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
  }

  30% {
    -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
            transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
  }

  45% {
    -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
            transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
  }

  60% {
    -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
            transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
  }

  75% {
    -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
            transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
  }

  100% {
    -webkit-transform: none;
            transform: none;
  }
}

.wobble {
  -webkit-animation-name: wobble;
          animation-name: wobble;
}

@-webkit-keyframes bounceIn {
  0%, 20%, 40%, 60%, 80%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
            transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
            transform: scale3d(.3, .3, .3);
  }

  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
            transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    -webkit-transform: scale3d(.9, .9, .9);
            transform: scale3d(.9, .9, .9);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
            transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    -webkit-transform: scale3d(.97, .97, .97);
            transform: scale3d(.97, .97, .97);
  }

  100% {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}

@keyframes bounceIn {
  0%, 20%, 40%, 60%, 80%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
            transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
            transform: scale3d(.3, .3, .3);
  }

  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
            transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    -webkit-transform: scale3d(.9, .9, .9);
            transform: scale3d(.9, .9, .9);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
            transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    -webkit-transform: scale3d(.97, .97, .97);
            transform: scale3d(.97, .97, .97);
  }

  100% {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}

.bounceIn {
  -webkit-animation-name: bounceIn;
          animation-name: bounceIn;
  -webkit-animation-duration: .75s;
          animation-duration: .75s;
}

@-webkit-keyframes bounceInDown {
  0%, 60%, 75%, 90%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
            transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0);
            transform: translate3d(0, -3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0);
            transform: translate3d(0, 25px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, -10px, 0);
            transform: translate3d(0, -10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, 5px, 0);
            transform: translate3d(0, 5px, 0);
  }

  100% {
    -webkit-transform: none;
            transform: none;
  }
}

@keyframes bounceInDown {
  0%, 60%, 75%, 90%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
            transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0);
            transform: translate3d(0, -3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0);
            transform: translate3d(0, 25px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, -10px, 0);
            transform: translate3d(0, -10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, 5px, 0);
            transform: translate3d(0, 5px, 0);
  }

  100% {
    -webkit-transform: none;
            transform: none;
  }
}

.bounceInDown {
  -webkit-animation-name: bounceInDown;
          animation-name: bounceInDown;
}

@-webkit-keyframes bounceInLeft {
  0%, 60%, 75%, 90%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
            transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(-3000px, 0, 0);
            transform: translate3d(-3000px, 0, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0);
            transform: translate3d(25px, 0, 0);
  }

  75% {
    -webkit-transform: translate3d(-10px, 0, 0);
            transform: translate3d(-10px, 0, 0);
  }

  90% {
    -webkit-transform: translate3d(5px, 0, 0);
            transform: translate3d(5px, 0, 0);
  }

  100% {
    -webkit-transform: none;
            transform: none;
  }
}

@keyframes bounceInLeft {
  0%, 60%, 75%, 90%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
            transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(-3000px, 0, 0);
            transform: translate3d(-3000px, 0, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0);
            transform: translate3d(25px, 0, 0);
  }

  75% {
    -webkit-transform: translate3d(-10px, 0, 0);
            transform: translate3d(-10px, 0, 0);
  }

  90% {
    -webkit-transform: translate3d(5px, 0, 0);
            transform: translate3d(5px, 0, 0);
  }

  100% {
    -webkit-transform: none;
            transform: none;
  }
}

.bounceInLeft {
  -webkit-animation-name: bounceInLeft;
          animation-name: bounceInLeft;
}

@-webkit-keyframes bounceInRight {
  0%, 60%, 75%, 90%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
            transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(3000px, 0, 0);
            transform: translate3d(3000px, 0, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0);
            transform: translate3d(-25px, 0, 0);
  }

  75% {
    -webkit-transform: translate3d(10px, 0, 0);
            transform: translate3d(10px, 0, 0);
  }

  90% {
    -webkit-transform: translate3d(-5px, 0, 0);
            transform: translate3d(-5px, 0, 0);
  }

  100% {
    -webkit-transform: none;
            transform: none;
  }
}

@keyframes bounceInRight {
  0%, 60%, 75%, 90%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
            transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(3000px, 0, 0);
            transform: translate3d(3000px, 0, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0);
            transform: translate3d(-25px, 0, 0);
  }

  75% {
    -webkit-transform: translate3d(10px, 0, 0);
            transform: translate3d(10px, 0, 0);
  }

  90% {
    -webkit-transform: translate3d(-5px, 0, 0);
            transform: translate3d(-5px, 0, 0);
  }

  100% {
    -webkit-transform: none;
            transform: none;
  }
}

.bounceInRight {
  -webkit-animation-name: bounceInRight;
          animation-name: bounceInRight;
}

@-webkit-keyframes bounceInUp {
  0%, 60%, 75%, 90%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
            transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0);
            transform: translate3d(0, 3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
            transform: translate3d(0, -20px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, 10px, 0);
            transform: translate3d(0, 10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, -5px, 0);
            transform: translate3d(0, -5px, 0);
  }

  100% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}

@keyframes bounceInUp {
  0%, 60%, 75%, 90%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
            transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0);
            transform: translate3d(0, 3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
            transform: translate3d(0, -20px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, 10px, 0);
            transform: translate3d(0, 10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, -5px, 0);
            transform: translate3d(0, -5px, 0);
  }

  100% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}

.bounceInUp {
  -webkit-animation-name: bounceInUp;
          animation-name: bounceInUp;
}

@-webkit-keyframes bounceOut {
  20% {
    -webkit-transform: scale3d(.9, .9, .9);
            transform: scale3d(.9, .9, .9);
  }

  50%, 55% {
    opacity: 1;
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
            transform: scale3d(1.1, 1.1, 1.1);
  }

  100% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
            transform: scale3d(.3, .3, .3);
  }
}

@keyframes bounceOut {
  20% {
    -webkit-transform: scale3d(.9, .9, .9);
            transform: scale3d(.9, .9, .9);
  }

  50%, 55% {
    opacity: 1;
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
            transform: scale3d(1.1, 1.1, 1.1);
  }

  100% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
            transform: scale3d(.3, .3, .3);
  }
}

.bounceOut {
  -webkit-animation-name: bounceOut;
          animation-name: bounceOut;
  -webkit-animation-duration: .75s;
          animation-duration: .75s;
}

@-webkit-keyframes bounceOutDown {
  20% {
    -webkit-transform: translate3d(0, 10px, 0);
            transform: translate3d(0, 10px, 0);
  }

  40%, 45% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
            transform: translate3d(0, -20px, 0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
            transform: translate3d(0, 2000px, 0);
  }
}

@keyframes bounceOutDown {
  20% {
    -webkit-transform: translate3d(0, 10px, 0);
            transform: translate3d(0, 10px, 0);
  }

  40%, 45% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
            transform: translate3d(0, -20px, 0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
            transform: translate3d(0, 2000px, 0);
  }
}

.bounceOutDown {
  -webkit-animation-name: bounceOutDown;
          animation-name: bounceOutDown;
}

@-webkit-keyframes bounceOutLeft {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(20px, 0, 0);
            transform: translate3d(20px, 0, 0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
            transform: translate3d(-2000px, 0, 0);
  }
}

@keyframes bounceOutLeft {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(20px, 0, 0);
            transform: translate3d(20px, 0, 0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
            transform: translate3d(-2000px, 0, 0);
  }
}

.bounceOutLeft {
  -webkit-animation-name: bounceOutLeft;
          animation-name: bounceOutLeft;
}

@-webkit-keyframes bounceOutRight {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(-20px, 0, 0);
            transform: translate3d(-20px, 0, 0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
            transform: translate3d(2000px, 0, 0);
  }
}

@keyframes bounceOutRight {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(-20px, 0, 0);
            transform: translate3d(-20px, 0, 0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
            transform: translate3d(2000px, 0, 0);
  }
}

.bounceOutRight {
  -webkit-animation-name: bounceOutRight;
          animation-name: bounceOutRight;
}

@-webkit-keyframes bounceOutUp {
  20% {
    -webkit-transform: translate3d(0, -10px, 0);
            transform: translate3d(0, -10px, 0);
  }

  40%, 45% {
    opacity: 1;
    -webkit-transform: translate3d(0, 20px, 0);
            transform: translate3d(0, 20px, 0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
            transform: translate3d(0, -2000px, 0);
  }
}

@keyframes bounceOutUp {
  20% {
    -webkit-transform: translate3d(0, -10px, 0);
            transform: translate3d(0, -10px, 0);
  }

  40%, 45% {
    opacity: 1;
    -webkit-transform: translate3d(0, 20px, 0);
            transform: translate3d(0, 20px, 0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
            transform: translate3d(0, -2000px, 0);
  }
}

.bounceOutUp {
  -webkit-animation-name: bounceOutUp;
          animation-name: bounceOutUp;
}

@-webkit-keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

@keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

.fadeIn {
  -webkit-animation-name: fadeIn;
          animation-name: fadeIn;
}

@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

.fadeInDown {
  -webkit-animation-name: fadeInDown;
          animation-name: fadeInDown;
}

@-webkit-keyframes fadeInDownBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
            transform: translate3d(0, -2000px, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

@keyframes fadeInDownBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
            transform: translate3d(0, -2000px, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

.fadeInDownBig {
  -webkit-animation-name: fadeInDownBig;
          animation-name: fadeInDownBig;
}

@-webkit-keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100px, 0, 0);
            transform: translate3d(-100px, 0, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

@keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100px, 0, 0);
            transform: translate3d(-100px, 0, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

.fadeInLeft {
  -webkit-animation-name: fadeInLeft;
          animation-name: fadeInLeft;
}

@-webkit-keyframes fadeInLeftBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
            transform: translate3d(-2000px, 0, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

@keyframes fadeInLeftBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
            transform: translate3d(-2000px, 0, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

.fadeInLeftBig {
  -webkit-animation-name: fadeInLeftBig;
          animation-name: fadeInLeftBig;
}

@-webkit-keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(100px, 0, 0);
            transform: translate3d(100px, 0, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(100px, 0, 0);
            transform: translate3d(100px, 0, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

.fadeInRight {
  -webkit-animation-name: fadeInRight;
          animation-name: fadeInRight;
}

@-webkit-keyframes fadeInRightBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
            transform: translate3d(2000px, 0, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

@keyframes fadeInRightBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
            transform: translate3d(2000px, 0, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

.fadeInRightBig {
  -webkit-animation-name: fadeInRightBig;
          animation-name: fadeInRightBig;
}

@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 40px, 0);
            transform: translate3d(0, 40px, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 40px, 0);
            transform: translate3d(0, 40px, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

.fadeInUp {
  -webkit-animation-name: fadeInUp;
          animation-name: fadeInUp;
}

@-webkit-keyframes fadeInUpBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
            transform: translate3d(0, 2000px, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

@keyframes fadeInUpBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
            transform: translate3d(0, 2000px, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

.fadeInUpBig {
  -webkit-animation-name: fadeInUpBig;
          animation-name: fadeInUpBig;
}

@-webkit-keyframes fadeOut {
  0% {opacity: 1;}
  100% {opacity: 0;}
}

@keyframes fadeOut {
  0% {opacity: 1;}
  100% {opacity: 0;}
}

.fadeOut {
  -webkit-animation-name: fadeOut;
          animation-name: fadeOut;
}

@-webkit-keyframes fadeOutDown {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100%, 0);
  }
}

@keyframes fadeOutDown {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100%, 0);
  }
}

.fadeOutDown {
  -webkit-animation-name: fadeOutDown;
          animation-name: fadeOutDown;
}

@-webkit-keyframes fadeOutDownBig {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
            transform: translate3d(0, 2000px, 0);
  }
}

@keyframes fadeOutDownBig {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
            transform: translate3d(0, 2000px, 0);
  }
}

.fadeOutDownBig {
  -webkit-animation-name: fadeOutDownBig;
          animation-name: fadeOutDownBig;
}

@-webkit-keyframes fadeOutLeft {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
            transform: translate3d(-100%, 0, 0);
  }
}

@keyframes fadeOutLeft {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
            transform: translate3d(-100%, 0, 0);
  }
}

.fadeOutLeft {
  -webkit-animation-name: fadeOutLeft;
          animation-name: fadeOutLeft;
}

@-webkit-keyframes fadeOutLeftBig {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
            transform: translate3d(-2000px, 0, 0);
  }
}

@keyframes fadeOutLeftBig {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
            transform: translate3d(-2000px, 0, 0);
  }
}

.fadeOutLeftBig {
  -webkit-animation-name: fadeOutLeftBig;
          animation-name: fadeOutLeftBig;
}

@-webkit-keyframes fadeOutRight {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
            transform: translate3d(100%, 0, 0);
  }
}

@keyframes fadeOutRight {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
            transform: translate3d(100%, 0, 0);
  }
}

.fadeOutRight {
  -webkit-animation-name: fadeOutRight;
          animation-name: fadeOutRight;
}

@-webkit-keyframes fadeOutRightBig {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
            transform: translate3d(2000px, 0, 0);
  }
}

@keyframes fadeOutRightBig {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
            transform: translate3d(2000px, 0, 0);
  }
}

.fadeOutRightBig {
  -webkit-animation-name: fadeOutRightBig;
          animation-name: fadeOutRightBig;
}

@-webkit-keyframes fadeOutUp {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
  }
}

@keyframes fadeOutUp {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
  }
}

.fadeOutUp {
  -webkit-animation-name: fadeOutUp;
          animation-name: fadeOutUp;
}

@-webkit-keyframes fadeOutUpBig {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
            transform: translate3d(0, -2000px, 0);
  }
}

@keyframes fadeOutUpBig {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
            transform: translate3d(0, -2000px, 0);
  }
}

.fadeOutUpBig {
  -webkit-animation-name: fadeOutUpBig;
          animation-name: fadeOutUpBig;
}

@-webkit-keyframes flip {
  0% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
            transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }

  40% {
    -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
            transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }

  50% {
    -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
            transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }

  80% {
    -webkit-transform: perspective(400px) scale3d(.95, .95, .95);
            transform: perspective(400px) scale3d(.95, .95, .95);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }

  100% {
    -webkit-transform: perspective(400px);
            transform: perspective(400px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
}

@keyframes flip {
  0% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
            transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }

  40% {
    -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
            transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }

  50% {
    -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
            transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }

  80% {
    -webkit-transform: perspective(400px) scale3d(.95, .95, .95);
            transform: perspective(400px) scale3d(.95, .95, .95);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }

  100% {
    -webkit-transform: perspective(400px);
            transform: perspective(400px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
}

.animated.flip {
  -webkit-backface-visibility: visible;
          backface-visibility: visible;
  -webkit-animation-name: flip;
          animation-name: flip;
}

@-webkit-keyframes flipInX {
  0% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
            transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-transition-timing-function: ease-in;
            transition-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
            transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-transition-timing-function: ease-in;
            transition-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
            transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
            transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }

  100% {
    -webkit-transform: perspective(400px);
            transform: perspective(400px);
  }
}

@keyframes flipInX {
  0% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
            transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-transition-timing-function: ease-in;
            transition-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
            transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-transition-timing-function: ease-in;
            transition-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
            transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
            transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }

  100% {
    -webkit-transform: perspective(400px);
            transform: perspective(400px);
  }
}

.flipInX {
  -webkit-backface-visibility: visible !important;
          backface-visibility: visible !important;
  -webkit-animation-name: flipInX;
          animation-name: flipInX;
}

@-webkit-keyframes flipInY {
  0% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
            transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-transition-timing-function: ease-in;
            transition-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
            transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-transition-timing-function: ease-in;
            transition-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
            transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
            transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  }

  100% {
    -webkit-transform: perspective(400px);
            transform: perspective(400px);
  }
}

@keyframes flipInY {
  0% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
            transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-transition-timing-function: ease-in;
            transition-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
            transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-transition-timing-function: ease-in;
            transition-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
            transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
            transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  }

  100% {
    -webkit-transform: perspective(400px);
            transform: perspective(400px);
  }
}

.flipInY {
  -webkit-backface-visibility: visible !important;
          backface-visibility: visible !important;
  -webkit-animation-name: flipInY;
          animation-name: flipInY;
}

@-webkit-keyframes flipOutX {
  0% {
    -webkit-transform: perspective(400px);
            transform: perspective(400px);
  }

  30% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
            transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
            transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
}

@keyframes flipOutX {
  0% {
    -webkit-transform: perspective(400px);
            transform: perspective(400px);
  }

  30% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
            transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
            transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
}

.flipOutX {
  -webkit-animation-name: flipOutX;
          animation-name: flipOutX;
  -webkit-animation-duration: .75s;
          animation-duration: .75s;
  -webkit-backface-visibility: visible !important;
          backface-visibility: visible !important;
}

@-webkit-keyframes flipOutY {
  0% {
    -webkit-transform: perspective(400px);
            transform: perspective(400px);
  }

  30% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
            transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
            transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    opacity: 0;
  }
}

@keyframes flipOutY {
  0% {
    -webkit-transform: perspective(400px);
            transform: perspective(400px);
  }

  30% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
            transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
            transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    opacity: 0;
  }
}

.flipOutY {
  -webkit-backface-visibility: visible !important;
          backface-visibility: visible !important;
  -webkit-animation-name: flipOutY;
          animation-name: flipOutY;
  -webkit-animation-duration: .75s;
          animation-duration: .75s;
}

@-webkit-keyframes lightSpeedIn {
  0% {
    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
            transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }

  60% {
    -webkit-transform: skewX(20deg);
            transform: skewX(20deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: skewX(-5deg);
            transform: skewX(-5deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: none;
            transform: none;
    opacity: 1;
  }
}

@keyframes lightSpeedIn {
  0% {
    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
            transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }

  60% {
    -webkit-transform: skewX(20deg);
            transform: skewX(20deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: skewX(-5deg);
            transform: skewX(-5deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: none;
            transform: none;
    opacity: 1;
  }
}

.lightSpeedIn {
  -webkit-animation-name: lightSpeedIn;
          animation-name: lightSpeedIn;
  -webkit-animation-timing-function: ease-out;
          animation-timing-function: ease-out;
}

@-webkit-keyframes lightSpeedOut {
  0% {
    opacity: 1;
  }

  100% {
    -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
            transform: translate3d(100%, 0, 0) skewX(30deg);
    opacity: 0;
  }
}

@keyframes lightSpeedOut {
  0% {
    opacity: 1;
  }

  100% {
    -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
            transform: translate3d(100%, 0, 0) skewX(30deg);
    opacity: 0;
  }
}

.lightSpeedOut {
  -webkit-animation-name: lightSpeedOut;
          animation-name: lightSpeedOut;
  -webkit-animation-timing-function: ease-in;
          animation-timing-function: ease-in;
}

@-webkit-keyframes rotateIn {
  0% {
    -webkit-transform-origin: center;
            transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, -200deg);
            transform: rotate3d(0, 0, 1, -200deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: center;
            transform-origin: center;
    -webkit-transform: none;
            transform: none;
    opacity: 1;
  }
}

@keyframes rotateIn {
  0% {
    -webkit-transform-origin: center;
            transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, -200deg);
            transform: rotate3d(0, 0, 1, -200deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: center;
            transform-origin: center;
    -webkit-transform: none;
            transform: none;
    opacity: 1;
  }
}

.rotateIn {
  -webkit-animation-name: rotateIn;
          animation-name: rotateIn;
}

@-webkit-keyframes rotateInDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
            transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
            transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: left bottom;
            transform-origin: left bottom;
    -webkit-transform: none;
            transform: none;
    opacity: 1;
  }
}

@keyframes rotateInDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
            transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
            transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: left bottom;
            transform-origin: left bottom;
    -webkit-transform: none;
            transform: none;
    opacity: 1;
  }
}

.rotateInDownLeft {
  -webkit-animation-name: rotateInDownLeft;
          animation-name: rotateInDownLeft;
}

@-webkit-keyframes rotateInDownRight {
  0% {
    -webkit-transform-origin: right bottom;
            transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
            transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: right bottom;
            transform-origin: right bottom;
    -webkit-transform: none;
            transform: none;
    opacity: 1;
  }
}

@keyframes rotateInDownRight {
  0% {
    -webkit-transform-origin: right bottom;
            transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
            transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: right bottom;
            transform-origin: right bottom;
    -webkit-transform: none;
            transform: none;
    opacity: 1;
  }
}

.rotateInDownRight {
  -webkit-animation-name: rotateInDownRight;
          animation-name: rotateInDownRight;
}

@-webkit-keyframes rotateInUpLeft {
  0% {
    -webkit-transform-origin: left bottom;
            transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
            transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: left bottom;
            transform-origin: left bottom;
    -webkit-transform: none;
            transform: none;
    opacity: 1;
  }
}

@keyframes rotateInUpLeft {
  0% {
    -webkit-transform-origin: left bottom;
            transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
            transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: left bottom;
            transform-origin: left bottom;
    -webkit-transform: none;
            transform: none;
    opacity: 1;
  }
}

.rotateInUpLeft {
  -webkit-animation-name: rotateInUpLeft;
          animation-name: rotateInUpLeft;
}

@-webkit-keyframes rotateInUpRight {
  0% {
    -webkit-transform-origin: right bottom;
            transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -90deg);
            transform: rotate3d(0, 0, 1, -90deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: right bottom;
            transform-origin: right bottom;
    -webkit-transform: none;
            transform: none;
    opacity: 1;
  }
}

@keyframes rotateInUpRight {
  0% {
    -webkit-transform-origin: right bottom;
            transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -90deg);
            transform: rotate3d(0, 0, 1, -90deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: right bottom;
            transform-origin: right bottom;
    -webkit-transform: none;
            transform: none;
    opacity: 1;
  }
}

.rotateInUpRight {
  -webkit-animation-name: rotateInUpRight;
          animation-name: rotateInUpRight;
}

@-webkit-keyframes rotateOut {
  0% {
    -webkit-transform-origin: center;
            transform-origin: center;
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: center;
            transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, 200deg);
            transform: rotate3d(0, 0, 1, 200deg);
    opacity: 0;
  }
}

@keyframes rotateOut {
  0% {
    -webkit-transform-origin: center;
            transform-origin: center;
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: center;
            transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, 200deg);
            transform: rotate3d(0, 0, 1, 200deg);
    opacity: 0;
  }
}

.rotateOut {
  -webkit-animation-name: rotateOut;
          animation-name: rotateOut;
}

@-webkit-keyframes rotateOutDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
            transform-origin: left bottom;
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: left bottom;
            transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
            transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
}

@keyframes rotateOutDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
            transform-origin: left bottom;
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: left bottom;
            transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
            transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
}

.rotateOutDownLeft {
  -webkit-animation-name: rotateOutDownLeft;
          animation-name: rotateOutDownLeft;
}

@-webkit-keyframes rotateOutDownRight {
  0% {
    -webkit-transform-origin: right bottom;
            transform-origin: right bottom;
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: right bottom;
            transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
            transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}

@keyframes rotateOutDownRight {
  0% {
    -webkit-transform-origin: right bottom;
            transform-origin: right bottom;
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: right bottom;
            transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
            transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}

.rotateOutDownRight {
  -webkit-animation-name: rotateOutDownRight;
          animation-name: rotateOutDownRight;
}

@-webkit-keyframes rotateOutUpLeft {
  0% {
    -webkit-transform-origin: left bottom;
            transform-origin: left bottom;
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: left bottom;
            transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
            transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}

@keyframes rotateOutUpLeft {
  0% {
    -webkit-transform-origin: left bottom;
            transform-origin: left bottom;
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: left bottom;
            transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
            transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}

.rotateOutUpLeft {
  -webkit-animation-name: rotateOutUpLeft;
          animation-name: rotateOutUpLeft;
}

@-webkit-keyframes rotateOutUpRight {
  0% {
    -webkit-transform-origin: right bottom;
            transform-origin: right bottom;
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: right bottom;
            transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 90deg);
            transform: rotate3d(0, 0, 1, 90deg);
    opacity: 0;
  }
}

@keyframes rotateOutUpRight {
  0% {
    -webkit-transform-origin: right bottom;
            transform-origin: right bottom;
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: right bottom;
            transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 90deg);
            transform: rotate3d(0, 0, 1, 90deg);
    opacity: 0;
  }
}

.rotateOutUpRight {
  -webkit-animation-name: rotateOutUpRight;
          animation-name: rotateOutUpRight;
}

@-webkit-keyframes hinge {
  0% {
    -webkit-transform-origin: top left;
            transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
  }

  20%, 60% {
    -webkit-transform: rotate3d(0, 0, 1, 80deg);
            transform: rotate3d(0, 0, 1, 80deg);
    -webkit-transform-origin: top left;
            transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
  }

  40%, 80% {
    -webkit-transform: rotate3d(0, 0, 1, 60deg);
            transform: rotate3d(0, 0, 1, 60deg);
    -webkit-transform-origin: top left;
            transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
    opacity: 1;
  }

  100% {
    -webkit-transform: translate3d(0, 700px, 0);
            transform: translate3d(0, 700px, 0);
    opacity: 0;
  }
}

@keyframes hinge {
  0% {
    -webkit-transform-origin: top left;
            transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
  }

  20%, 60% {
    -webkit-transform: rotate3d(0, 0, 1, 80deg);
            transform: rotate3d(0, 0, 1, 80deg);
    -webkit-transform-origin: top left;
            transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
  }

  40%, 80% {
    -webkit-transform: rotate3d(0, 0, 1, 60deg);
            transform: rotate3d(0, 0, 1, 60deg);
    -webkit-transform-origin: top left;
            transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
    opacity: 1;
  }

  100% {
    -webkit-transform: translate3d(0, 700px, 0);
            transform: translate3d(0, 700px, 0);
    opacity: 0;
  }
}

.hinge {
  -webkit-animation-name: hinge;
          animation-name: hinge;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes rollIn {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
            transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

@keyframes rollIn {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
            transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

.rollIn {
  -webkit-animation-name: rollIn;
          animation-name: rollIn;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes rollOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
            transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
  }
}

@keyframes rollOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
            transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
  }
}

.rollOut {
  -webkit-animation-name: rollOut;
          animation-name: rollOut;
}

@-webkit-keyframes zoomIn {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.8, .8, .8);
            transform: scale3d(.8, .8, .8);
  }

  50% {
    opacity: 1;
  }
}

@keyframes zoomIn {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.8, .8, .8);
            transform: scale3d(.8, .8, .8);
  }

  50% {
    opacity: 1;
  }
}

.zoomIn {
  -webkit-animation-name: zoomIn;
          animation-name: zoomIn;
}

@-webkit-keyframes zoomInDown {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
            transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
            animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
            transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
            animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

@keyframes zoomInDown {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
            transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
            animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
            transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
            animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

.zoomInDown {
  -webkit-animation-name: zoomInDown;
          animation-name: zoomInDown;
}

@-webkit-keyframes zoomInLeft {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
            transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
            animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
            transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
            animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

@keyframes zoomInLeft {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
            transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
            animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
            transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
            animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

.zoomInLeft {
  -webkit-animation-name: zoomInLeft;
          animation-name: zoomInLeft;
}

@-webkit-keyframes zoomInRight {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
            transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
            animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
            transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
            animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

@keyframes zoomInRight {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
            transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
            animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
            transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
            animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

.zoomInRight {
  -webkit-animation-name: zoomInRight;
          animation-name: zoomInRight;
}

@-webkit-keyframes zoomInUp {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
            transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
            animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
            transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
            animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

@keyframes zoomInUp {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
            transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
            animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
            transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
            animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

.zoomInUp {
  -webkit-animation-name: zoomInUp;
          animation-name: zoomInUp;
}

@-webkit-keyframes zoomOut {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
            transform: scale3d(.3, .3, .3);
  }

  100% {
    opacity: 0;
  }
}

@keyframes zoomOut {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
            transform: scale3d(.3, .3, .3);
  }

  100% {
    opacity: 0;
  }
}

.zoomOut {
  -webkit-animation-name: zoomOut;
          animation-name: zoomOut;
}

@-webkit-keyframes zoomOutDown {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
            transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
            animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  100% {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
            transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
    -webkit-transform-origin: center bottom;
            transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
            animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

@keyframes zoomOutDown {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
            transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
            animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  100% {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
            transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
    -webkit-transform-origin: center bottom;
            transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
            animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

.zoomOutDown {
  -webkit-animation-name: zoomOutDown;
          animation-name: zoomOutDown;
}

@-webkit-keyframes zoomOutLeft {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
            transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
  }

  100% {
    opacity: 0;
    -webkit-transform: scale(.1) translate3d(-2000px, 0, 0);
            transform: scale(.1) translate3d(-2000px, 0, 0);
    -webkit-transform-origin: left center;
            transform-origin: left center;
  }
}

@keyframes zoomOutLeft {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
            transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
  }

  100% {
    opacity: 0;
    -webkit-transform: scale(.1) translate3d(-2000px, 0, 0);
            transform: scale(.1) translate3d(-2000px, 0, 0);
    -webkit-transform-origin: left center;
            transform-origin: left center;
  }
}

.zoomOutLeft {
  -webkit-animation-name: zoomOutLeft;
          animation-name: zoomOutLeft;
}

@-webkit-keyframes zoomOutRight {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
            transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
  }

  100% {
    opacity: 0;
    -webkit-transform: scale(.1) translate3d(2000px, 0, 0);
            transform: scale(.1) translate3d(2000px, 0, 0);
    -webkit-transform-origin: right center;
            transform-origin: right center;
  }
}

@keyframes zoomOutRight {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
            transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
  }

  100% {
    opacity: 0;
    -webkit-transform: scale(.1) translate3d(2000px, 0, 0);
            transform: scale(.1) translate3d(2000px, 0, 0);
    -webkit-transform-origin: right center;
            transform-origin: right center;
  }
}

.zoomOutRight {
  -webkit-animation-name: zoomOutRight;
          animation-name: zoomOutRight;
}

@-webkit-keyframes zoomOutUp {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
            transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
            animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  100% {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
            transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
    -webkit-transform-origin: center bottom;
            transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
            animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

@keyframes zoomOutUp {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
            transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
            animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  100% {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
            transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
    -webkit-transform-origin: center bottom;
            transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
            animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

.zoomOutUp {
  -webkit-animation-name: zoomOutUp;
          animation-name: zoomOutUp;
}

@-webkit-keyframes slideInDown {
  0% {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
    visibility: visible;
  }

  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

@keyframes slideInDown {
  0% {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
    visibility: visible;
  }

  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

.slideInDown {
  -webkit-animation-name: slideInDown;
          animation-name: slideInDown;
}

@-webkit-keyframes slideInLeft {
  0% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
    visibility: visible;
  }

  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}

@keyframes slideInLeft {
  0% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
    visibility: visible;
  }

  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}

.slideInLeft {
  -webkit-animation-name: slideInLeft;
          animation-name: slideInLeft;
}

@-webkit-keyframes slideInRight {
  0% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
    visibility: visible;
  }

  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}

@keyframes slideInRight {
  0% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
    visibility: visible;
  }

  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}

.slideInRight {
  -webkit-animation-name: slideInRight;
          animation-name: slideInRight;
}

@-webkit-keyframes slideInUp {
  0% {
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
    visibility: visible;
  }

  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

@keyframes slideInUp {
  0% {
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
    visibility: visible;
  }

  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

.slideInUp {
  -webkit-animation-name: slideInUp;
          animation-name: slideInUp;
}

@-webkit-keyframes slideOutDown {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }

  100% {
    visibility: hidden;
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }
}

@keyframes slideOutDown {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }

  100% {
    visibility: hidden;
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }
}

.slideOutDown {
  -webkit-animation-name: slideOutDown;
          animation-name: slideOutDown;
}

@-webkit-keyframes slideOutLeft {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }

  100% {
    visibility: hidden;
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
}

@keyframes slideOutLeft {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }

  100% {
    visibility: hidden;
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
}

.slideOutLeft {
  -webkit-animation-name: slideOutLeft;
          animation-name: slideOutLeft;
}

@-webkit-keyframes slideOutRight {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }

  100% {
    visibility: hidden;
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
}

@keyframes slideOutRight {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }

  100% {
    visibility: hidden;
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
}

.slideOutRight {
  -webkit-animation-name: slideOutRight;
          animation-name: slideOutRight;
}

@-webkit-keyframes slideOutUp {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }

  100% {
    visibility: hidden;
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
}

@keyframes slideOutUp {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }

  100% {
    visibility: hidden;
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
}

.slideOutUp {
  -webkit-animation-name: slideOutUp;
          animation-name: slideOutUp;
}


@keyframes blink{
    0% {opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}

@-webkit-keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}

@-moz-keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}

@keyframes loader {
	0% {
		transform: rotate(0deg);
	}

	25% {
		transform: rotate(180deg);
	}

	50% {
		transform: rotate(180deg);
	}

	75% {
		transform: rotate(360deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

@keyframes loader-inner {
	0% {
		height: 0%;
	}

	25% {
		height: 0%;
	}

	50% {
		height: 100%;
	}

	75% {
		height: 100%;
	}

	100% {
		height: 0%;
	}
}
/**************** animate css ends***************/


/******** add to cart css starts ***********/
.minicart {
    position: absolute;
    right: -25px;
    top: calc(100% + 40px);
    z-index: 999;
    width: 300px;
    max-height: 400px;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
    padding: 15px;
}
.minicart.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.minicart-body {
    max-height: 200px;
    overflow-y: auto;
    padding-right: 5px;
    margin-bottom: 10px;
}
.minicart-items {
    list-style: none;
    padding: 0;
    margin: 0;
}
.header-nav ul li {
    position: relative;
}
#cart-icon-count.cart-count-badge {
    position: absolute;
    top: -5px;
    /* right: -10px; */
    background-color: #ff4c3b;
    color: #ffffff;
    font-size: 11px;
    font-weight: 600;
    border-radius: 50%;
    padding: 2px 6px;
    min-width: 18px;
    text-align: center;
    line-height: 1;
    display: inline-block;
    border: 2px solid #ffffff;
}
.cart-count-badge[data-count="0"] {
    display: none !important;
}
.minicart-items li {
    display: flex;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
    list-style: none;
    margin: 0;
}
.minicart-items .product-thumb {
    flex-shrink: 0;
    float: left;
    width: 21.33%;
    margin-right: 15px;
    overflow: hidden;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
}
.minicart-items .product-thumb a {
    padding: 0;
}
.minicart-items .product-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* .minicart-items .product-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0;
    margin: 0;
    min-width: 0;
} */
.minicart-items{
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0;
    margin: 0;
    min-width: 0;
}
.minicart-items .product-name {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    text-decoration: none;
    line-height: 1.2;
    margin-bottom: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-left: 0;
    padding-top: 5px;
    padding-bottom: 5px;
}
.minicart-items .product-price {
    font-size: 13px;
    color: #555;
    font-weight: 500;
}

.minicart-items .product-thumb a {
    display: block;
    line-height: 0;
}

.minicart-items .remove {
    margin-left: auto;
    padding-left: 10px;
    align-self: center;
}
.minicart-items .remove-item-btn {
    cursor: pointer;
    color: #ff4c3b;
    font-size: 16px;
    opacity: 0.8;
    transition: opacity 0.2s ease;
}
.minicart-items .remove-item-btn:hover {
    opacity: 1;
    color: #cc0000;
}
.minicart-items .product-info {
    display: flex;
    flex-direction: column;
    flex-shrink: 1;
    min-width: 0;
}
.minicart-items .remove {
    padding-left: 10px;
    align-self: center;
}
.header-area .header-bottom li {
    position: relative;
}
.minicart-toggle {
    position: relative;
    display: inline-block;
}
.cart-count-badge {
    position: absolute;
    top: -5px;
    right: -10px;
    background-color: #ff0000;
    color: #ffffff;
    font-size: 10px;
    font-weight: bold;
    line-height: 1;
    min-width: 18px;
    height: 18px;
    border-radius: 50%;
    padding: 4px 0 0 0;
    text-align: center;
    white-space: nowrap;
}
/* Custom CSS to prevent select/form element overflow on mobile devices */
@media (max-width: 767px) {

    /* Target the select element specifically */
    #country {
        width: 100% !important;
        box-sizing: border-box;
        /* Ensures padding and border are inside the total width */
    }

    /* General rule for all select/input elements in the form */
    .form-control,
    .form-select {
        max-width: 100% !important;
        box-sizing: border-box;
    }
.minicart-toggle {
    margin-top: 7px;
}
}
/******** add to cart css ends ***********/


body{
    font-family: "Montserrat", serif;
    font-weight: 400;
    font-style: normal;
}
h1{
    font-size: 33PX;
}
h2{
    font-size: 28px;
}
p{
    font-size: 16px;
    color: #737373;
}
.mt-70{
    margin-top:70px
}
.mb-70{
    margin-bottom:70px
}
.work-p p{
    color: white !important;
}
.reveal{
    position: relative;
    display: inline-flex;
    overflow: hidden;
}
.reveal img{
    height: 100%;
    width: 100%;
    -webkit-transform-origin: left;
    transform-origin: left;
}
/* coommon css */
.transparent-btn-1 {
    border-width: 2px;
    border-color: rgba(255, 255, 255, 0.4);
    background-color: #FFFFFF;
    color: #1D84B5;
}
.InnerBannerText h1{
    color: #FFFFFF;
    font-weight: 500;
    font-size: 36px;
}
ul {
    margin: 0px;
    padding: 0px;
}
.generic-btn {
    font-size: 16px;
    line-height: 1px;
    padding: 18px 40px;
    line-height: 1;
    -webkit-transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    -ms-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;
    display: inline-block;
    border-radius: 10px;
    font-weight: 700;
    border: 2px solid transparent;
}
.generic-btn.small-padding {
    padding: 10px 22px;
}
a {
    text-decoration: none;
}
a,
button {
    color: #1696e7;
    outline: medium none;
}
a,
.button {
    -webkit-transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    -ms-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;
}
/* home page css */
/*.slick-slider {
    position: relative;
    display: block;
    box-sizing: border-box;
}
.slick-slider .slick-track,
.slick-slider .slick-list {
    transform: translate3d(0, 0, 0);
}
.slick-slide {
    float: left;
    height: 100%;
}
.slick-list {
    position: relative;
    display: block;
    overflow: hidden;
    margin: 0;
    padding: 0;
}
.slider-height {
    min-height: 980px;
}
.slider-area {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.slider-area {
    background-position: bottom center;
}
.slider-text{
    width: 35%;
}
.slick-track {
    position: relative;
    top: 0;
    left: 0;
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.slider-text-5 {
    padding: 0 15px;
    margin-left: 0;
}
.slider-text {
    position: relative;
    z-index: 99;
}
.slider-text.has-border h1 {
    border-bottom: 1px solid #e2e2e2;
    padding-bottom: 30px;
    display: inline-block;
    margin-bottom: 25px;
    font-weight: 600;
    font-size: 32px;
}
.slider-text p {
    font-size: 20px;
    line-height: 1.5;
    margin-bottom: 46px;
}
*/
.owl-carousel .item {
    width: 100%;
    height:100%;
}
.owl-carousel {
    position: relative;
    overflow: hidden;
}
.header-transparent {
    position: absolute;
    left: 0;
    z-index: 99;
    right: 0;
    top: 40px;
}
.header-padding-2 {
    padding: 0 75px;
}
.header-wrapper {
    background-color: #fff;
    padding: 0 30px;
    box-shadow: 0px 30px 100px 0px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
}
.f-left {
    float: left;
}
a {
    text-decoration: none;
}
a,
button {
    color: #1696e7;
    outline: medium none;
}
.logo img {
    width: 140px;
    height: 70px;
    padding-bottom: 12px;
}
.header-menu-wrapper {
    float: left;
}
.has-border {
    padding-left: 72px;
    margin-left: 120px;
    position: relative;
}
.f-left {
    float: left;
}
ul {
    margin: 0px;
    padding: 0px;
}
.header-nav ul li {
    display: inline-block;
    position: relative;
}
li {
    list-style: none;
}
.header-nav ul li a {
    color: #000000;
    font-size: 16px;
    line-height: 1;
    padding: 45px 0;
    font-weight: 500;
    display: inline-block;
    padding-left: 25px;
}
.header-nav .submenu {
    position: absolute;
    top: 110%;
    left: 0;
    min-width: 200px;
    padding: 0px 0;
    background: #fff;
    border-top: 4px solid #1D84B5;
    z-index: 11;
    visibility: hidden;
    opacity: 0;
    transition: all 0.3s;
    box-shadow: 0 0 60px 0 rgba(0, 0, 0, 0.07);
}
.header-nav ul li:hover .submenu {
    visibility: visible;
    opacity: 1;
    top: 100%;
}
.header-nav .submenu li a {
    display: block;
    font-weight: 500;
    text-transform: capitalize;
    font-size: 14px;
    word-spacing: 2px;
    padding: 9px 25px;
}
.header-nav-2 .submenu {
    left: 50px !important;
}
.bg-color{
    background-color: #1D84B5;
}
.service-card img{
    width: 100%;
}
.service-details{
    z-index: 10;
    bottom: 40px;
    padding:50px;
    color: #fff;
}
.learnMore {
    border: 2px solid #fff;
    font-size: 21px;
    color: #fff;
    font-weight: 600;
}
.learnMore:hover {
    border: 2px solid #FFFFFF;
    color: #217BB0;
    background-color: #FFFFFF;
}
.service-details h3{
    font-size: 35px;
    font-weight: 700;
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5); 
    color: white; 
}
@media only screen and (min-width: 1401px) {
    .service-details h3 {
        font-size: 45px;
        font-weight: 700;
    }
}
@media (min-width : 577px) and (max-width : 992px){
    .service-details{
        padding: 0px !important;
    }
   .service-details h3{
       font-size : 28px;
    }
}
@media (max-width: 992px) {
    .service-card img{
        height: 562px !important;
	font-size : 19px !important;
    }
    .transparent-btn-2{
        padding: 20px 20px !important;
	width: 45% !important;
	font-size: 20px !important;
    }
}
.AppointmentSection {
    background-color: #217BB0;
    padding: 30px 0px;
    margin-top:-7px;
}
.AppointmentSection svg {
    width: 60px;
    height: 60px;
    margin-right: 10px;
}
.detail-group h6 {
    font-size: 15px;
    color: #FFFFFF;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 0;
}
.detail-group h5 a {
    font-size: 15px;
    color: #fff;
    text-decoration: none;
    margin-bottom: 0;
}
.AppointmentSection h2 {
    color: #fff;
    text-align: center;
    font-size: 21px;
    font-weight: 500;
    letter-spacing: 0.5px;
    line-height: 1.5;
    display: flex;
    align-items: center;
    justify-content: center;
}
.AppointmentSection h2 span {
    border-top: 2px solid #F5EFEE63;
    width: 50px;
    margin-left: 5%;
}
.AppointmentSection .bookappointment a{
    color: #217BB0;
    font-size: 16px;
    font-weight: 500;
}
@media (max-width: 768px){
   .AppointmentSection h2 {
        margin: 10px 0px;
     }
    .AppointmentSection h2 span {
         display: none;
     }
  .AppointmentSection .text-end {
      text-align: center !important;
      margin: 10px 0px;
      margin-top: -1px;
   }
   .bookappointment {
	 text-align: center;
     }
}
.service-btn{
    border: 1px solid;
    width: 255px;
    height: 62px;
}
.appoint-btn{
    width: 255px;
    height: 62px;
    background-color: #fff;
}
.service-btn:hover{
    background-color: #1D84B5;
}
.support-content{
    margin-left: 35px;
    color: #fff;
}
.support-content h3{
    font-size: 20px;
}
.appoint p{
    color: #fff;
        font-size: 20px;
        padding-top: 12px;
}
.service-card img {
    height: 670px;
    object-fit: cover;
}
@media only screen and (min-width: 1401px) {
    .service-card img {
        height: 750px;
    }
}
/* Mobile Menu Toggle Button */
.mobile-menu-toggle {
    background: none;
    border: none;
    font-size: 28px;
    cursor: pointer;
    display: block;
    position: absolute;
    right: 35px;
    top: 15px;
    z-index: 1000;
}
.mobile-ul ul li {
    line-height: 30px;
}
.mobile-menu-box {
    position: fixed;
    top: 0;
    right: -100%;
    width: 80%;
    height: 100vh;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.2);
    padding: 20px;
    transition: right 0.4s ease-in-out;
    overflow-y: auto;
    z-index: 9999;
}
.mobile-menu-box.active {
    right: 0;
}
.close-menu {
    font-size: 24px;
    cursor: pointer;
    position: absolute;
    top: 15px;
    right: 20px;
    background: none;
    border: none;
}
@media (min-width: 992px) {
    .mobile-menu-toggle {
        display: none;
    }
    /* .about-area__wrapper::after {
        left: 270px !important;
    } */
}
@media only screen and (max-width: 1700px) {
    .header-wrapper {
        padding: 0 34px;
    }
}
@media only screen and (max-width: 1480px) {
    .header-padding-2 {
        padding: 0 10px;
    }
}
@media only screen and (max-width: 768px){
    .service-details h3 {
      font-size: 25px;
      font-weight: 600;
   }
	.learnMore {
    	font-size: 18px;
    	font-weight: 600;
    	padding: 20px;
	}
}
#carouselExampleFade video{
    width:100%;
}
#carouselExampleFade{
    position:relative;
}
        .firstText {
            position: absolute;
            top: 40%;
            left: 5%;
        }
        .firstText h1 {
            color: #ffffff;
            font-size: 30px;
            font-weight: 600;
    	    line-height: 1.5;
        }
	.firstText h3 {
            color: #ffffff;
            font-size: 30px;
            font-weight: 600;
    	    line-height: 1.5;
        }
        .firstText p {
            font-size: 18px;
            color: #ffffff;
            margin-top: 20px;
}
@media (max-width : 992px){
    #carouselExampleFade,
    .homeBanner,
    .homeBannerItem,
    .video-slide {
        min-height: 60vh !important;
    }
    .video-slide {
        object-fit: fill;
        width: 100%;
    }
}
@media (max-width : 576px){
    .firstText h1 {
        font-size: 25px;
    }
.firstText h3 {
        font-size: 25px;
    }
    .firstText {
        top: 30%;
    }
    #carouselExampleFade,
    .homeBanner,
    .homeBannerItem,
    .video-slide {
        min-height: 60vh !important;
    }
    .video-slide {
        object-fit: fill;
        width: 100%;
    }
    .wellness-solution{
        margin-left: 33px !important;
    }
}
/* about us css starts */
.about-img img{
    width: 100%;
}
.aboutus-details h2{
    color: #217BB0;
    font-size: 30px;
    font-weight: 500;
    border-bottom: 1px solid #e2e2e2;
    padding-bottom: 20px;
    display: inline-block;
    margin-bottom: 1px;
}
.aboutus-details p:last-of-type {
    //border-bottom: 1px solid #e2e2e2;
    padding-bottom: 25px;
    display: block;
}
@media (max-width: 991px){
    .counter-number{
      font-size: 25px !important;
      font-weight: 500 !important;
    }
}
/* @media only screen and (max-width: 992px) {
    .about-area__wrapper::after {
        left: 270px;
        right: auto;
    }
} */
@media only screen and (max-width: 575px) {
    .mt-24{
         margin-top:24px;
     }
    .about__meta {
        margin-bottom: 26px;
    }
    .mt-70 {
        margin-top: 40px;
    }
    h2 {
        font-size: 23px;
    }
    .app-h{
        font-size: 17px !important;
        margin-left: 20px;
    } 
    .mt-sm{
        margin-top: 0px !important;
    }

}
.horizontal-line {
    margin: 10px auto 10px;
    border-bottom: 1px solid #86ECFD;
}
.about h4 {
    color: #217BB0;
}
.about h5 {
    font-size: 18px;
    color: #217BB0;
    font-weight: 500;
}
.about h2 {
    font-size: 18px;
    color: #217BB0;
    font-weight: 500;
}
.about {
    font-family: "Montserrat", sans-serif;
}
.about p {
    
    font-size: 15px;
    text-align: justify;
}
.image-stack {
    position: relative;
    width: fit-content;
    right: 20px;
}
.image-stack .first {
    position: relative;
    z-index: 3;
    width: 300px;
    left: 8px;
    width: 275px;
    top: -52px;
}
.image-stack .background-box {
    position: absolute;
    top: 122px;
    left: 263px;
    width: 328px;
    height: 323px;
    background-color: #1F7BB1;
    z-index: 1;
    border-radius: 5px;
}
.image-stack .second {
    position: absolute;
    top: 18px;
    left: 298px;
    z-index: 2;
    width: 271px;
}
@media(max-width:576px) {
    .image-stack {
        right: 0px !important;
	width: 100%;
        margin-left: -20px;
    }
    .image-stack .background-box {
        left: 40px;
        width: 163px;
    }
    .image-stack .second {
        position: absolute;
        top: -20px;
        left: 220px;
        z-index: 2;
        width: 155px;
    }
    .image-stack .background-box {
        position: absolute;
        top: 30px;
        left: 160px;
        width: 240px;
        height: 201px;
        background-color: #1F7BB1;
        z-index: 1;
        border-radius: 5px;
    }
    .image-stack .first {
        width: 300px;
        left: 40px;
        width: 163px;
        top: -40px;
    }
.wellnessSec span {
    font-size: 40px !important;
}
.wellnessSec h3 {
    font-size: 30px !important;
}
}
@media (min-width:577px) and (max-width: 991px) {
    .image-stack .first {
        width: 300px;
        left: 26px;
        top: -52px;
    }
    .image-stack {
        position: relative;
        width: fit-content;
        right: 0px;
    }
    .image-stack .background-box {
        top: 165px;
        left: 298px;
        width: 385px;
        height: 323px;
        background-color: #1F7BB1;
        z-index: 1;
        border-radius: 5px;
    }
        .image-stack .second {
            top: 18px;
            left: 357px;
            z-index: 2;
            width: 300px;
        }
}

/* about us css starts */
.borderBottom{
    border-bottom: 1px solid #86ECFD;
    padding-bottom: 15px;
    display: block;
}
.map{
    margin-top: -45px;
    position: relative;
    z-index: 1;
}
/* banner css starts */
.banner__1 {
    position: relative;
    background-size: cover;
    background-position: center center;
}
.banner__1--content {
    z-index: 9;
    position: relative;
}
.generic-title span {
    color: #737373;
    font-size: 25px;
    line-height: 2.3;
    display: block;
    margin-bottom: 2px;
}
.generic-title .fwmedium{
    font-weight: 500;
    font-size: 16px;
}
.generic-title .h-4{
    font-size: 18px;
    color: #217BB0;
    font-weight: 500;
}
.banner__1--content a {
    margin-left: 8px;
    margin-right: 8px;
}
.banner__1--content a {
    margin-left: 8px;
    margin-right: 8px;
}
.mt-40{
    margin-top: 40px;
}
.transparent-btn-2 {
    border: 2px solid #FFFFFF;
    color: #FFFFFF;
    border-radius: 2px;
    width: 20%;
}
.transparent-btn-2:hover {
    border: 2px solid #FFFFFF;
    color: #217BB0;
    background-color: #FFFFFF;
    border-radius: 2px;
    width: 20%;
}
.gray-h2 {
    color: #217BB0;
    font-size: 30px;
    font-weight: 500;
}
.banner-p{
	font-size: 25px;
    font-weight: 200;
}
@media only screen and (max-width: 575px) {
    .banner-p {
        padding: 20px 10px;
    }
    .generic-title h4 {
        font-size: 21px;
    }
}
@media (max-width: 767px){
    .sm-flex {
        display: flex; 
        align-items: center;
        justify-content: center; 
    }
.sm-flex-btn{
padding: 15px 40px;
    } 
}
/* banner css ends */
/* facility css starts */
.bg-blue{
    background-color: #1D84B5;
}
.bg-blue2 {
    background-color: #1A7BAA;
}

.custom-list ul li{
    line-height: 40px;
}
.custom-list{
    margin-left: 45px;
}
.mission-vision {
    bottom: -60px;
    justify-content: center;
    align-items: start;
    padding: 20px;
    background-color: #fff;
    z-index: 1;
}
.mission-vision .vision {
    border-left: 1px dotted #217BB0;
    padding-left: 20px; 
    margin-left: 10px; 
}
.custom-list ul li::before{
    content: '';
    position: absolute;
    left: 16%;
    width: 15px;
    height: 2px;
    background-color: #000;
    transform: translateY(-50%);
}
.mv h3 {
    font-size: 20px;
    font-weight: 700;
    color: #217BB0;
}
.mv p {
    font-size: 14px;
}
@media (max-width: 768px) {
    .custom-list ul li::before {
        left: 5%;
        width: 15px;
    }
    .custom-list{
        margin-bottom: 20px;
    }
    .mission-vision{
        margin-bottom: 25px;
        padding: 10px;
    }
    .mv p {
        font-size: 12px;
    }
}
@media (max-width: 992px){
    .custom-list ul li::before{
        left: 5%;
    }
    .custom-list {
        margin-bottom: 70px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .md-w-100 {
        width: 100%;
    }
    .mb-60{
        margin-bottom: 0px !important;
    }
}
/* facility css ends */
.reviewBg {
   background-color: #F9F9F9;
}
.review-item p{
    font-family: 'Roboto', sans-serif;
    font-style: italic;
}
.TestimonalBtn {
    color: #217BB0;              
    background-color: transparent; 
    border: 1px solid #217BB0;     
}
.TestimonalBtn.active {
    color: #fff;                 
    background-color: #217BB0;   
}
.TestimonalBtn:hover {
    background-color: #217BB0;   
    color: #fff;                 
}
.TestimonalBtn:focus {
    outline: none;
    box-shadow: none;
}
/* counter css starts */
.counter-section{
    background-image: url(../images/home/GREEN_ARRAY_HOMEPAGE_COUNTER.jpg);
    background-size: cover;
}
.counter-number{
    font-size: 40px;
    font-weight: 600;
}
/* counter css starts */

/* team area starts here */
.team__img img {
    max-width: 100%;
}
@media only screen and (max-width: 1480px) {
    .team__img img {
        max-width: 84%;
    }
}
@media (max-width: 767px) {
    .team__img img {
        width: 86%;
        max-width: auto;
    }
    .team-area-4 {
        margin-top: 0px;
    }
}
.team__left p {
    font-size: 18px;
    line-height: 30px;
    margin-top: 25px;
    padding-top: 33px;
    border-top: 1px solid #ddd;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .team-title-spacing {
        margin-bottom: 0;
    }
}
.testimonial__text {
    margin-top: 32px;
}
.testimonial__text span {
    font-size: 14px;
    transition: all 0.5s;
    display: block;
    line-height: 30px;
    color: #9e4b47;
    font-weight: 700;
}
.testimonial__text h4 {
    font-size: 24px;
    transition: all 0.5s;
    line-height: 30px;
}
.testimonial__img {
    width: fit-content;
    height: fit-content;
    margin: auto;
    display: inline-block;
    position: relative;
}
.testimonial__img-inner {
    position: absolute;
    left: 0;
    transition: 0.5s ease-out;
    display: flex;
    transition: all 0.5s;
    opacity: 0;
    visibility: hidden;
    align-items: center;
    justify-content: center;
    top: 0;
    right: 0;
    bottom: 0;
    border-radius: 50%;
    background-color: rgba(158, 75, 71, 0.5);
}
.testimonial-social a {
    color: #fff;
    font-size: 16px;
    padding-left: 8px;
    display: inline-block;
    padding-right: 8px;
}
.testimonial__active.slick-slide {
    position: static;
}
.p-static {
    position: static;
}
.p-rel {
    position: relative;
}
.testimonial__active .slick-dots,
.appoint__active .slick-dots {
    position: absolute;
    left: 0;
    bottom: 0;
}
.testimonial__active .slick-dots li,
.appoint__active .slick-dots li {
    display: inline-block;
}
@media (max-width: 767px) {
    .testimonial__active .slick-dots li:not(:last-child),
    .appoint__active .slick-dots li:not(:last-child) {
        margin-bottom: 20px;
    }
}
.testimonial__active .slick-dots button,
.appoint__active .slick-dots button {
    margin-right: 10px;
    width: 60px;
    height: 60px;
    transition: all 0.3s ease-out;
    color: #9e4b47;
    border: none;
    background: #fff2f1;
    border-radius: 10px;
    font-size: 16px;
    line-height: 30px;
    font-weight: 700;
}
.testimonial__active .slick-dots button:hover,
.appoint__active .slick-dots button:hover {
    background-color: #1696e7;
    color: #fff;
}
@media only screen and (max-width: 992px) {
    .testimonial__active .slick-dots button:hover,
    .appoint__active .slick-dots button:hover {
        background-color: #1D84B5;
        color: #fff;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .testimonial__active .slick-dots,
    .appoint__active .slick-dots {
        margin-top: 80px;
        position: static;
    }
}
@media (max-width: 767px) {
    .testimonial__active .slick-dots,
    .appoint__active .slick-dots {
        margin-top: 80px;
        position: static;
    }
}
.testimonial__active .slick-active button,
.appoint__active .slick-active button {
    background-color: #9e4b47;
    color: #fff;
}
@media only screen and (max-width: 992px) {
    .testimonial__active .slick-active button,
    .appoint__active .slick-active button {
        background-color: #ff786e;
    }
}
@media only screen and (min-width: 1200px) {
    .single-team {
        height:430px !important;
    }
}
.single-team {
    position: relative;
    border-radius: 5px;
}
@media (max-width: 767px) {
    .single-team-team {
        margin-bottom: 0;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .single-team-2 {
        margin-top: 59px !important;
    }
}
.single-team .team__img {
    transform: translateY(-60px);
    position: relative;
    z-index: 9;
}
.single-team .team__img--action {
    position: absolute;
    z-index: 9;
    left: 0;
    top: 0;
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s;
}
.single-team .team__img--action a {
    width: 50px;
    height: 50px;
    display: inline-block;
    background: #9e4b47;
    color: #fff;
    text-align: center;
    line-height: 50px;
    border-top-left-radius: 5px;
    border-bottom-right-radius: 5px;
}
.single-team .team__text {
    margin-top: -40px;
    padding-left: 10px;
    padding-bottom: 10px;
    position: relative;
    z-index: 9;
}
.single-team .team__text h4 {
    font-size: 17px;
    transition: all 0.5s;
    line-height: 30px;
    color: #1696e7;
}
.single-team .team__text h4 a:hover {
    color: #fff;
}
.single-team .team__text h4:hover {
    color: #fff;
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
    .single-team .team__text h4 {
        font-size: 19px;
    }
}
.single-team .team__text span {
    font-size: 19px;
    line-height: 30px;
    transition: all 0.5s;
    color: #656666;
}
.team__text span:nth-of-type(2) {
    font-size: 17px;
}
.margin-b{
 margin-bottom: 10%;
}
.single-team .team__social {
    position: absolute;
    right: 15px;
    top: 20px;
    z-index: 9;
}
.single-team .team__social a {
    color: #bbbbbb;
    font-size: 14px;
    line-height: 40px;
}
.single-team .team__social a:hover {
    color: #fff;
}
.single-team::after {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #f9f9f9;
    content: "";
    border-radius: 5px;
    transition: all 0.5s;
}
.single-team:hover::after {
    background-color: #1D84B5;
    opacity: 0.9;
}
.single-team:hover .team__text h4 a {
    color: #FFFFFF;
}
.single-team:hover .team__text h4{
    color: #FFFFFF;
}
.single-team:hover .team__text span {
    color: #fff;
}
.single-team:hover .team__img--action {
    opacity: 1;
    visibility: visible;
}
.single__testimonial {
    background-color: #f9f9f9;
    padding: 50px 0;
    transition: all 0.5s ease-out;
}
.single__testimonial:hover {
    background-color: #9e4b47;
}
.single__testimonial:hover .testimonial__text h4 {
    color: #fff;
}
.single__testimonial:hover .testimonial__text span {
    color: #fff;
}
.single__testimonial:hover .testimonial__img-inner {
    opacity: 1;
    visibility: visible;
}
.single-team {
    width: 330px;
}
@media only screen and (max-width: 1480px) {
    .single-team {
        width: 100%;
    }
}
@media only screen and (min-width: 1481px) {
    .single-team {
        width: 310px;
    }
}
@media (max-width: 767px) {
    .single-team {
        margin-bottom: 100px;
        margin-top: 0;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .team-margin {
        margin-top: 0;
    }
    .single-team:last-child {
        margin-top: 100px;
    }
   .doctor-box__2 {
        overflow: hidden;
        margin-top: 70px;
        margin-bottom: 70px;
    }
}
.box__item .user__thumb img {
    border-radius: 50%;
}
.mb-60 {
    margin-bottom: 60px;
}
/* team area ends here */
/* award css starts  */
#Awards {
    display: flex;
}
.AwardLeft {
    width: 70%;
    background: #1D84B5;
    padding: 3% 5% 2%;
}
#Awards h5 {
    color: #fff;
    letter-spacing: 1px;
    padding-top: 10px;
    padding-left: 15px;
    font-size: 17px;
    line-height: 1.5;
}
#Awards .a-h {
    color: #fff;
    letter-spacing: 1px;
    padding-top: 10px;
    padding-left: 15px;
    font-size: 18px;
}
#Awards .award-h {
    font-size: 28px;
    color: #fff;
}
.AwardBox {
    display: flex;
    background-color: #1A7BAA;
    padding: 7px 15px;
    align-items: center;
    margin: 18px 0px;
}
.AwardBox div:nth-child(1) {
    width: 30%;
}
.AwardBox div {
    padding: 10px;
}
.AwardBox div:nth-child(2) {
    position: relative;
    width: 70%;
    color: #fff;
    text-transform: uppercase;
    padding: 20px;
    margin: 0px 15px;
}
.AwardBox div:nth-child(2):before {
    left: 0;
}
.AwardBox div:nth-child(2):before {
    content: "";
    position: absolute;
    width: 1px;
    height: 100%;
    top: 50%;
    transform: translateY(-50%);
    background: linear-gradient(180deg, white, transparent 60%);
    background-repeat: repeat-y, repeat-y;
    background-size: 100px 10px, 0px 0px, 0px 0px, 0px 0px;
    background-position: 0px 0px, 0px 0px, 0px 0px, 0px 0px;
}
.AwardBox div:nth-child(2):after {
    right: 0;
}
.AwardBox div:nth-child(2):before {
    content: "";
    position: absolute;
    width: 1px;
    height: 100%;
    top: 50%;
    transform: translateY(-50%);
    background: linear-gradient(180deg, white, transparent 60%);
    background-repeat: repeat-y, repeat-y;
    background-size: 100px 10px, 0px 0px, 0px 0px, 0px 0px;
    background-position: 0px 0px, 0px 0px, 0px 0px, 0px 0px;
}
.AwardBox div {
    padding: 10px;
}
#Awards h2 {
    color: #fff;
    line-height: 1.5;
}
.AwardBox div:nth-child(2) h2 {
    text-transform: capitalize !important;
    font-size: 16px !important;
    font-weight: normal !important;
    margin: 0px !important;
    padding-right: 0% !important;
    word-spacing: 1px;
}
.AwardRight {
    position: relative;
    width: 40%;
    background-image: url(../images/home/GREEN_ARRAY_HOMEPAGE_ACHIEVEMENTS.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
.AwardRight h3 span {
    color: #fff;
    font-weight: 900;
}
.AwardBox-img img {
    width: 25%;
    height: 20%;
}
@media (max-width: 767px) {
    #Awards {
        flex-direction: column;
    }
    #Awards h5 {
        font-size: 14px;
    }
    .AwardLeft {
        order: 2;
        width: 100%;
        padding: 15px;
    }
    .AwardRight {
        order: 1;
        width: 100%;
        height: 35vh;
        position: relative;
        padding: 15px;
        background-size: cover;
    }
    .AwardRight h3 {
        position: static;
        padding: 10px;
    }
#Awards h5 {
    padding-left: 5px !important;
}
}
/* insight css starts */
.insight-info p {
    font-size: 18px;
    color: #2071A1;
    font-weight: 400;
    background-color: #FAF9F9;
}
@media only screen and (max-width: 768px){
    .insight-info img{
        width: 100%;
    }
}
/* insight css ends */
/* product css starts  */
@media (max-width: 767px) {
    .featured-area {
        margin-top: 50px;
    }
}
.featured__product {
    background-color: #F7FBFF;
    padding: 58px 0;
    border-radius: 10px;
}
.featured__product-img {
    position: relative;
    display: flex;
    margin-bottom: 35px;
    justify-content: center;
}
.featured__product-img img {
    transition: all 0.5s ease-out;
}
@media only screen and (max-width: 1480px) {
    .featured__product-img img {
        height: 100%;
        object-fit: cover;
    }
}
.featured__product-img .secondary {
    position: absolute;
    opacity: 0;
    visibility: hidden;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    width: auto !important;
}
.featured__product-img span.onsale {
    position: absolute;
    right: 50px;
    top: -12px;
    width: 80px;
    height: 80px;
    background: #9e4b47;
    border-radius: 80px;
    line-height: 80px;
    font-size: 14px;
    text-align: center;
    font-weight: 700;
    color: #fff;
}
.featured__product span .price {
    font-size: 18px;
    font-weight: 700;
    line-height: 58px;
    color: #9e4b47;
}
.featured__product h4 {
    font-size: 20px;
    line-height: 21px;
    margin-top: 10px;
    margin-bottom: 0;
}
.featured__product h4 a {
	color:#737373;
	font-weight: 400;
}
.featured__product h4:hover a {
    color: #9e4b47 !important;
}
.featured__product:hover .product-action__icon {
    opacity: 1;
    visibility: visible;
}
.product-action {
    position: absolute;
    bottom: 50px;
    left: 0;
    right: 0;
    text-align: center;
}
.product-action__icon {
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s;
}
.product-action__icon a {
    width: 50px;
    height: 50px;
    background: #fff;
    box-shadow: 0px 20px 40px 0px rgba(0, 0, 0, 0.08);
    color: #777777;
    display: inline-block;
    text-align: center;
    line-height: 50px;
    margin-left: 2.5px;
    margin-right: 2.5px;
    border-radius: 10px;
}
.product-action__icon a:hover {
    background-color: #217BB0;
    color: #fff;
}
.proOrderBtn{
    display: flex;
    justify-content: center;
}
.proOrderBtn input{
    width: 60%;
    color: #fff;
    background: #217BB0;
}
.proOrderBtn input:hover{
    color: #fff;
}
.orderTitle{
    left: 50% !important;
    transform: translateX(-50%) !important;
    position: absolute !important;
    font-size: 22px;
}
.gutPro h2{
    font-size: 25px;
    color: #217BB0;
    line-height: 47px;
}
.gutPro price{
    line-height: 25px;
    font-size: 18px;
    font-weight: 600;
}
.madeSimple span{
    font-weight: 600;
    color: #217BB0;
}
.discover h6 {
    font-size: 18px;
    font-weight: 400;
    color: #217BB0;
}
.guth6{
    color: #217BB0;
    font-weight: 400;
}
.cardicP{
    color: #217BB0;
    font-weight: 500;
}
.gutEco{
    font-size: 19px;
    font-weight: 600;
    color: #217BB0;
}
.gutEcoHeading {
    position: relative;
    padding-bottom: 10px;
    display: inline-block;
}
.gutEcoHeading::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 76px;
    height: 2px;
    background-color: #217BB0;
}
@media (max-width: 767px) {
    .features__area {
        padding-top: 70px;
    }
}
.features__text {
    background-color: #fff;
    padding: 100px 83px;
    padding-top: 80px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    padding-bottom: 95px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .features__text {
        padding: 30px;
    }
}
@media only screen and (max-width: 1480px) {
    .features__text {
        padding-top: 50px;
        padding-bottom: 50px;
    }
}
.features__area nav {
    padding: 30px 0;
}
.feature__text {
    overflow: hidden;
}
.feature__logo {
    float: left;
    margin-right: 30px;
}
@media (max-width: 767px) {
    .feature__logo {
        float: none;
        margin-right: 0;
        margin-bottom: 15px;
    }
   .features__text {
        padding: 30px;
    }
}
.feature__text h4 {
    font-size: 20px;
    line-height: 1;
    margin-bottom: 15px;
}
.feature__text p {
    font-size: 14px;
    line-height: 24px;
}
.feature__text span {
    display: block;
}
@media only screen and (max-width: 1480px) {
    .feature__img {
        height: 100%;
    }
    .feature__img img {
        height: 100%;
        object-fit: cover;
    }
}
.gray-bg {
    background-color: #f9f9f9;
}
.pb-445 {
    padding-bottom: 445px;
}
a.featured-btn {
    font-size: 16px;
    line-height: 32px;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 700;
    padding-left: 35px;
}
a.featured-btn i {
    padding-left: 10px;
    vertical-align: middel;
    font-size: 14px;
    color: #ddcec0;
    -webkit-transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    -ms-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;
}
a.featured-btn span {
    vertical-align: middle;
    font-size: 16px;
    line-height: 32px;
    padding-left: 10px;
    color: #999999;
}
a.featured-btn:hover {
    color: #9e4b47;
}
a.featured-btn:hover i {
    color: #9e4b47;
    padding-left: 15px;
}
@media (max-width: 767px) {
    .pb-445 {
        padding-bottom: 70px;
    }
    a.featured-btn {
        padding: 0;
        display: block;
        margin-top: 17px;
    }
}
.features__tab ul li button {
    line-height: 1;
    padding: 24px 94px;
    display: inline-block;
    background: #fff;
    background-color: #fff;
    color: #000000;
    border-radius: 10px;
    margin: 0 10px;
}
.features__tab ul li button.nav-link.active {
    background-color: #9e4b47;
    color: #fff;
}
@media only screen and (max-width: 1700px) {
    .features__tab ul li button {
        padding: 21px 56px;
        margin-right: 16px;
        margin-bottom: 20px;
    }
}
@media only screen and (max-width: 992px) {
    .features__tab ul li button {
        padding: 18px 36px;
    }
}
@media (max-width: 767px) {
    .features__tab ul li button {
        padding: 16px 17px;
        margin-right: 7px;
        margin-bottom: 10px;
        font-size: 14px;
    }
}
.features__wrapper {
    border-radius: 15px;
    overflow: hidden;
}
.features__tab ul {
    justify-content: center;
}
.feature-btn-2 {
    color: #777 !important;
}
.feature-btn-2:hover {
    color: #9e4b47 !important;
}
.features__tab ul li button {
    font-size: 16px;
    font-family: "Prata", serif;
    font-weight: 400;
}
.captchaerror{
    font-weight: 600;
    letter-spacing: 1px;
    color: #ff0000;
    display:none;
    font-size: 14px;
}
/* product css ends  */
/* youtube css starts */
.mt-27{
    margin-top: 160px;
}
.slide-btn{
    background-color: #E5F9FF;
}
@media only screen and (max-width: 768px) {
    .mt-27 {
        margin-top: 30px;
    }
}
.video__thumb {
    position: relative;
}
.video__thumb-link a {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: inline-block;
    width: 70px;
    height: 70px;
    color: #217BB0;
    font-size: 20px;
    line-height: 75px;
    border-radius: 50%;
    background-color: #fff;
    text-align: center;
}
.video__thumb-link a i {
    font-weight: 600;
}
.video__thumb-link a:hover {
    background-color:#217BB0;
    color: #fff;
}
/* request css starts */
.request{
    background-image: url('../images/home/request_bg.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 5% 0px 4%;
}
.RequestContent p{
    color: #FFFFFF;
    font-weight: 300px;
}
.RequestContent h4 {
    font-weight: 300;
    font-size: 25px;
}
.RequestContent h3 {
    font-size: 35px;
    font-weight: 300;
    padding-top: 10px;
    padding-bottom: 10px;
}
.RequestContent h5 {
    font-size: 19px;
    font-weight: 500;
}
.request input {
    height: 55px;
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
}
.request textarea {
    width: 100%;
    border: 1px solid #ccc;
    border-radius: 5px;
}
.request button {
    width: 100%;
    height: 50px;
    background-color: #E5F9FF;
    color: #217BB0;
    border-radius: 5px;
}
@media(max-width : 576px) {
    .mobileReq{
        margin-top: 16px;
    }

}
/* request css ends */

/* footer css starts */
.footer {
    background-image: url('images/home/GREEN_ARRAY_FOOTER (1).png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: auto;
}
.footer__list ul li a {
    color: unset;
    font-size: 16px;
    margin-bottom: 10px;
    line-height: 25px;
    display: block;
}
.footer__list h5{
    color:#217BB0!important;
}
.footer__ul ul li {
    line-height: 3 !important;
}
.footerBorder{
    border-bottom: 1px solid #737373;
}
.borderRight{ 
    height: 100%;
    border-right: 1px solid #737373;
    }
@media (max-width:992px){
    .borderRight{
	border-right:none;
    }
}
/* footer css ends */
#slider.custom-slider{
    width: 100%;
    padding: 0;
    overflow: hidden;
}
.facilities-list li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 10px;
    font-size: 16px;
    font-weight: 500;
    color: #217BB0;
}
.facilities-list li::before {
    content: "";
    position: absolute;
    top: 12px;
    left: 0;
    width: 20px;
    height: 1px;
    background-color: #217BB0;
}
.arrow-btn {
    width: 50px;
    height: 50px;
    background-color: #eaf8ff;
    border: none;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease;
}
.arrow-btn:hover {
    background-color: #d6f0ff;
}
.arrow-btn i {
    color: #666;
    font-size: 18px;/
}
/* *************************** AboutUs******************************** */
.AboutUs {
    background-image: url(../images/banner/about-us.webp);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 70vh;
    display: flex;
    align-items: center;
    padding: 0;
}
.accreditations h4{
    font-size: 35px;
    font-weight: 700;
}
.accreditations p{
    font-size: 25px;
    font-weight: 200;
}
.accreditations h5{
    font-size: 25px;
}
.mt-60{
    margin-top: 60px;
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
     .about__photo img {
         width: 100%;
     }
 }
 @media only screen and (min-width: 768px) and (max-width: 991px) {
     .about__photo img {
         width: 100%;
     }
 }
 @media (max-width: 767px) {
     .about__photo img {
         width: 100%;
     }
     .about__gallery {
         margin-top: 50px;
         padding-left: 0;
     }
 }
 .about__img:first-child {
     float: left;
     margin-right: 20px;
 }
 @media only screen and (min-width: 1200px) and (max-width: 1415px) {
     .about__img img {
         width: 100%;
     }
     .about__img {
         width: 45%;
         float: left;
     }
 }
 @media only screen and (min-width: 992px) and (max-width: 1200px) {
     .about-area {
         margin-top: 70px;
         margin-bottom: 100px;
     }
 }
 @media only screen and (min-width: 768px) and (max-width: 991px) {
     .about-area {
         margin-bottom: 0;
         margin-top: 0;
     }
 }
 @media (max-width: 767px) {
     .about-area {
         margin-top: 0;
         margin-bottom: 50px;
     }
 }
 /* .about-area__wrapper {
     position: relative;
 }
 .about-area__wrapper::after {
    position: absolute;
    right: 75px;
    bottom: -30px;
    border-radius: 10px;
    z-index: -1;
    width: 400px;
    height: 400px;
    content: "";
    background-color: #217BB0;
 } */
 /* @media only screen and (max-width: 1700px) {
     .about-area__wrapper::after {
         left: 228px;
         right: auto;
     }
 } */
 /* @media only screen and (max-width: 768px) {
     .about-area__wrapper::after {
         left: 270px;
     }
 } */
 @media only screen and (min-width: 1200px) and (max-width: 1415px) {
     .about-area__wrapper {
         overflow: hidden;
         padding-bottom: 30px;
     }
 }
 @media only screen and (min-width: 1200px) and (max-width: 1600px) {
     .about-area {
         margin-top: 40px;
         padding-top: 60px;
         padding-bottom: 60px;
     }
 }
 .about-area-2 {
     background-color: #f9f9f9;
 }
 @media only screen and (min-width: 768px) and (max-width: 991px) {
     .about-area-2 {
         margin-top: 65px;
         padding-top: 65px;
         padding-bottom: 60px;
         margin-bottom: 0;
     }
 }
 @media (max-width: 767px) {
     .about-area-2 {
         padding-bottom: 60px;
     }
 }
 @media (max-width: 767px) {
     .about-area__3 {
         margin-top: 0;
         padding-top: 30px;
         margin-bottom: 70px;
     }
 }
 @media only screen and (min-width: 768px) and (max-width: 991px) {
     .about-area-2 {
         margin-top: 90px;
     }
 }
 @media (max-width: 767px) {
     .about-area-3 {
         margin-top: 50px;
         padding-top: 50px;
     }
 }
 .about__info {
     padding-top: 30px;
     margin-top: 35px;
     border-top: 1px solid #e2e2e2;
     overflow: hidden;
     padding-bottom: 30px;
     margin-bottom: 35px;
     border-bottom: 1px solid #e2e2e2;
 }
 @media only screen and (min-width: 992px) and (max-width: 1200px) {
     .about__info {
         padding-top: 20px;
         padding-bottom: 15px;
         margin-top: 20px;
         margin-bottom: 0;
     }
 }
 @media only screen and (min-width: 768px) and (max-width: 991px) {
     .about__info {
         padding-top: 20px;
         padding-bottom: 20px;
         margin-top: 25px;
     }
 }
 .about__info a {
     float: left;
     width: 60px;
     text-align: center;
     line-height: 60px;
     height: 60px;
     border-radius: 50%;
     background-color: #fff;
     flex: 0 0 auto;
     box-shadow: 0px 16px 32px 0px #9e4b4714;
 }
 @media only screen and (min-width: 992px) and (max-width: 1200px) {
     .about__info a {
         margin-top: -18px;
     }
 }
 .about__info a i {
     font-size: 14px;
     
 }
 .about__info p {
     overflow: hidden;
     padding-left: 30px;
     font-size: 20px;
     line-height: 32px;
 }
 .about__text .desc {
     font-size: 18px;
 }
 @media only screen and (min-width: 768px) and (max-width: 991px) {
     .about__text .desc {
         font-size: 17px;
         line-height: 1.6;
     }
 }
 @media only screen and (min-width: 992px) and (max-width: 1200px) {
     .about__text {
         padding-left: 0;
         margin-top: 70px;
     }
 }
 @media only screen and (min-width: 992px) and (max-width: 1200px) {
     .about__text-2 {
         margin-top: 20px;
     }
 }
 @media only screen and (min-width: 768px) and (max-width: 991px) {
     .about__text-2 {
         margin-top: 0;
     }
    .about__text-4 {
         margin-top: 30px;
     }
    .about__text {
         margin-top: 80px;
     }
     .about__info p {
         font-size: 16px;
         line-height: 1.3;
         padding-left: 15px;
     }
 }
 .about__list ul li {
     display: inline-block;
 }
 .about__list ul li:not(:last-child) {
     margin-right: 50px;
 }
 .about__list ul li i {
     width: 40px;
     height: 40px;
     display: inline-block;
     text-align: center;
     line-height: 40px;
     font-size: 10px;
     border-radius: 50%;
     transition: all 0.5s;
     background: #fff2f1;
     margin-right: 15px;
 }
 .about__list ul li h6 {
     display: inline-block;
     font-size: 18px;
     line-height: 32px;
 }
 .about__list-1 ul li {
     display: inline-block !important;
     margin: 0 !important;
     padding: 0 !important;
 }
 .about__list-1 ul li:first-child {
     border: 0 !important;
 }

 .about__list-2 ul li {
     padding-bottom: 0 !important;
     margin-bottom: 0 !important;
     border: 0 !important;
 }
 .about__meta {
     color: #217BB0;
     display: flex;
     align-items: center;
 }
 .about__meta--text {
     padding-left: 30px;
 }
 .about__meta--text h5 {
     font-size: 24px;
     line-height: 24px;
     margin-bottom: 0;
 }
 .about__meta--text p {
     font-size: 14px;
     line-height: 1;
     margin-top: 6px;
 }
 @media only screen and (min-width: 992px) and (max-width: 1200px) {
     .about__meta-2 {
         margin-top: 20px;
     }
 }
 @media only screen and (min-width: 768px) and (max-width: 991px) {
     .about__meta-2 {
         margin-top: 25px;
     }
 }
 .about__thumb-3 {
     position: relative;
 }
 .about__thumb-3 .about__meta-3 {
     position: absolute;
     top: 50%;
     border-radius: 10px;
     left: -150px;
     padding: 30px 50px;
     transform: translateY(-50%);
 }
 .about__thumb-3 .about__meta-3 i {
     display: inline-block;
     line-height: 1;
 }
 .about__thumb-3 .about__meta-3 i.glyph-icon::before {
     font-size: 60px;
     line-height: 1;
     color: #fff;
 }
 .about__thumb-3 .about__meta-3 h5 {
     color: #fff;
     margin-top: 17px;
     line-height: 1;
 }
 @media only screen and (max-width: 1480px) {
     .about__thumb-3 .about__meta-3 {
         left: -35px;
     }
 }
 @media only screen and (min-width: 768px) and (max-width: 991px) {
     .about__thumb-3 .about__meta-3 {
         padding: 10px 31px;
         bottom: 30px;
     }
 }
 .about__thumb-3 .about__meta-action a {
     position: absolute;
     right: 23px;
     top: 23px;
     line-height: 1;
     font-size: 20px;
     color: #fff;
     transform: rotate(-45deg);
 }
 @media only screen and (min-width: 768px) and (max-width: 991px) {
     .about__thumb-3 img {
         width: 100%;
     }
 }
 .about__desc-2 {
     border-top: 1px solid #ddd;
     padding-top: 30px;
     margin-top: 40px;
 }
 .about__box-icon {
     box-shadow: 0px 8px 16px 0px #0000000a;
     border: 2px solid #f2f2f2;
     display: inline-block;
     text-align: center;
     padding: 28px 35px;
     -webkit-transition: all 0.5s ease-out 0s;
     -moz-transition: all 0.5s ease-out 0s;
     -ms-transition: all 0.5s ease-out 0s;
     -o-transition: all 0.5s ease-out 0s;
     transition: all 0.5s ease-out 0s;
     border-radius: 10px;
 }
 .about__box-icon:not(:last-child) {
     margin-right: 15px;
 }
 .about__box-icon span {
     display: block;
     line-height: 1;
     color: #999999;
     font-size: 14px;
     margin-top: 15px;
 }
 .about__box-icon i {
     display: inline-block;
     width: fit-content;
     line-height: 1;
     color: #9e4b47;
     font-size: 55px;
 }
 @media only screen and (min-width: 992px) and (max-width: 1200px) {
     .about__box-icon i::before {
         font-size: 40px;
     }
 }
 .about__box-icon:hover {
     box-shadow: none;
 }
 @media only screen and (max-width: 1480px) {
     .about__box-icon-3:not(:last-child) {
         margin-right: 3px;
     }
 }
 @media (max-width: 767px) {
     .about__box-icon-3 {
         margin-top: 20px;
     }
 }
 @media only screen and (min-width: 992px) and (max-width: 1200px) {
     .about__box-icon {
         padding: 11px 13px;
     }
 }
 @media (max-width: 767px) {
     .about__box-icon {
         padding: 21px 16px;
     }
    .about__left-3 {
         padding: 0;
     }
    .about__icon-wrapper {
         margin-top: 0;
     }
 }
 @media only screen and (min-width: 768px) and (max-width: 991px) {
     .about__left-3 {
         padding: 0;
     }
 }
 .gallery__img {
     display: inline-block;
     position: relative;
 }
 .gallery__img a {
     position: absolute;
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
     color: #fff;
     font-size: 30px;
     opacity: 0;
     visibility: hidden;
     transition: all 0.5s ease-out;
     line-height: 30px;
     z-index: 9;
 }
 .gallery__img::after {
     position: absolute;
     left: 0;
     top: 0;
     width: 100%;
     opacity: 0;
     visibility: hidden;
     height: 100%;
     background-color: black;
     content: "";
     transition: all 0.5s ease-out;
 }
 .gallery__img:hover::after {
     opacity: 1;
     opacity: 0.702;
     visibility: visible;
 }
 .gallery__img:hover a {
     opacity: 1;
     visibility: visible;
 }
 .breadcrumb__height {
     min-height: 500px;
 }
 .breadcrumb__text {
     position: relative;
     z-index: 99;
 }
 .breadcrumb__text span {
     font-size: 16px;
     color: #fff;
 }
 .breadcrumb__text h2 {
     font-size: 60px;
     color: #fff;
     margin-top: 23px;
     line-height: 1;
 }
 @media (max-width: 767px) {
     .breadcrumb__text h2 {
         font-size: 47px;
         margin-top: 20px;
     }
 }
 .breadcrumb-item:not(:first-child)::before {
     content: "|" !important;
 }
 .breadcrumb-item a {
     font-size: 16px;
     color: #d6d6d6;
 }
 .feed__thumb img {
     width: auto !important;
 }
 .about__info a i {
     -webkit-transition: all 0.3s ease-out 0s;
     -moz-transition: all 0.3s ease-out 0s;
     -ms-transition: all 0.3s ease-out 0s;
     -o-transition: all 0.3s ease-out 0s;
     transition: all 0.3s ease-out 0s;
 }
 .about__info a:hover {
     background-color: #9e4b47 !important;
 }
 .about__info a:hover i {
     color: #fff !important;
 }
 span.price {
     color: #2071A1;
     font-size: 20px;
     font-weight: 500;
 }
 @media only screen and (max-width: 992px) {
     .about__text-5 {
         padding-left: 0;
     }
 }
 @media only screen and (max-width: 1200px) {
     .about-area-new {
         margin-top: 50px;
         margin-bottom: 0;
         padding-bottom: 80px;
         padding-top: 30px;
     }
 }
 @media only screen and (max-width: 1200px) {
     .about-padding {
         margin-bottom: 0;
     }
 }
 .about__left .about__box-icon {
     margin-right: 10px;
 }
 @media only screen and (min-width: 768px) and (max-width: 991px) {
     .about-area-1 {
         padding-bottom: 70px;
     }
 }
/* ********************************* contact page***************** */
.contact-box {
    background-image: url(../images/contact/GREEN_ARRAY_WEBSITE_CONTACT_US.webp);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 669px;
    color: #fff;
    padding: 30px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;        
}
.phone-link{
    color: unset;
}
.phone-link:hover {
  color: unset;
}
.contact-box p{
   color : #fff;
}
.form-section h3{
    font-size: 30px;
    color: #217BB0;
}
.form-section input{
    height: 70px;
    background-color: #F5F5F5;
}
.form-section textarea{
    height: 170px;
    background-color: #F5F5F5;
}
.form-section .submitBtn{
    background-color: #217BB0;
    color: white;
    width: 190px;
    height: 60px;
    font-size: 20px;
}
.social-icons a {
    color: #fff;
    margin-right: 10px;
    font-size: 1.5rem;
}
.map-container iframe {
    border-radius: 10px;
}
.form-section .form-control {
    border-radius: 5px;
}
.contactUs {
    background-image: url(../images/banner/contact.webp);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 70vh;
    display: flex;
    align-items: center;
    padding: 0;
}
.social-icons a{
    border: 1px solid white;
    padding: 10px;
    padding-top: 0px;
    padding-bottom: 3px;
    border-radius: 5px;
}
.social-icons a i{
    font-size: 18px;
}
.contact-box input,
.contact-box textarea{
    background-color: #F5F5F5;
}
@media (max-width:992px){
    .form-section .submitBtn{
	margin-bottom:5%;
    }
.contactUs{
    height: 40vh;
}
.career{
    height: 40vh !important;
}
.trainingCourse{
    height: 40vh !important;
}
}
/* ******************* career page***************** */
.dnaBg{
    background-image: url(../images/banner/bgdna.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;

}
.course-ul li{
    font-size: 16px;
    color: #737373;
    position: relative;
    padding-left: 25px;
}
.course-ul li::before {
    content: "•";
    color: #3DA9E8;
    font-size: 2.5em;
    position: absolute;
    left: 0;
    top: -21px;
}
.course-ul span{
    font-weight: 500;
    color: #737373 !important;
}
.career {
    background-image: url(../images/banner/career.webp);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 70vh;
    display: flex;
    align-items: center;
    padding: 0;
}
.OurCareer h4{
    font-size: 23px;
    color: #737373;
    font-weight: 400;
}
.OurCareer h3{
    font-size: 28px;
    color: #217BB0;
}
.career-list li{
    position: relative;
    padding-left: 30px;
    margin-bottom: 10px;
    font-size: 16px;
    color: #737373;
}
.career-list li::before {
    content: "";
    position: absolute;
    top: 12px;
    left: 0;
    width: 20px;
    height: 1px;
    background-color: #217BB0;
}
.essential-functions h5{
    font-size: 18px;
    color: #217BB0;
}
.highlight-box{
    background-color: #F7FBFF;
}
.highlight-box h6{
    font-size: 20px;
    color: #217BB0;
    font-weight: 600;
}
.highlight-box p{
    font-size: 16px;
}
.btn-gray{
    background-color: #F7F7F7; 
    color: #1A7BAA;
    font-size: 18px;
    transition: background-color 0.3s ease, color 0.3s ease;
}
.btn-gray.active{
    background-color: #1A7BAA;
    color: #FFFFFF;
}
.btn-gray:hover {
    background-color: #1A7BAA;
    color: #FFFFFF;
}
.btn-gray:focus {
    outline: none;
    box-shadow: none;
}
.careerContactInfo{
    line-height: 23px;
}
.careerEmail{
    font-size: 20px;
    color: #217BB0;
    font-weight: 600;
}
.careerMob{
    font-size: 25px;
    color: #217BB0;
    font-weight: 600;
}
.careerContactInfo a{
    text-decoration: underline;
    color: #217BB0;
}
/* ******************** training course ************** */
.trainingCourse {
    background-image: url(../images/banner/training-courses-banner.webp);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 70vh;
    display: flex;
    align-items: center;
    padding: 0;
}
.summerInter{
    color: #217BB0;
}
.summerInter span{
    font-weight: 500 !important;
    color: #217BB0 !important;
}
.header-section{
    background-color: #1D84B5;
}
.header-section p{
   color: #fff;
}
.border-right{
    border-right: 1px solid;
}
h3{
    font-size: 24px;
}
.details-section {
    visibility: hidden;
    opacity: 0;
    height: 0;
    overflow: hidden;
    margin-bottom: 50px;
    transition: opacity 0.5s ease, height 0.5s ease;
}
.details-section h5{
    color: #217BB0;
    font-size: 21px;
    font-weight: 600;
}
.details-section span{
   color: #3DA9E8;
}
.details-section .form{
   color: #3DA9E8;
}
.details-section ul li {
   font-weight:400;
}
/*.container-fluid:hover .details-section {
    visibility: visible;
    opacity: 1;
    height: auto;
    margin-bottom: 0;
}*/
.details-section.active {
    visibility: visible;
    opacity: 1;
    height: auto;
    margin-bottom: 0;
}
@media (max-width: 768px) {
    .border-right {
        height: 85%;
    }
}
  @media (max-width: 768px) {
    .header-section h3{
        font-size: 20px;
        font-weight: 500;
    }
    .header-section h5 {
        font-size: 18px;
    }
    .header-section p {
        font-size: 15px;
    }
}
.seque-content {
    background-color: #FCFBFB;
    margin-top: -70px;
    padding-top: 90px;
    padding-bottom: 20px;
    padding-left: 20px;
    padding-right: 20px;
    margin-left: -20px;
    margin-right: -20px;
    border-radius: 12px;
    /* position: relative; */
    z-index: 0;
    height: 380px;
}
.seque-content h5{
    font-size: 18px;
    color: #217BB0;
}
.seque-content p{
    font-size: 14px;
}
.card-title,
.card-text,
.btn {
    position: relative;
    z-index: 2;
}
.course-btn{
    background-color: #E5F9FF;
    color: #1A7BAA;
}
@media (min-width :768px) and (max-width :992px){
.seque-content{
height:420px;
}
}
#courseSection {
    display: block;
}
#sequencingSection {
    display: none;
}
/* ***************** solution page css starts *************** */
.solution {
    background-image: url(../images/banner/wellness-solutions.webp);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 70vh;
    display: flex;
    align-items: center;
    padding: 0;
}
.pharmacogenetics{
    background-image: url(../images/banner/Pharmacogenetics.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 70vh;
    display: flex;
    align-items: center;
    padding: 0;
}
.suddencardiacdeath{
    background-image: url(../images/banner/SuddenCardiac.webp);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 70vh;
    display: flex;
    align-items: center;
    padding: 0;
}
.biobanking{
    background-image: url(../images/banner/biobanking.webp);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 70vh;
    display: flex;
    align-items: center;
    padding: 0;
}
.solution-content{
    background-color: #F9FEFF;
}
.solutionNutro {
    background-image: url(../images/banner/Nutrigenomics.webp);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 70vh;
    display: flex;
    align-items: center;
    padding: 0;
}
.wellnessSec h4{
    font-size: 35px;
    color: #217BB0;
    font-weight: 400;
}
.wellnessSec .hormones{
font-size:28px;
}
.wellnessSec h3 {
    color: #474747;
    font-size: 40px;
    font-weight: 500;
}
.wellnessSec span {
    font-size: 50px;
    color: #217BB0;
    font-family: 'Boogaloo', cursive;
}
/* ***************** genomanic-diagostic-services-in-pune css starts here *************** */
.genomanic {
    background-image: url(../images/banner/genomic-diagnostics-services.webp);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 70vh;
    display: flex;
    align-items: center;
    padding: 0;
}
.IconBox {
    height: 30%;
    width: 100%;
    text-align: center;
    border: 1px solid #217BB0;
    padding: 15px;
    background-color: #f9f9f9;
    margin-bottom: 20px;
    transition: box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: all 0.5s ease;
}
.IconBox:hover{
    background-color:#217BB0;
    transform: scale(1.05);
}
.IconBox:hover img {
    filter: brightness(0) invert(1); 
}
.IconBox:hover p {
    color: white;
}
.IconBox.active {
    background-color: #1A7BAA;
    color: #FFFFFF;
}
.IconBox.active img {
    filter: brightness(0) invert(1);
}

.IconBox.active p {
    color: white;
}
.IconBox img{
  width:80px;
  height:85px;
}
.left-column p{
  font-size:17px;
}
.health img{
    background-color: #E5F9FF;
    padding: 5px;
    border-radius: 5px;
    margin-left: 25px;
}
.service-list i{
    background-color: #DBEFF2;
    padding: 5px;
    border-radius: 50%;
    color: #1D84B5;
}
.about__list ul li {
    display: inline-block;
}
.about__list ul li:not(:last-child) {
    margin-right: 50px;
}
.about__list ul li i {
    width: 25px;
    height: 25px;
    display: inline-block;
    text-align: center;
    line-height: 27px;
    font-size: 14px;
    border-radius: 50%;
    transition: all 0.5s;
    background: #fff2f1;
    margin-right: 5px;
}
.about__list ul li i {
    color: #0F7592;
    background-color: #DBEFF2;
}
.about__list ul li h6 {
    display: inline-block;
    font-size: 16px;
    line-height: 2;
}
.bg-blue3{
    background-color: #E5F9FF;
    color: #217BB0 !important;
}
.serviceHide{
    display: block;
}
@media (max-width : 992px){
.solution {
    height: 40vh;
}
.biobanking{
    height: 40vh;
}
.genomanic{
    height: 40vh;
}
.AboutUs{
    height: 40vh;
}
    .serviceHide{
        display: none;
    }
    .IconBox {
        height: 35%;
        width: 50%;
    }
    .secHalf{
        margin-left: 0px !important;
    }
    .sec-half{
        margin-left: 35px !important;
    }
}
/* qf-pcr css starts here */
.QFPCR {
    background-image: url(../images/banner/Reproductive-health.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 70vh;
    display: flex;
    align-items: center;
    padding: 0;
}
.img-bordered {
    position: relative;
    z-index: 1;
}
 .work-list li::before {
    content: "";
    position: absolute;
    top: 12px;
    left: 0;
    width: 20px;
    height: 1px;
    background-color: #FFFFFF;
 }
.right-qf h6{
    font-size:20px;
}
.faq-section h2{
   font-size:25px;
}
.work-img img{
    width: 100%;
    height: 500px;
}
 .adv-qf ul li{
    font-size: 17px;
    color: #217BB0;
    font-weight: 500;
 }
.right-qf h6,
.right-qf ul li {
    color: #217BB0;
}
.work-list li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 10px;
    font-size: 15px;
    color: #FFFFFF;
}
.work-h2 {
    word-spacing: 5px;
    font-size: 30px;
    font-weight: 500;
    color: #1A7BAA;
}
#HowItWork h2 {
    font-size: 30px;
    font-weight: 500;
    color: #1A7BAA;
    margin-bottom: 10px;
    width: 90%;
    line-height: 1.2;
}
.WorkBox {
    display: flex;
    flex-direction: column;
    justify-content: end;
    background: #F2FDFF;
    border-radius: 10px;
    padding: 25px 15px 30px;
}
.anime img {
    width: 100%;
    object-fit: cover;
    transition: all 0.5s ease-in-out;
}
.image-anime:hover img {
    transform: scale(1.1);
}
.image-anime {
    position: relative;
    overflow: hidden;
}
.service-card .image-anime:hover img {
    transform: scale(1.1);
}
.image-anime:after {
    content: "";
    position: absolute;
    width: 200%;
    height: 0%;
    left: 50%;
    top: 50%;
    background-color: rgba(255, 255, 255, .3);
    transform: translate(-50%, -50%) rotate(-45deg);
    z-index: 1;
}
.image-anime:hover:after {
    height: 250%;
    transition: all 600ms linear;
    background-color: transparent;
}
.WorkBox h3 {
    color: #1A7BAA;
    font-size: 18px;
    font-weight: 600;
    padding: 5px 0px;
}
.WorkBox p,
.WorkBox h6 {
    color: #737373;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    margin-bottom: 0px;
}
.ResizeOutlook {
    height: 390px;
    width: 100%;
}
.ResizePromise {
    height: 305px;
    width: 100%;
}
.ResizePromiseImg {
    height: 190px;
    width: 100%;
}
@media (max-width: 768px) {
    #HowItWork h2 {
        width: 100%;
        font-size: 26px;
        text-align: center;
        line-height: 1.2;
        margin-bottom: 10%;
    }
    .ResizePromise {
        height: auto;
    }
    .ResizePromiseImg {
        height: auto;
    }
}
.getTested .getP{
    font-weight:500;
}
.nips-img img{
    height: 467px;
}
@media only screen and (min-width: 576px) and (max-width:767px) {
    .back-div {
        height: 95%;
    }
}
@media only screen and (min-width: 1200px){
.doubleTriple{
    padding-top: 57% !important;
}
}
@media only screen and (min-width: 1400px) {
    .back-div {
            height: 94%;
        }

}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .back-div {
        height: 94%;
    }
    .right-qf{
        margin-top: 55px;
    }
.ResizePromise {
    height: 479px;
    width: 110%;
}
.WorkBox {
    justify-content: flex-start;
}
}
.faq-section h2{
    color: #1A7BAA;
}
.faq-section h5 {
    font-size: 18px;
    color: #1A7BAA;
}
.accordion-item{
    background-color: #FBFBFB;
}
.accordion--button{
    border: none;
}
.accordion-button {
    background: none;
    border: none;
    font-weight: bold;
    text-align: left;
}
.accordion-button:focus {
    box-shadow: none;
}
.accordion-body {
    border: none;
    background: none;
    padding-left: 1rem;
}
.accordion-button:not(.collapsed) {
    color: inherit !important;
    background-color: transparent !important;
}
.accordion-item:last-of-type .accordion-collapse {
    border-bottom-width: 0 !important;
}
/* NIPS */
.getTested{
    background-color: #F2FAFC;
}
.getTested h5, .getTested ul li{
    color: #217BB0;
}
.WhyChoose-box img{
    width: 65px;
    height: 65px;
}
.below-box{
    margin-top: -17px;
}
.genera h3{
    font-size: 20px;
    color: #217BB0;
}
.WhyChoose-box h3{
    color: #217BB0;
}
.generaDetect h3:nth-of-type(1){
    font-size: 20px;
    color: #217BB0;
}
@media only screen and (min-width: 1400px) {
    .below-box {
        margin-top: 12px;
        margin-left: -25px;
    }
}
@media only screen and (min-width: 1400px) {
    .chooseBox-content2 {
        margin-left: -43px !important;
    }
    .chooseBox-content3 {
        margin-left: -17px !important;
    }
    .chooseBox-content4 {
        margin-left: -48px !important;
    }
    .right-choose{
        margin-top: 32% !important;
    }
.singleGene img{
	height:680px;
}
}
.Microdeletions{
    color: #737373;
    font-weight: 300;
    font-size: 30px;
}
/* Newborn Genetic Screening starTS */
.NewbornBox {
    border: 1px solid #1A7BAA;
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    color: #1A7BAA;
    border-radius: 5px;
}
.TestImg img {
    height: 530px;
}
.newborn{
    background-color: #1A7BAA;
    color: #FFFFFF;
}
.newborn h4{
    font-size: 17px;
    margin-bottom: 0px;
}
.NewbornBox h5{
    font-size: 16px;
}
.new2{
    margin-top:-5% !important;
}
.dna-bg{
    background-image: url(../images/services/DNA_5.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
.infoicon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: #1A7BAA;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 15px;
}
.infoicon img {
    width: 40px;
    height: 40px;
    object-fit: contain;
}
.Newborn{
    margin-top: -80px;
}
.image-circle {
    width: 90px;
    height: 90px;
    background-color: #217BB0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.image-circle img {
    width: 55%;
    height: auto;
    /* border-radius: 50%; */
}
.imageContent {
    background-color:rgba(247, 247, 247, 0.7);
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 230px;
    height: 75px;
    text-align: center;
    position: relative;
    left: 50px;
    margin-top: -25px;
}
#OPDSchedule table {
    border-collapse: separate;
    border-spacing: 10px;
}
#OPDSchedule table thead {
    background-color: #1A7BAA;
    color: white;
    text-align: center;
    border-radius: 5px;
}
#OPDSchedule th,
#OPDSchedule td {
    font-size: 20px;
    vertical-align: middle !important;
    text-align: center;
    font-weight: 500;
    border: 1px solid #981a193d;
    padding: 10px;
    width: 25%;
    border-radius: 5px;
}
#OPDSchedule td {
    font-size: 15px;
    color: #217BB0;
    /* background: #fff; */
    --bs-table-accent-bg: #fff;
}
#OPDSchedule td[rowspan] {
    --bs-table-accent-bg: #ffece8;
    color: #217BB0;
    /* background: #ffece8; */
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
    border: 0px;
}
/* Karyotyping css */
.right-qf2 ul li{
    color: #737373 !important;
}
.CMA {
    color: #217BB0;
    font-weight: 500;
}
.chromosomeNo{
    font-weight: 500;
    color: #217BB0;
}
.Importance h2 {
font-weight: 500;
    color: #217BB0;
    font-size: 26px !important;
}
.info-box {
    border: 2px solid #007bff;
    border-radius: 50px;
    width: 365px;
    height: 90px;
    padding-top: 15px;
    padding-bottom: 15px;
    padding-right: 56px;
    padding-left: 15px;
    font-size: 14px;
    margin-bottom: 20px;
}
.info-box-right {
    position: relative;
    border: 2px solid #007bff;
    border-radius: 50px;
    width: 365px;
    height: 90px;
    padding-top: 15px;
    padding-bottom: 15px;
    padding-right: 23px;
    padding-left: 37px;
    font-size: 14px;
    margin-bottom: 20px;
    z-index: -99;
}
.cromo-img{
    width: 600px;
    height: 460px;
}
.lowerBox{
    margin-left: -16px !important;
    margin-top: 9px !important;
}
.detectBox{
    margin-left: -29px !important;
}
.visualBox{
margin-left: -32px !important;
}
.diaBox{
    margin-left: -19px !important;
}
.highBox{
    margin-left: -82px;
}
.copyBox{
    margin-left: -54px;
}
.proBox{
    margin-left: -60px;
}
.intelBox{
    margin-left: -82px;
}
.cromo-img{
    width: 600px;
    height: 460px;
}
@media only screen and (max-width: 992px){
.Newborn {
    margin-top: 0px;
}
    .info-box{
        width: 100%;
    }
    .lowerBox {
        margin-left: 0px !important;
        margin-top: 0px !important;
    }
    .detectBox {
        margin-left: 0px !important;
    }
    .visualBox {
        margin-left: 0px !important;
    }
    .diaBox {
        margin-left: 0px !important;
        margin-bottom: 0px !important;
    }
    .highBox {
        margin-left: 0px;
    }
    .copyBox {
        margin-left: 0px;
    }
    .proBox {
        margin-left: 0px;
    }
    .intelBox {
        margin-left: 0px;
    }
    .info-box-right{
        width: 100%;
    }
}
@media only screen and (min-width: 1920px){
    .detectBox {
        margin-left: 35px !important;
    }
    .visualBox {
        margin-left: 25px !important;
    }
    .diaBox {
        margin-left: 47px !important;
    }
    .highBox {
        margin-left: -105px;
        /* margin-top: -7px; */
    }
    .copyBox {
        margin-left: -77px;
                margin-top: 32px;
    }
    .proBox {
        margin-left: -85px;
        margin-top: 32px;
    }
    .intelBox {
        margin-left: -108px;
        margin-top: 32px;
    }
}

@media only screen and (min-width: 1400px) {
    .info-box{
        margin-bottom: 30px !important;
    }
    .left-box1{ 
        margin-left: 55px !important;
        margin-top: 14px !important;
            
    }
}
/* IVF css */
.IVF-img img{
    object-fit: cover;
    width: 100%;
    height: 707px;
}
.bg-color{
    background-color: #F2FAFC;
}
@media (min-width:1400px){
    .Syndrome img {
            height: 635px;
        }
}
/* ********************** why choose us css ***************** */
.why-choose-us {
    position: relative;
    background: var(--secondary-color) url('../images/why-choose-us-bg.svg') no-repeat;
    background-position: top center;
    background-size: auto;
    padding: 100px 0;
}
.why-choose-us .icon-star-image {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(10px, -50%);
}
.why-choose-box-1 {
    position: relative;
    z-index: 1;
}
.why-choose-box-1 .why-choose-item {
    flex-direction: row-reverse;
}
.why-choose-box-1 .why-choose-item .icon-box {
    margin-left: 15px;
    margin-right: 0;
}
.why-choose-box-1 .why-choose-item .why-choose-content {
    text-align: right;
}
.why-choose-item {
    display: flex;
    align-items: center;
    margin-bottom: 60px;
}
.why-choose-item:last-child {
    margin-bottom: 0;
}
.why-choose-item .icon-box {
    margin-right: 15px;
}
.why-choose-item .icon-box img {
    max-width: 48px;
}
.why-choose-content {
    width: calc(100% - 63px);
}
.why-choose-content h3 {
    font-size: 17px;
    font-weight: 500;
    text-transform: capitalize;
    margin-bottom: 5px;
    color: #217BB0;
}
.why-choose-content p {
    font-size: 17px;
}
.why-choose-content p {
    margin: 0;
}
.why-choose-image {
    position: relative;
    z-index: 1;
    margin-top: -25%;
}
.below-box2{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: -50px;
} 
.below-box2 img{
    max-width: 48px;
}
.WhyGenera{
    position: relative;
}
.WhyGeneraContent{
    position: absolute;
    width: 50%;
    z-index: 1;
    top: 70%;
    left: 25%;
    text-align: center;
}
.WhyGeneraContent h3{
    color: #217BB0;
    font-size: 25px;
    font-weight: 500;
}
@media only screen and (max-width: 991px){
    .why-choose-us {
        padding: 50px 0;
        background-position: center left;
    }
    .why-choose-us .icon-star-image {
        transform: translate(10px, 50%);
    }
    .why-choose-box-1 .why-choose-item {
        flex-direction: row;
    }
    .why-choose-box-1 .why-choose-item .icon-box {
        margin-left: 0px;
        margin-right: 15px;
    }
    .why-choose-box-1 .why-choose-item .why-choose-content {
        text-align: left;
    }
    .why-choose-item {
        margin-bottom: 30px;
    }
    .why-choose-image {
        margin-top: 30px;
        text-align: center;
    }
}
@media(min-width : 1400px){
    .below-box2 {
        margin-top: 10px;
    }
}

/* ********************** Infectious Disease Testing css ***************** */
.infectiousGenomanic{
    background-image: url(../images/banner/Infectious-Diseases.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 70vh;
    display: flex;
    align-items: center;
    padding: 0;	
}
.content-section {
    display: none;
}
.infectious-h4{
    font-size: 15px;
    color: #217BB0;
    font-weight: 500;
}
#Self-Sampling{
    height: 500px !important;
}
.secHalf {
    margin-left: 35px;
    margin-top: -5%;
}
.STI img {
    height: 500px;
}
.TropicalPanel{
    height: 570px;
}
.orderSec h3{
    color: #474747;
    font-size: 30px;
    font-weight: 500;
}
.orderSec span {
    font-size: 45px;
    color: #217BB0;
    font-family: 'Boogaloo', cursive;
}
.orderSec h4 {
    font-size: 25px;
    color: #217BB0;
    font-weight: 600;
}
.pb40{
padding-bottom:40px !important;
}
.imageContent4 {
    background: linear-gradient(to left, rgba(33, 123, 176, 0.1), #FFFFFF 40%);
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 230px;
    height: 75px;
    text-align: center;
    position: relative;
    left: 50px;
    margin-top: -25px;
}
@media (max-width: 768px){
.infectiousbtn {
        font-size: 15px;
    }
.pb40{
padding-bottom:0px;
}
#Self-Sampling{
        margin-top: 0px !important;
    }
    .STI{
        margin-top: 0px !important;
    }
.imageContent4 {
    width: 138px;
    height: 85px;
}
}

@media (min-width:578px) and (max-width: 768px){
    .imageContent{
    width: 210px;
    margin-top: 19px;
    left: 0px;
    }
.imageContent4 {
    width: 138px;
    height: 85px;
}
    .whyUS{
        display: flex;
        justify-content: center;
        align-items: center;
    }
}
@media (min-width: 1400px){
    .secHalf {
        margin-left: 4px;
    }
}
/* ********************** Rare Disorders css ***************** */
.rareDisorder {
    background-image: url(../images/banner/Rare-Disorders.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 70vh;
    display: flex;
    align-items: center;
    padding: 0;
}
.RareDisorders {
    border: 1px solid #1A7BAA;
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    color: #1A7BAA;
    border-radius: 5px;
    padding: 10px;
}
.RareDisorders h5{
    font-size: 16px;
    margin-bottom: 0px;
}
.page-section {
    display: none;
}
.page-section.active {
    display: block;
}
#pagination-controls {
    text-align: center;
    margin-top: 20px;
}
#pagination-controls button {
    padding: 10px 20px;
    margin: 0 10px;
    cursor: pointer;
}
/* ********************** nutrogenomic css ***************** */
.cardiacdna {
    background-image: url(../images/services/CardiacHealthDNA.png);
    background-size: cover;
    background-position: center;
    padding: 4% 0px 0px;
}
.bgColor{
    background-color: #E5F9FF;
    padding: 20px;
    width: calc(644px + 30px);
}
.diet-bgColor{
    margin-left: -25px;
    background-color: #E5F9FF;
    padding: 20px;
    margin-left: -23px;
    width: calc(655px + 30px);
}
.orderSec p{
    font-size: 25px;
    color: #474747;
}
.h6-color{
    color: #2C97D7;
}
.Cardiac-Health img{
    height: 440px;
}
.cardiovascular h6{
    color: #217BB0;
    padding-top: 10px;
    font-size: 16px;
    font-weight: 400;
}
.Performance img{
    height: 450px;
}
.full-width-bg {
    background-color: #E5F9FF;
    width: 70vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    padding: 20px 25% 20px 25%;
}
.Recovery span{
    font-weight: 500;
}
.fitlist ul li {
    color: #737373;
}
.fitlist ul li span{
    font-weight: 600;
}
.pcosChallenge img{
    height: 400px;
}
@media (max-width :992px){
    .full-width-bg {
       width: 100%;
       padding: 20px 10% 10px 10%;
    }
}

@media (max-width: 576px) {
    .bgColor {
        background-color: #E5F9FF;
        padding: 20px;
        width: calc(370px + 30px);
     }

}

@media (min-width :577px) and (max-width :992px){
.diet-bgColor{
    margin-left: -1px;
    width: calc(663px + 30px);
}
.bgColor {
    width: calc(690px + 30px);
}
}
@media (min-width :1400px){
    .bgColor {
        width: calc(921px + 30px);
    }
    .diet-bgColor {
        margin-left: -33px;
        width: calc(940px + 30px);
    }
    .full-width-bg{
        width: 71vw;
        padding: 20px 42% 20px 42%;
    }
}

/* ************* Cancer genomic ************ */

.cancerGenomic {
    background-image: url(../images/banner/Cancer-Genomics.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 70vh;
    display: flex;
    align-items: center;
    padding: 0;
}
.cancer-img img{
    height: 680px;
}
.gray-ul li {
    color: #737373 !important;
    font-weight: normal;
}
.gray-ul li span {
    font-weight: 500;
}
.wes img{
    height: 400px;
}
.span-weight{
    font-weight: 500;
}
.span-weight2 {
    font-weight: 600;
}
.section-title h5{
    font-size: 20px;
    color: #217BB0;
}
.Somatic{
    background-image: url('../images/services/dna_7.png');
    background-position: left;
    background-repeat: no-repeat;
}
.Germline {
    background-image: url('../images/services/dna_8.png');
    background-position: right;
    background-repeat: no-repeat;
}
.germlineImg {
margin-top:-60px;
}
@media (min-width :992px) and (max-width :1399px){
    .Somatic p{
        padding-left: 50px;
    }
    .Germline p {
        padding-right: 50px;
    }
}
@media (min-width :1400px) {
    .cancer-img2 img {
        height: 650px;
    }
    .cancer-img3 img {
        height: 850px;
    }
    .Somatic p {
        padding-left: 35%;
    }

    .Germline p {
        padding-right: 35%;
    }
}
/* microniome testing */
.microBiomeTesting{
    background-image: url(../images/banner/Microbiome-testing.webp);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 70vh;
    display: flex
;
    align-items: center;
    padding: 0;
}
.bgColor-micro {
    background-color: #E5F9FF;
    padding: 10px;
}
.imageContent2 {
    background: linear-gradient(to left, rgba(33, 123, 176, 0.1), #FFFFFF 40%);
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
    justify-content: center;
    width: 200px;
    height: 120px;
    position: relative;
    left: 45px;
    margin-top: -25px;
    padding: 10px 5px 10px 15px;
}
.full-width-bg2 {
    background-color: #E5F9FF;
    padding: 10px 20% 10px 24%;
}
.microbiomeSpan span{
    margin-bottom: -27px;
    color: #217BB0;
}
.imageContent2 h6{
    color: #217BB0;
}
.imageContent2 p {
    color: #217BB0;
}
.imageContent3 {
    background: linear-gradient(to left, rgba(33, 123, 176, 0.1), #FFFFFF 40%);
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 170px;
    height: 80px;
    text-align: center;
    position: relative;
    left: 40px;
    margin-top: -18px;
    padding-left: 20px;
    padding-right: 20px;
}
.microbioSec p{
    font-size: 25px;
    color: #474747;
}
.microbioSec h4 {
    font-size: 25px;
    color: #217BB0;
    font-weight: 600;
}
.gutMicro h5{
    color: #217BB0;
    font-size: 25px;
    line-height: 2;
    display: block;
    margin-bottom: 2px;
    font-style: italic;
    margin-top: -6px;
}
.immuneSystem h5{
    font-size: 40px;
    color: #217BB0;
}
.oralMicrob{
    margin-top: -10% !important;
}
.oralMicrobContent{
    color: #217BB0 !important;
}
.futureSkincare{
    font-size: 20px !important;
    color: #217BB0 !important;
    font-weight: 500 !important;
}
.futureSkincareh5 {
    font-size: 18px !important;
    font-weight: 400 !important;
    color: #217BB0 !important;
}
@media (max-width : 768px){
    .imageContent3 {
        width: 120px;
        height: 89px;
        position: relative;
        left: 43px;
        margin-top: -18px;
        margin-bottom: 50px;
        z-index: -1;
    }
    .recom{
        width: 195px !important;
    }
.imageContent2 {
        width: 141px;
        height: 155px;
        position: relative;
        left: 35px;
        margin-top: -21px;
        margin-bottom: 40px;
    }
    .imageContent2 p{
        font-size: 15px;
    }
    .image-circle {
        width: 70px;
        height: 70px;
    }
}
@media (min-width : 769px) and (max-width : 992px) {
    .imageContent3 {
        width: 265px;
        height: 88px;
        position: relative;
        left: 40px;
        margin-top: -18px;
        z-index: -1;
        margin-bottom: 40px;
    }
    .imageContent3 p{
        font-size: 22px;
    }
.imageContent3 p {
        font-size: 22px;
    }
    .imageContent2 {
        width: 255px;
        margin-bottom: 40px;
    }
    .imageContent2 h6 {
        font-size: 20px;
    }
}
@media (min-width :1400px) {
    .full-width-bg2 {
       /* width: 39vw; */
        left: 17%;
        /* //padding: 10px 22% 10px 301px; */
    }
   
    .microbio{
        height: 575px;
    }
    .bgColor {
        width: calc(921px + 30px);
    }
}
.CardiacHealth{
    height: 320px;
}


/* css for fullBg background */

.paddingLeft{
    padding-left: 9%;
}
.paddingRight{
    padding-right: 13%;
}
.fullBgColor {
    background-color: #E5F9FF;
    padding-top: 20px;
    padding-bottom: 20px;
}
.oralMicro{
    padding: 0px 10% 0px 24%;
}
@media (max-width: 576px) {
    .paddingRight {
        padding-right: 5%;
    }

}
@media (max-width: 992px) {
    .paddingLeft {
        padding-left: 0;
    }
.oralMicro{
    padding: 0px 10% 0px 24px;
}
.full-width-bg2 {
    padding: 10px 20% 10px 24px;
}
}
@media (min-width :577px) and (max-width :992px) {
    .paddingRight {
        padding-right: 5%;
    }
}



.mobile-menu-box {
    display: none;
    /* Your existing mobile menu styles */
}

.mobile-menu-box.active {
    display: block;
}
.mobile-ul .has-submenu {
    position: relative;
}
.menu-item-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.submenu-toggle {
    cursor: pointer;
    padding: 0 15px;
    font-size: 20px;
}
.mobile-ul .submenu {
    display: none;
    padding-left: 20px;
}
.mobile-ul .submenu.active {
    display: block;
}
.mobile-ul .has-submenu.active .submenu-toggle {
    transform: rotate(45deg);
}

.has-vertical-line2:after {
    position: relative;
}
/* .has-vertical-line2:after {
    content: "";
    position: absolute;
    top: 80%;
    right: 26%;
    width: 15%;
    height: 1px;
    background: linear-gradient(to right, #217BB0, transparent);
    transform: translateY(-50%);
} */
/* arrow style css of how it works */
.steps-wrapper {
    position: relative;
}
.step-item {
    position: relative;
}
.step-item2 {
    position: relative;
}
.has-vertical-line {
    position: relative;
}
.stepItem{
    position: relative;
}
.vstep {
    position: relative;
}
.vstep2 {
    position: relative;
}
.vag-vertical-line {
    position: relative;
}
.step-item::after {
    content: "";
    position: absolute;
    top: 80%;
    right: -52px;
    width: 57px;
    height: 1px;
    background: linear-gradient(to right, #217BB0, transparent);
    transform: translateY(-50%);
}
.step-item2::after {
    content: "";
    position: absolute;
    top: 80%;
    right: -52px;
    width: 57px;
    height: 1px;
    background: linear-gradient(to right, #217BB0, transparent);
    transform: translateY(-50%);
}
.stepItem::after {
    content: "";
    position: absolute;
    top: 80%;
    right: -53px;
    width: 37%;
    height: 1px;
    background: linear-gradient(to right, #217BB0, transparent);
    transform: translateY(-50%);
}
.has-vertical-line:after {
    content: "";
    position: absolute;
    top: 80%;
    right: -52px;
    width: 57px;
    height: 1px;
    background: linear-gradient(to right, #217BB0, transparent);
    transform: translateY(-50%);
}
.has-vertical-line2:after {
    content: "";
    position: absolute;
    top: 80%;
    right: 30%;
    width:11%;
    height: 1px;
    background: linear-gradient(to right, #217BB0, transparent);
    transform: translateY(-50%);
}
.vstep:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 71%;
        right: -47px;
        width: 50px;
    height: 1px;
    background: linear-gradient(to right, #217BB0, transparent);
    transform: translateY(-50%);
}
.vag-vertical-line:after {
    content: "";
    position: absolute;
    top: 71%;
    right: -47px;
    width: 50px;
    height: 1px;
    background: linear-gradient(to right, #217BB0, transparent);
    transform: translateY(-50%);
}
.vstep2::after {
    content: "";
    position: absolute;
    top: 71%;
    right: -47px;
    width: 50px;
    height: 1px;
    background: linear-gradient(to right, #217BB0, transparent);
    transform: translateY(-50%);
}
@media (max-width: 768px) {
    .has-vertical-line:after {
        right: -5%;
        top: 53%;
        transform: translateX(50%) translateY(-50%);
        content: "";
        position: absolute;
        top: 74%;
        left: 55%;
        width: 1px;
        height: 104px;
        background: linear-gradient(to bottom, #217BB0, transparent);
        transform: translateX(-50%);
    }
    .step-item:not(:last-child)::after {
        content: "";
        position: absolute;
        top: 55%;
        right: -40px;
        width: 70px;
        height: 1px;
        background: linear-gradient(to right, #217BB0, transparent);
        transform: translateY(-50%);
    }
    .step-item2::after {
        content: "" !important;
        position: absolute !important;
        top: 51% !important;
        right: 153px !important;
        width: 80px !important;
        height: 1px !important;
        background: linear-gradient(to left, #217BB0, transparent) !important;
        transform: translateY(-50%) !important;
    }
    .has-vertical-line2:after {
        right: -5%;
        transform: translateX(50%) translateY(-50%);
        content: "";
        position: absolute;
        top: 46%;
        left: 79%;
        width: 1px;
        height: 104px;
        background: linear-gradient(to bottom, #217BB0, transparent);
        transform: translateX(-50%);
    }
    .vstep:not(:last-child)::after {
        content: "";
        position: absolute;
        top: 55%;
        right: -27px;
        width: 46px;
        height: 1px;
        background: linear-gradient(to right, #217BB0, transparent);
        transform: translateY(-50%);
    }
    .vag-vertical-line:after {
        right: -5%;
        top: 53%;
        transform: translateX(50%) translateY(-50%);
        content: "";
        position: absolute;
        top: 86%;
        left: 55%;
        width: 1px;
        height: 104px;
        background: linear-gradient(to bottom, #217BB0, transparent);
        transform: translateX(-50%);
    }
    .vstep2::after {
        content: "" !important;
        position: absolute !important;
        top: 51% !important;
        right: 185px !important;
        width: 59px !important;
        height: 1px !important;
        background: linear-gradient(to left, #217BB0, transparent) !important;
        transform: translateY(-50%) !important;   
    }
    .imageContent4 {
        left: 35px;
        margin-top: -18px;
    }
    .costEffe {
        width: 225px !important;
        margin-right: -80px !important;
    }
}
@media (min-width: 769px) and (max-width: 992px) {
    .has-vertical-line:after {
        left: 55%;
        width: 2px;
        height: 104px;
        background: linear-gradient(to bottom, #217BB0, transparent);
        transform: translateX(-50%);
    }
    .step-item:not(:last-child)::after {
        top: 57%;
        right: -52px;
        width: 93px;
        height: 2px;
    }
    .step-item2::after {
        top: 60% !important;
        right: 309px !important;
        width: 85px !important;
        height: 2px !important;
        background: linear-gradient(to left, #217BB0, transparent) !important;
    }
    .stepItem::after {
        right: -66px;
    }
    .vstep:not(:last-child)::after {
        top: 55%;
        width: 95px;
    }
    .vag-vertical-line:after {
        top: 86%;
        left: 55%;
        width: 1px;
        height: 104px;
        background: linear-gradient(to bottom, #217BB0, transparent);
        transform: translateX(-50%);
    }
    .vstep2::after {
        top: 57% !important;
        right: 85% !important;
        width: 96px !important;
        background: linear-gradient(to left, #217BB0, transparent) !important;
    }
    .costEffe {
        width: 368px !important;
    }
    .has-vertical-line2:after {
        right: -5%;
        transform: translateX(50%) translateY(-50%);
        content: "";
        position: absolute;
        top: 43%;
        left: 73%;
        width: 1px;
        height: 130px;
        background: linear-gradient(to bottom, #217BB0, transparent);
        transform: translateX(-50%);
    }
}
@media (min-width: 1920px) {
.step-item::after {
        content: "";
        position: absolute;
        top: 80%;
        right: -43px;
        width: 85px;
        height: 1px;
        background: linear-gradient(to right, #217BB0, transparent);
        transform: translateY(-50%);
    }
    .step-item2::after {
        right: -43px !important;
        width: 85px;
    }
        .stepItem::after {
            right: -4% !important;
        }
    .has-vertical-line2:after {
        right: 30% !important;
        width: 191px !important;
    }
    .has-vertical-line:after {
        content: "";
        position: absolute;
        top: 80%;
        right: -43px;
        width: 85px;
        height: 1px;
        background: linear-gradient(to right, #217BB0, transparent);
        transform: translateY(-50%);
    }
    .vstep:not(:last-child)::after {
        right: -47px;
        width: 95px;
    }
    .vag-vertical-line:after {
        width: 95px;
    }
    .vstep2::after {
        width: 95px;   
    }
}
/* 	
.step-item2::after {
    right: -93px;
} */
/* vaginal page */
.vaginaDna{
    margin-top: -9% !important;
}
.vaginaDna img{
    height: 85%;
}
.vaginaContent {
    background: linear-gradient(to left, rgba(33, 123, 176, 0.1), #FFFFFF 40%);
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
    justify-content: center;
    width: 225px;
    height: 159px;
    position: relative;
    left: 45px;
    margin-top: -25px;
    padding: 10px 5px 10px 15px;
}
.vaginaContent h6 {
    color: #217BB0;
}
.vaginaSpan span {
    margin-bottom: 50px;
    color: #217BB0;
}
@media (min-width: 769px) and (max-width: 992px) {
    .vaginaContent {
        width: 255px;
        margin-bottom: 40px;
    }
}
@media (max-width: 768px) {
    .vaginaContent {
        box-shadow: -6px 0 10px rgba(0, 0, 0, 0.2), 0 -6px 10px rgba(0, 0, 0, 0.2), 0 6px 10px rgba(0, 0, 0, 0.2);
        height: 185px;
        max-width: 165px;
        position: relative;
        margin-top: -13px;
        margin-bottom: 40px;
        padding: 10px 5px 10px 9px;
        width: 90%;
        max-width: 165px;
        margin: -13px auto 40px auto;
        padding: 10px 5px 10px 9px;
        text-align: center;
        position: static;
    }
}
@media (min-width : 1200px){
    .vaginal img{
        height: 500px;
    }
}
@media (min-width: 993px){
    .chart img{
        width: 70%;
    }
}

.carousel-inner2 {
    top: 0;
    left: 0;
    z-index: -1;
}
.headerSwiper {
    height: 100vh;
    position: relative;
    overflow: hidden;
}
.video-slide2 {
    position: absolute;
    height: 100%;
    width: 100%;
    object-fit: cover;
    z-index: 0;
}
#carouselExampleFade {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
    overflow-x: hidden;
}
.carousel-inner2 {
    position: relative;
    height: 100%;
    z-index: 2;
}
/* Add these new rules */
.firstText {
    position: absolute;
    top: 40%;
    left: 5%;
    width: 90%;
}
.carouselItem2 {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.8s ease, visibility 0.8s ease;
    visibility: hidden;
}
.carouselItem2.active {
    opacity: 1;
    visibility: visible;
}
.carouselItem2-next.carouselItem2-start,
.carouselItem2-prev.carouselItem2-end {
    opacity: 1;
    visibility: visible;
}
.carousel-fade .active.carouselItem2-start,
.carousel-fade .active.carouselItem2-end {
    transition: opacity 0.8s ease, visibility 0.8s ease;
}
@media (max-width: 767px) {
    .desktop-only {
        display: none !important;
    }

    .mobile-only {
        display: block !important;
    }
}

@media (min-width: 768px) {
    .mobile-only {
        display: none !important;
    } 
}
@media (max-width: 576px) {
    .mobile-banner-text {
        top: 85%;
    }
    .mobile-banner-text1 {
        top: 75%;
    }
}
@media (max-width: 576px) {
    .mobile-banner-text h3 {
        color: #217BB0;
    }
    .mobile-banner-text p {
        color: #217BB0;
	margin-top: 0;
    }
.Cardiac-Health img {
    height: 340px;
}
.wes img {
    height: 340px;
}
.STI img {
    height: 340px;
}
.TropicalPanel {
    height: 340px !important;
}
#Self-Sampling {
    height: 340px !important;
}

}

@media (max-width: 576px) {
    #carouselExampleFade, .homeBanner, .homeBannerItem, .video-slide {
        min-height: 100vh !important;
    }
}

/* Default: hide mobile version */
.mobileServices {
  display: none;
}

/* Desktop: show desktop version */
.desktopServices {
  display: block;
}

/* When screen is 768px or smaller (mobile) */
@media (max-width: 768px) {
  .desktopServices {
    display: none; /* hide desktop div */
  }
  .mobileServices {
    display: block; /* show mobile div */
  }
  .generic-title span{
    line-height: 1.5 !important;
   }
   .gutPro h2 {
      line-height: 35px !important;
      margin-bottom: 20px !important;
    }
   .rareExampleTable thead th {
     white-space: nowrap;      /* keep text on one line */
     padding: 0 24px;          /* 24px left & right padding */
     text-align: center;       /* optional - centers text */
    }
    .rareExampleTable thead th .NewbornBox {
     display: inline-block;    /* makes the box respect padding & width */
     min-width: 150px;         /* ensures "Sample Type" fits on one line */
    }
.orderSec h3 {
    font-size: 25px !important;
}
.orderSec span {
    font-size: 40px !important;
}
.newbornMobBtn{
    padding-left: 1px;
    padding-right: 1px;
}
    .why-choose-image {
        margin-top: 0px !important;
        margin-bottom: 30px !important;
    }
.nips-img img {
    height: 300px;
}
.TestImg img {
    height: 300px;
}

}
.serviceshadowbox{
    background: #fff;
    border-radius: 14px;
    padding: 1rem;
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.30);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.serviceLogo{
    width: 85px;
    height: auto;
    margin-top: 10px;
    margin-bottom: 10px;
}
/* Header cells: prevent wrapping + add 24px left/right padding */
.rareExampleTable thead th {
  white-space: nowrap;
  padding: 0 24px;
  text-align: center;
}

/* First column – reduce its width so it's not oversized */
.rareExampleTable thead th:nth-child(1),
.rareExampleTable tbody td:nth-child(1) {
  width: 45%; /* adjust between 40–50% based on your content */
}

/* Second column – give more room so "Sample Type" stays on one line */
.rareExampleTable thead th:nth-child(2),
.rareExampleTable tbody td:nth-child(2) {
  width: 25%;
  min-width: 140px; /* ensures single-line text */
}

/* Third column – rest of the space */
.rareExampleTable thead th:nth-child(3),
.rareExampleTable tbody td:nth-child(3) {
  width: 30%;
}

/* Wrapper for mobile carousel */
.mobileCarouselWrapper {
    position: relative;
    z-index: 1;
    min-height: 400px; /* ensures fixed height */
    margin-bottom: 20px;
}

/* Inner carousel */
.mobileCarouselInner {
    position: relative;
    height: 100%; /* make inner fill wrapper */
}

/* Each carousel item */
.mobileCarouselItem {
    position: relative;
    height: 100%; /* all items same height */
}

/* Image fills the carousel item */
.mobileCarouselItem img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* scales image nicely without stretching */
    display: block;
}

/* Text overlay */
.mobileCarouselText {
    position: absolute;
    bottom: 0%;
    left: 10%;
    right: 10%;
    color: #217BB0;
    text-align: left;
    z-index: 2;
}

/* Heading and paragraph styling */
.mobileCarouselText h3 {
    font-size: 1.5rem;
    line-height: 1.3;
}

.mobileCarouselText p {
    font-size: 1rem;
    margin-top: 0.5rem;
}

/* Fix WOW.js animations */
.mobileCarouselText .wow.fadeInUp {
    transform: none !important;
}

/* Hide on desktop */
@media (min-width: 768px) {
    .mobileCarouselWrapper {
        display: none !important;
    }
}

/* ...existing code... */

/* Full-bleed mobile action bar + show full words */
.mobile-action-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: space-between;
  height: 54px;
  padding: 6px 0;           /* no left/right inset */
  background: #217BB0;
  z-index: 99999;
  flex-wrap: nowrap;
  box-sizing: border-box;
}

/* allow buttons to grow and show full text (no truncation) */
.mab-btn {
  flex: 1 1 auto;          /* share space but allow growth */
  min-width: 0;            /* important for flex children */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 12px;
  color: #ffffff;
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
  white-space: normal;     /* allow full words */
  overflow: visible;       /* don't hide text */
  position: relative;
  box-sizing: border-box;
}

/* keep icon fixed */
.mab-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  display: inline-block;
  color: #fff;
}

/* show full label text */
.mab-text {
  display: inline-block;
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
}

/* separators using pseudo-element (doesn't add width) */
.mab-btn::after {
  content: "";
  position: absolute;
  right: 0;
  top: 12%;
  bottom: 12%;
  width: 1px;
  background: rgba(255, 255, 255, 0.4);
  pointer-events: none;
}
.mab-btn:last-child::after { display: none; }

/* responsive tweaks if labels get too tall */
@media (max-width: 420px) {
  .mab-btn { padding: 6px 8px; font-size: 12px; gap: 6px; }
  .mab-icon { width: 16px; height: 16px; flex: 0 0 16px; }
}

/* ...existing code... */

.newIconSection {
      width: 100%;
      max-width: 100%;
      display: flex;
      background: #55A9C7;
    }

    .newIconSection .borderRight {
      border-right: 1px solid #fff;
    }

    .newIconSection .icon-btn.no-border {
      border-right: none;
    }

    .icon-btn img {
      width: 30px;
      /* adjust icon size */
      height: 30px;
      margin-bottom: 5px;
    }
.textWhite{
    display: flex;
    color: #fff;
    padding: 15px 0px;
    font-size: 18px;
    font-weight: 600;
    align-items: center;
    justify-content: center;
}
.newIconSection .icon-btn{
    display: flex;
    color: #fff;
    padding: 0px 0px 15px;
    font-size: 16px;
    justify-content: center;
}
#privacy-sec{
margin-top:15%;
 margin-bottom: 6%
}
@media (max-width: 768px){
#privacy-sec{
        margin-top: 40%;
        margin-bottom: 15%;
}
}

/* ******************* Blogs css Starts**************** */
.blog h2{
    font-size: 20px;
    color: #217BB0;
}
.blogs {
    height: 430px;
    /* background-color: rgba(217, 217, 217, 0.08); */
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.30);
    padding: 40px 48px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    transition: all 0.5s ease;
    background-size: cover;
}

.blogContent {
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    gap: 25px;
    height: 100%;
}

.text {
    min-height: 0;
}

.blogBtn button {
    border: medium none;
    padding: 5px 20px;
    background-color: #fd5f07;
    font-weight: 400;
    color: #EAEAEA;
    font-size: 18px;
}

.blog-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: 1;
}

.blogs-heading h4 {
    font-size: 24px;
    letter-spacing: -1px;
}

.blogs:hover .blog-bg {
    opacity: 0.3;
}
.sidebar .search-box {
    position: relative;
}
.sidebar .search-box input {
    color: #737373;
    padding: 15px;
    border: 1px solid rgba(33, 123, 176, 0.4);
    border-radius: 30px;
    width: 100%;
    background: transparent;
}
.sidebar .search-box input:focus {
    outline: none;
    border: 1px solid rgba(33, 123, 176, 0.4);
}
.sidebar .widget {
    margin-top: 50px;
}
.sidebar .widget .title-widget {
    margin-bottom: 30px;
    padding-top: 20px;
    border-top: 1px solid rgba(33, 123, 176, 0.4);
}
.sidebar .widget.last-post-thum .item {
    display: flex;
    margin-bottom: 30px;
}
@media (max-width: 767px) {
    .blogs {
        height: auto !important;
        /* remove fixed height */
        min-height: auto !important;
        /* allow flexible growth */
    }

    .post-header h1 {
        font-size: 30px !important;
    }
}
@media screen and (max-width: 992px) {
    .md-mb50 {
        margin-bottom: 50px !important;
    }
}

/* ******************* Blogs css ends**************** */


.case{

    /* height: 430px; */
    /* background-color: rgba(217, 217, 217, 0.08); */
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.30);
    padding: 40px 48px;
    /* border-radius: 10px; */
    /* display: flex; */
    /* flex-direction: column; */
    /* position: relative; */
    /* overflow: hidden; */
    /* transition: all 0.5s ease; */
    /* background-size: cover;
}




/* ******************* add to card css starts **************** */
.minicart {
    position: absolute;
    right: -25px;
    top: calc(100% + 40px);
    z-index: 999;
    width: 300px;
    max-height: 400px;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
    padding: 15px;
}
.minicart.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.minicart-body {
    max-height: 200px;
    overflow-y: auto;
    padding-right: 5px;
    margin-bottom: 10px;
}
.minicart-items {
    list-style: none;
    padding: 0;
    margin: 0;
}
.header-nav ul li {
    position: relative;
}
#cart-icon-count.cart-count-badge {
    position: absolute;
    top: -5px;
    /* right: -10px; */
    background-color: #ff4c3b;
    color: #ffffff;
    font-size: 11px;
    font-weight: 600;
    border-radius: 50%;
    padding: 2px 6px;
    min-width: 18px;
    text-align: center;
    line-height: 1;
    display: inline-block;
    border: 2px solid #ffffff;
}
.cart-count-badge[data-count="0"] {
    display: none !important;
}
.minicart-items li {
    display: flex;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
    list-style: none;
    margin: 0;
}
.minicart-items .product-thumb {
    flex-shrink: 0;
    float: left;
    width: 21.33%;
    margin-right: 15px;
    overflow: hidden;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
}
.minicart-items .product-thumb a {
    padding: 0;
}
.minicart-items .product-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* .minicart-items .product-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0;
    margin: 0;
    min-width: 0;
} */
.minicart-items{
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0;
    margin: 0;
    min-width: 0;
}
.minicart-items .product-name {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    text-decoration: none;
    line-height: 1.2;
    margin-bottom: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-left: 0;
    padding-top: 5px;
    padding-bottom: 5px;
}
.minicart-items .product-price {
    font-size: 13px;
    color: #555;
    font-weight: 500;
}

.minicart-items .product-thumb a {
    display: block;
    line-height: 0;
}

.minicart-items .remove {
    margin-left: auto;
    padding-left: 10px;
    align-self: center;
}
.minicart-items .remove-item-btn {
    cursor: pointer;
    color: #ff4c3b;
    font-size: 16px;
    opacity: 0.8;
    transition: opacity 0.2s ease;
}
.minicart-items .remove-item-btn:hover {
    opacity: 1;
    color: #cc0000;
}
.minicart-items .product-info {
    display: flex;
    flex-direction: column;
    flex-shrink: 1;
    min-width: 0;
}
.minicart-items .remove {
    padding-left: 10px;
    align-self: center;
}
.header-area .header-bottom li {
    position: relative;
}
.minicart-toggle {
    position: relative;
    display: inline-block;
}
.cart-count-badge {
    position: absolute;
    top: -5px;
    right: -10px;
    background-color: #ff0000;
    color: #ffffff;
    font-size: 10px;
    font-weight: bold;
    line-height: 1;
    min-width: 18px;
    height: 18px;
    border-radius: 50%;
    padding: 4px 0 0 0;
    text-align: center;
    white-space: nowrap;
}
/* Custom CSS to prevent select/form element overflow on mobile devices */
@media (max-width: 767px) {

    /* Target the select element specifically */
    #country {
        width: 100% !important;
        box-sizing: border-box;
        /* Ensures padding and border are inside the total width */
    }

    /* General rule for all select/input elements in the form */
    .form-control,
    .form-select {
        max-width: 100% !important;
        box-sizing: border-box;
    }
}