/*---------------------------------------------
Template name:  skarduspring
Version:        1.0
Author:         layerdrops
Author Email:   layerdrops@gmail.com 

NOTE:
-----
Please DO NOT EDIT THIS CSS, you may need to use "custom.css" file for writing your custom css.
We may release future updates so it will overwrite this file. it's better and safer to use "custom.css".

[Table of Content]

01: General CSS 
    1.1: Default CSS
    1.2: background color
    1.3: Buttons
    1.4: Padding/Margin
    1.5: Animations
02: Page Title
03: Header
    3.1: Header Menu 1
04: Banner
    4.1: main banner 01
    4.02: main banner home2
    4.03: main banner home3
05: Feature area
    5:01 feature type2
    5:02 feature type3
06: Video section
07: bottle delivery
08: start about section
09: start our team
10: subscribe area
11: testimonial area
    11: 01 testimonial area type2
12: our location
13: our partner
14: our quality feature
    14:01 quality type2
15: our blog area
16: Bloge details page
    16:01 blog details
17: map area
18: Conatct page
    18:01 conatct info
19: Call to action
20: Footer
    20.01: footer top
    20.02: footer bottom
21: Others
    21.01: pettrns
    21.02: About block
    21.03: Why us
    21.04: Subscription
    21.05: Carousel controls
    21.06: Slider pagination style
    21.07: Social icons
    21.08: Back to top
    21.09: Preloader
    21.10: Form validation
    21.11: Content animation
----------------------------------------------*/

@font-face {
  font-family: "Utopia Std";
  src: url("../fonts/UtopiaStd-Italic.woff2") format("woff2"),
    url("../fonts/UtopiaStd-Italic.woff") format("woff");
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}

/* Primary Fonts */

@font-face {
  font-family: "Godger Demo";
  src: url("../fonts/GodgerDemo-Regular.woff2") format("woff2"),
    url("../fonts/GodgerDemo-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Secondray Fonts */

@font-face {
  font-family: "Tw Cen MT Std";
  src: url("../fonts/TwCenMTStd-ExtraBold.woff2") format("woff2"),
    url("../fonts/TwCenMTStd-ExtraBold.woff") format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Tw Cen MT Std";
  src: url("../fonts/TwCenMTStd-ExtraBoldCond.woff2") format("woff2"),
    url("../fonts/TwCenMTStd-ExtraBoldCond.woff") format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Tw Cen MT Std";
  src: url("../fonts/TwCenMTStd.woff2") format("woff2"),
    url("../fonts/TwCenMTStd.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Tw Cen MT";
  src: url("../fonts/TwCenMT-Regular.woff2") format("woff2"),
    url("../fonts/TwCenMT-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Tw Cen MT Std";
  src: url("../fonts/TwCenMTStd-Bold.woff2") format("woff2"),
    url("../fonts/TwCenMTStd-Bold.woff") format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Tw Cen MT Std";
  src: url("../fonts/TwCenMTStd-Italic.woff2") format("woff2"),
    url("../fonts/TwCenMTStd-Italic.woff") format("woff");
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Tw Cen MT Std";
  src: url("../fonts/TwCenMTStd-ExtraBoldItalic.woff2") format("woff2"),
    url("../fonts/TwCenMTStd-ExtraBoldItalic.woff") format("woff");
  font-weight: bold;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Tw Cen MT Std";
  src: url("../fonts/TwCenMTStd-Light.woff2") format("woff2"),
    url("../fonts/TwCenMTStd-Light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Tw Cen MT Std";
  src: url("../fonts/TwCenMTStd-LightItalic.woff2") format("woff2"),
    url("../fonts/TwCenMTStd-LightItalic.woff") format("woff");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Tw Cen MT Std";
  src: url("../fonts/TwCenMTStd-UltraBoldIt.woff2") format("woff2"),
    url("../fonts/TwCenMTStd-UltraBoldIt.woff") format("woff");
  font-weight: bold;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Tw Cen MT Std";
  src: url("../fonts/TwCenMTStd-SemiMedium.woff2") format("woff2"),
    url("../fonts/TwCenMTStd-SemiMedium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Tw Cen MT Std";
  src: url("../fonts/TwCenMTStd-UltraBold.woff2") format("woff2"),
    url("../fonts/TwCenMTStd-UltraBold.woff") format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Tw Cen MT Std";
  src: url("../fonts/TwCenMTStd-SemiBold.woff2") format("woff2"),
    url("../fonts/TwCenMTStd-SemiBold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Tw Cen MT Std";
  src: url("../fonts/TwCenMTStd-UltraBoldCond.woff2") format("woff2"),
    url("../fonts/TwCenMTStd-UltraBoldCond.woff") format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

.subscribe-section {
  background-color: #081340; /* Dark blue background */
  /* background-image: url("https://cdn.builder.io/api/v1/image/assets%2F7f2a427c7e5d46d486cd081a3a926bdc%2Ff95384396b124b4fbc7a3e7843a99166"); */
  background-size: cover;
  background-position: center;
  padding: 60px 0; /* Vertical padding */
  color: white; /* Default text color */
}
.subscribe-content-wrapper {
  border-radius: 8px;
  display: flex; /* Use flexbox for inner alignment */
  align-items: center; /* Vertically align items */
  justify-content: center;
}
.subscribe-image img {
  max-width: 100%;
  height: auto;
  border-radius: 8px; /* Slightly rounded corners for the image */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); /* Subtle shadow */
}
.subscribe-text h2 {
  color: #fff;
  font-size: 4.5rem;
  margin-bottom: 20px;
  line-height: 5rem;
}
.subscribe-item {
  display: flex;
  margin-bottom: 15px;
  flex-direction: column;
  align-items: flex-start;
}
.subscribe-item img {
  width: 30px; /* Adjust icon size as needed */
  height: auto;
  margin-right: 15px;
}
.subscribe-item p {
  margin: 0;
  font-size: 1.1rem;
}
.btn-subscribe {
  background-color: white;
  color: black;
  border: none;
  padding: 12px 30px;
  border-radius: 5px;
  text-transform: uppercase;
  margin-top: 30px;
}
/* Responsive adjustments */
@media (max-width: 767.98px) {
  h1,
  .h1 {
    font-size: 50px;
    line-height: 50px;
  }
  h2,
  .h2 {
    font-size: 40px !important;
    line-height: 42px !important;
  }
  h3,
  .h3 {
    font-size: 24px !important;
    line-height: 26px !important;
  }
  h4,
  .h4 {
    font-size: 15px !important;
    line-height: 22px !important;
  }
  h5,
  .h5 {
    font-size: 16px !important;
  }
  h6,
  .h6 {
    font-size: 14px;
  }

  .partner-logos-section {
    max-width: 100%;
  }

  .partner-carousel-wrap .owl-carousel .owl-nav .owl-prev {
    left: -30px !important;
  }

  .partner-carousel-wrap .owl-carousel .owl-nav .owl-next {
    right: -20px;
    top: 30%;
  }

  .home-hero-slider {
    background-position: 70% 0 !important;
  }

  .subscribe-text h2 {
    font-size: 2rem;
    text-align: center;
    margin-top: 30px; /* Space between image and text on small screens */
  }
  .subscribe-item {
    justify-content: center; /* Center icons and text on small screens */
    text-align: center;
    flex-direction: column; /* Stack icon and text */
    margin-bottom: 25px;
  }
  .subscribe-item img {
    margin-right: 0;
    margin-bottom: 10px; /* Space between icon and text */
  }
  .subscribe-content-wrapper {
    flex-direction: column; /* Stack columns on small screens */
    padding: 30px 15px;
  }
}

/*=============================================
    01: General CSS
==============================================*/
/* 1.1: Default CSS */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield;
}
::-moz-selection {
  background: #31333e;
  color: #fff;
  text-shadow: none;
}
::selection {
  background: #31333e;
  color: #fff;
  text-shadow: none;
}

button:focus,
input:focus,
select:focus,
textarea:focus {
  outline: none !important;
}
button[type="submit"] {
  cursor: pointer;
  border: none;
}
textarea {
  resize: none;
}
img {
  max-width: 100%;
  height: auto;
}

a {
  color: #000000;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
a:hover {
  color: #00c3ee;
}
a,
a:hover,
a:active,
a:focus {
  text-decoration: none;
  outline: none;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  font-family: "Godger Demo", sans-serif;
  color: #081340;
}
h1,
.h1 {
  font-size: 70px;
  line-height: 70px;
}
h2,
.h2 {
  font-size: 50px;
}
h3,
.h3 {
  font-size: 24px;
}
h4,
.h4 {
  font-size: 20px;
}
h5,
.h5 {
  font-size: 16px;
}
h6,
.h6 {
  font-size: 14px;
}

p {
  font-family: "Tw Cen MT Std", "Tw Cen MT", sans-serif;
  line-height: 36px;
  margin-bottom: 25px;
  font-weight: 400;
  font-size: 18px;
}
body {
  font-family: "Tw Cen MT Std", "Tw Cen MT", sans-serif;
  font-size: 18px;
  color: #70768e;
  line-height: 36px;
  background: #fff;
  overflow-x: hidden !important;
}

.select-wrapper select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.select-wrapper select::-ms-expand {
  display: none;
}
.select-wrapper {
  position: relative;
}
.select-wrapper:after {
  content: "\f107";
  font-family: "FontAwesome";
  position: absolute;
  right: 10px;
  top: 0;
  bottom: 0;
  margin: auto;
  font-size: 20px;
  height: 30px;
  pointer-events: none;
}

/*1.2: background color*/
.home1-vs1-bg {
  background: #0e035c;
  background: -webkit-linear-gradient(left, #0e035c 0%, #25256e 100%);
  background: linear-gradient(to right, #0e035c 0%, #25256e 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0e035c', endColorstr='#25256e',GradientType=1 );
}
.home1-vs2-bg {
  background: #fff;
}
.home2-vs1-bg {
  background: #002797;
  background: -webkit-linear-gradient(left, #355ffe 0%, #002797 100%);
  background: linear-gradient(to right, #355ffe 0%, #002797 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#002797', endColorstr='#355ffe',GradientType=1 );
}
.home2-vs2-bg {
  background: #fff;
}
.home1-section-bg {
  position: relative;
}
.home1-section-bg:after {
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background: #171063;
  z-index: -1;
}
.homelight-section-bg {
  position: relative;
}
.homelight-section-bg:after {
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background: #fcfcfc;
  z-index: -1;
}
.home2-section-bg {
  position: relative;
}
.home2-section-bg:after {
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background: #002197;
  opacity: 0.2;
  z-index: -1;
}
.home3-section-bg {
  background: #f8f8f8;
  position: relative;
}
.home3-section-bg:before {
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background: url(../img/VPN_Pattern.html);
  opacity: 0.8;
}

.home4-section-bg {
  background: #6c771e;
  position: relative;
}
.home4-section-bg:before {
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background: url(../img/VC_Pattern.html);
  opacity: 0.8;
}

.home6-section-bg {
  background: #fcfcfc;
  position: relative;
}
.common-sec-bg {
  background: #fcfcfc;
}
.footer-bg-h3 {
  background-color: #002197;
}
.footer-bg-h4 {
  background-color: #6c771e;
}
.footer-bg-h5 {
  background-color: #e48f0b;
}
.footer-bg-h6 {
  background-color: #00c6c6;
}

/* 1.3: Buttons */
.btn {
  cursor: pointer;
  z-index: 1;
  position: relative;
  padding: 16px 30px;
  color: #fff;
  text-transform: capitalize;
  overflow: hidden;
  background: #e23e1d;
  border-width: 0;
  /* Add smooth color transition to the text */
  transition: color 0.3s ease-in-out;
}

.btn.active,
.btn:hover,
.btn:focus {
  /* Change text color on hover to contrast with the white background */
  color: #e23e1d;
  text-decoration: none;
}

.btn:before {
  content: " ";
  position: absolute;
  /* Start the fill element off the right edge */
  top: 0;
  left: 100%;
  z-index: -1;
  width: 100%;
  height: 100%;
  background: #ffffff; /* Set the fill color to white */
  /* Add the transition for the left property */
  -webkit-transition: left 0.3s ease-in-out;
  transition: left 0.3s ease-in-out;
}

.btn:hover:before {
  /* On hover, slide the fill element from 100% to 0% left */
  left: 0;
}

.btn:focus,
.form-control:focus {
  box-shadow: none !important;
}

.theme-bg-overlay {
  position: relative;
}
.theme-bg-overlay:before {
  content: "";
  position: absolute;
  background: #00c544;
  opacity: 0.7;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.disabled {
  pointer-events: none;
}

.primary-bg {
  background-color: #f4f6fb;
}
.secondery-bg {
  background-color: #ffff;
}
.blue-bg {
  background-color: #ffff;
}
.blue-bg2 {
  background: #ffff;
}

.schoolbell {
  font-family: "Utopia Std", cursive;
}
.exo {
  font-family: "Tw Cen MT Std", "Tw Cen MT", sans-serif;
}
.font-weight-600 {
  font-weight: 400;
}
b,
strong {
  font-weight: bold;
}
.list-inline > li {
  display: inline-block;
}

.form-control {
  font-size: 14px;
}
.form-control:focus {
  border-color: #fff;
}

input.parsley-error,
textarea.parsley-error,
select.parsley-error {
  border: 1px solid red !important;
}
.half-gutter {
  margin-right: -7.5px;
  margin-left: -7.5px;
}
.half-gutter > .col,
.half-gutter > [class*="col-"] {
  padding-right: 7.5px;
  padding-left: 7.5px;
}
.no-gutters-padding {
  padding-right: 0px;
  padding-left: 0px;
}
.theme-border-top {
  border-top: 1px solid #53e1ff;
}
.theme-border-bottom {
  border-bottom: 1px solid #53e1ff;
}

.theme-list-style {
  padding: 0;
  list-style: none;
}
.theme-list-style li {
  font-weight: 600;
  color: #4c4f60;
  padding: 5px 0;
}
.theme-list-style li:before {
  content: "\f05d";
  font-family: "FontAwesome";
  color: #53e1ff;
  font-size: 12px;
  font-weight: normal;
  margin-right: 10px;
}

.form-field {
  position: relative;
  margin-bottom: 15px;
}
.theme-input-style {
  font-size: 12px;
  width: 100%;
  height: 40px;
  padding: 0 10px;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  background: #f4f6fb;
  border: none;
  border-bottom: 1px solid #fff;
  opacity: 1;
  border-radius: 5px;
}

textarea.theme-input-style {
  padding: 10px;
  min-height: 120px;
  display: block;
}

label input[type="checkbox"],
label input[type="radio"] {
  position: relative;
  top: 2px;
  margin-right: 5px;
}

.form-group {
  position: relative;
}

.table-bordered,
.table-bordered td,
.table-bordered th {
  border-color: #e2e6fb;
}

.alignleft {
  float: left;
  margin-right: 15px;
  margin-bottom: 15px;
}
.alignright {
  float: right;
  margin-left: 15px;
  margin-bottom: 15px;
}
.aligncenter {
  clear: both;
  display: block;
  margin: 0 auto 15px;
}
/* 1.4: Padding/Margin */
.pt-140 {
  padding-top: 140px;
}
.pb-140 {
  padding-bottom: 140px;
}
.pt-130 {
  padding-top: 130px;
}
.pb-130 {
  padding-bottom: 130px;
}
.pt-120 {
  padding-top: 120px;
}
.pb-120 {
  padding-bottom: 120px;
}
.pt-110 {
  padding-top: 110px;
}
.pb-110 {
  padding-bottom: 110px;
}
.pt-100 {
  padding-top: 100px;
}
.pb-100 {
  padding-bottom: 100px;
}
.pt-90 {
  padding-top: 90px;
}
.pb-90 {
  padding-bottom: 90px;
}
.pt-80 {
  padding-top: 80px;
}
.pb-80 {
  padding-bottom: 80px;
}
.pt-70 {
  padding-top: 70px;
}
.pb-70 {
  padding-bottom: 70px;
}
.pt-60 {
  padding-top: 60px;
}
.pb-60 {
  padding-bottom: 60px;
}
.pt-55 {
  padding-top: 55px;
}
.pb-55 {
  padding-bottom: 55px;
}
.pt-50 {
  padding-top: 50px;
}
.pb-50 {
  padding-bottom: 50px;
}
.pt-30 {
  padding-top: 30px;
}
.pb-30 {
  padding-bottom: 30px;
}
.pt-20 {
  padding-top: 20px;
}
.pb-20 {
  padding-bottom: 20px;
}

.mt-140 {
  margin-top: 140px;
}
.mb-140 {
  margin-bottom: 140px;
}
.mt-120 {
  margin-top: 120px;
}
.mb-120 {
  margin-bottom: 120px;
}
.mt-70 {
  margin-top: 70px;
}
.mb-70 {
  margin-bottom: 70px;
}
.mt-60 {
  margin-top: 60px;
}
.mb-60 {
  margin-bottom: 60px;
}
.mt-50 {
  margin-top: 50px;
}
.mb-50 {
  margin-bottom: 50px;
}
.mt-40 {
  margin-top: 40px;
}
.mb-40 {
  margin-bottom: 40px;
}
.mt-30 {
  margin-top: 30px;
}
.mb-30 {
  margin-bottom: 30px;
}

/* 1.5: Animations */
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: backwards;
  animation-fill-mode: backwards;
}
.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    -webkit-transform: translate3d(0, -40px, 0);
    transform: translate3d(0, -40px, 0);
  }
  to {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
@keyframes fadeInDown {
  0% {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    -webkit-transform: translate3d(0, -40px, 0);
    transform: translate3d(0, -40px, 0);
  }
  to {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}

@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    -webkit-transform: translate3d(0, 40px, 0);
    transform: translate3d(0, 40px, 0);
  }
  to {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
@keyframes fadeInUp {
  0% {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    -webkit-transform: translate3d(0, 40px, 0);
    transform: translate3d(0, 40px, 0);
  }
  to {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}

@-webkit-keyframes fadeInLeft {
  from {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    -webkit-transform: translate3d(-50%, 0, 0);
    transform: translate3d(-50%, 0, 0);
  }
  to {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInLeft {
  from {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    -webkit-transform: translate3d(-50%, 0, 0);
    transform: translate3d(-50%, 0, 0);
  }
  to {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}

@-webkit-keyframes fadeInRight {
  from {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    -webkit-transform: translate3d(50%, 0, 0);
    transform: translate3d(50%, 0, 0);
  }
  to {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInRight {
  from {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    -webkit-transform: translate3d(50%, 0, 0);
    transform: translate3d(50%, 0, 0);
  }
  to {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
}

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.spin {
  -webkit-animation: spin 2s linear infinite;
  animation: spin 1s linear infinite;
}

@-webkit-keyframes bounce {
  0% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
  50% {
    -webkit-transform: translateY(-40px);
    transform: translateY(-40px);
  }
  100% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
}

@keyframes bounce {
  0% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
  50% {
    -webkit-transform: translateY(-40px);
    transform: translateY(-40px);
  }
  100% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
}
.bounce {
  -webkit-animation: bounce 2s linear infinite;
  animation: bounce 1s linear infinite;
}
@-webkit-keyframes rotate2d {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotate2d {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.rotate2d {
  -webkit-animation: rotate2d 2s linear infinite;
  animation: rotate2d 1s linear infinite;
}
@-webkit-keyframes rotate-2d {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg);
  }
}
@keyframes rotate-2d {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg);
  }
}
.rotate-2d {
  -webkit-animation: rotate-2d 2s linear infinite;
  animation: rotate-2d 1s linear infinite;
}

@-webkit-keyframes rotate3d {
  0% {
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }
  100% {
    -webkit-transform: rotateY(360deg);
    transform: rotateY(360deg);
  }
}

@keyframes rotate3d {
  0% {
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }
  100% {
    -webkit-transform: rotateY(360deg);
    transform: rotateY(360deg);
  }
}
.rotate3d {
  -webkit-animation: rotate3d 2s linear infinite;
  animation: rotate3d 1s linear infinite;
}

#nav #opener {
  display: none;
}

.menu-primary-menu-container ul {
  padding: 0;
  margin: 10px 0 0;
}
.menu-primary-menu-container > ul > li {
  font-size: 18px;
  line-height: 24px;
  display: inline-block;
  vertical-align: top;
  padding: 0 15px;
}
#nav .menu-primary-menu-container li a.active {
  border-bottom: 1px solid #fff;
}
#nav .menu-primary-menu-container li:last-child {
  padding: 0;
}
#nav .menu-primary-menu-container li a {
  color: #fff;
}

#nav ul a {
  position: relative;
}
#nav .menu-primary-menu-container > ul > li a:after {
  background: #fff;
  content: "";
  height: 1px;
  left: 0;
  margin: 5px 0 0;
  position: absolute;
  top: 100%;
  transition: all 0.4s ease-out 0s;
  width: 0;
}
#nav .menu-primary-menu-container > ul > li a:hover:after {
  width: 100%;
  transition: all 0.4s ease-out 0s;
  transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
}
#nav .menu-primary-menu-container > ul > li.current-menu-item a:after,
#nav .menu-primary-menu-container > ul > li.active a:after {
  left: 40px;
  top: 100%;
  content: "";
  height: 1px;
  width: 100%;
  margin: 5px 0 0;
  background: #fff;
  position: absolute;
  transition: all 0.3s ease-out 0s;
  transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
}

@media (max-width: 767px) {
  #nav #opener {
    color: #fff;
    display: block;
    float: right;
    font-size: 30px;
    z-index: 99;
  }
  #nav .menu-primary-menu-container .menu {
  /* Initial State (Closed) */
  left: 2000px;
  position: absolute;
  top: 90px;
  width: 100%;
  visibility: hidden;
  /* Use transform for smooth, hardware-accelerated movement */
  transform: translateX(0); /* Start position for the menu transition */
  opacity: 0;
  
  /* Apply a single, consolidated transition property */
  transition: 
    transform 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55), /* Custom easing for a 'pop' effect */
    opacity 0.4s ease-in,
    visibility 0s 0.6s; /* Delay hiding visibility until the transition finishes */
}

#nav .menu-primary-menu-container .menu.open {
  /* Open State */
  background: #081340;
  opacity: 1;
  visibility: visible;
  left: 0; /* Remove 'left: 0' and rely on 'transform' */
  transform: translateX(0); /* Final position */
  position: absolute;
  z-index: 99;
  top: 90px;
  width: 100%;
  padding: 0;
  margin: 0;
  
  /* Reverse the transition delay for visibility */
  transition: 
    transform 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55),
    opacity 0.4s ease-in,
    visibility 0s 0s; /* Make visible immediately */
}

/* ------------------------------------------- */
/* Animations for All 'li > a' Links           */
/* ------------------------------------------- */

#nav .menu-primary-menu-container .menu li > a {
  /* Initial State for Links (Hidden/Off-screen) */
  display: block; /* Ensure it takes up space for the animation */
  padding: 15px 20px !important;
  /* Start the links slightly off-screen to the left and invisible */
  transform: translateX(550px);
  opacity: 0;
  
  /* Add a transition to make the entrance smooth */
  transition: 
    transform 0.4s ease-out, 
    opacity 0.4s ease-out;
}

#nav .menu-primary-menu-container .menu.open li > a {
  /* Final State for Links (Visible/In position) */
  transform: translateX(0);
  opacity: 1;
}

/* Optional: Stagger the link animation for a better effect */
#nav .menu-primary-menu-container .menu.open li:nth-child(1) > a { transition-delay: 0.1s; }
#nav .menu-primary-menu-container .menu.open li:nth-child(2) > a { transition-delay: 0.2s; }
#nav .menu-primary-menu-container .menu.open li:nth-child(3) > a { transition-delay: 0.3s; }
#nav .menu-primary-menu-container .menu.open li:nth-child(4) > a { transition-delay: 0.4s; }
#nav .menu-primary-menu-container .menu.open li:nth-child(5) > a { transition-delay: 0.5s; }
#nav .menu-primary-menu-container .menu.open li:nth-child(6) > a { transition-delay: 0.6s; }
#nav .menu-primary-menu-container .menu.open li:nth-child(7) > a { transition-delay: 0.7s; }
/* ... continue for more list items */

/* Optional: Add a subtle hover effect */
#nav .menu-primary-menu-container .menu li > a:hover {
  transform: translateX(5px) scale(1.02);
  color: #fff; /* or another hover color */
  background-color: rgba(255, 255, 255, 0.1);
}
  #nav .menu-primary-menu-container > ul > li.current-menu-item a::after,
  #nav .menu-primary-menu-container > ul > li.active a::after {
    background: transparent;
  }

  #nav .menu-primary-menu-container .menu.open .primary-header .info li:hover {
    color: #005788;
    font-weight: 600;
  }

  #nav .menu-primary-menu-container li:last-child,
  .primary-header .info li:first-child {
    padding: 10px;
  }
  #nav .menu-primary-menu-container .menu.open .primary-header .info li,
  #nav .menu-primary-menu-container .menu.open .primary-header .info {
    width: 100%;
  }
  
  #nav .menu-primary-menu-container .menu.open li {
    width: 100%;
    padding: 10px;
  }
  #nav .menu-primary-menu-container .menu.open li a:hover,
  #nav .menu-primary-menu-container .menu.open li:hover a {
    color: #005788;
  }
  .menu-primary-menu-container .menu.open li:hover,
  .menu-primary-menu-container .menu.open li:hover a {
    background: #fff;
    border-radius: 5px;
    font-size: 20px;
    transition: all 0.3s ease;
  }
  .menu-primary-menu-container .menu.open li.current_page_item a,
  .menu-primary-menu-container .menu.open li.current_page_item {
    background: #fff !important;
    color: #005788 !important;
  }
  #nav .menu-primary-menu-container .menu.open ul > li > a {
    display: block;
  }
  #nav .menu-primary-menu-container .menu.open .info li a {
    display: inline-block;
  }
  #nav ul li.active a::after {
    width: 0;
  }
  
}

/*===========================================
        02: Page Title
    ===========================================*/
.page-title-wrap {
  padding-top: 192px;
  padding-bottom: 164px;
}

.page-title h1 {
  color: #53e1ff;
  font-weight: 700;
}
.page-title-content ul {
  justify-content: center;
}

.page-title-content ul li a {
  color: #e23e1d;
  font-size: 24px;
  font-family: "Utopia Std", cursive;
}

.page-title-content ul li {
  position: relative;
  padding: 0 19px;
}

.page-title-content ul li + li:before {
  content: "";
  position: absolute;
  width: 10px;
  height: 2px;
  background: #e23e1d;
  top: 50%;
  left: -2px;
}
.page-title-content h1.h2 {
  font-weight: 400;
}
/*=============================================
    03: Header
==============================================*/

/* 3.1: Header Menu 1*/
.main-header {
  box-shadow: none;
  /* position: fixed;  */
  z-index: 999;
  width: 100%;
  top: 0;
  left: 0;
  -webkit-transition: background 0.3s;
  transition: background 0.3s;
  background-color: #081340;
}
.main-menu-wrap {
  padding: 10px 60px;
}
.urgent-call span {
  margin-right: 15px;
  display: inline-block;
}
.main-header.stuck {
  position: fixed;
  top: 0;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
  width: 100%;
}
.header-menu,
.header-menu ul,
.header-menu ul li,
.header-menu ul li a,
.header-menu #menu-button {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  line-height: 1;
  display: block;
  position: relative;
}
.header-menu #menu-button {
  display: none;
}
.header-menu > ul ul {
  text-align: left;
  z-index: 99999;
}
.header-menu {
  -webkit-transition: 0.3s all linear;
  transition: 0.3s all linear;
}

.header-menu > ul > li {
  display: inline-block;
  float: left;
}
.header-menu > ul > li.has-sub:hover:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 2em;
  bottom: -2em;
  cursor: pointer;
  left: 0;
}
.header-menu > ul > li {
  padding-left: 15px;
  padding-right: 15px;
}
.header-menu > ul > li > a {
  padding: 40px 0 29px;
  font-size: 18px;
  color: #ffffff;
  font-weight: 400;
}

.main-header.sticky .header-menu > ul > li > a {
  color: #ffff;
}

.header-menu > ul > li:hover > a,
.header-menu > ul > li.active > a,
.header-menu > ul > li.current_page_item > a {
  color: #ffff;
}
.main-header.sticky .header-menu > ul > li:hover > a,
.main-header.sticky .header-menu > ul > li.active > a,
.main-header.sticky .header-menu > ul > li.current_page_item > a {
  color: #ffff;
}
/* .header-menu > ul > li > a > img {
    font-size: 12px;
    display: block;
    text-align: center;
    width: inherit;
    top: 63px;
    margin: 8px auto 0;
    transition: all .30s linear;
    visibility: hidden;
    opacity: 0;
}
.header-menu > ul > li.active > a img,
.header-menu > ul > li > a:hover img {
    visibility: visible;
    opacity: 1;
} */

.header-menu > ul > li > a {
  position: relative;
  font-size: 20px;
  display: inline-block;
  text-align: center;
  padding: 10px 5px;
  color: #ffff;
  text-decoration: none;
  transition: color 0.3s ease;
}

/* Lava Orange underline */
.header-menu > ul > li > a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  background: #fff;
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s ease-in-out;
}

/* Show underline on hover & active */
.header-menu > ul > li > a:hover::after,
.header-menu > ul > li.active > a::after,
.header-menu > ul > li.current_page_item > a::after {
  transform: scaleX(1);
  transform-origin: left;
}

.header-menu ul ul {
  position: absolute;
  left: -9999px;
  opacity: 0;
  -webkit-transition: top 0.2s ease, opacity 0.2s ease;
  transition: top 0.2s ease, opacity 0.2s ease;
}
.header-menu > ul > li > ul {
  top: 130px;
  background: #081340;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  -webkit-transition: top 0.2s ease, opacity 0.2s ease;
  transition: top 0.2s ease, opacity 0.2s ease;
  border-radius: 5px;
}
.header-menu > ul > li:hover > ul {
  left: auto;
  top: 40px;
  opacity: 1;
}

.header-menu.align-right > ul > li:hover > ul {
  right: 0;
}

.header-menu ul ul ul {
  top: 32px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.header-menu ul ul ul:after {
  content: "";
  position: absolute;
  left: -10px;
  top: 0;
  width: 10px;
  height: 100%;
  z-index: -1;
}
.header-menu ul ul ul li {
  background: #fff;
}
.header-menu ul ul > li:hover > ul {
  top: 0;
  left: 180px;
  opacity: 1;
}
.header-menu.align-right ul ul > li:hover > ul {
  left: auto;
  right: 178px;
  padding-left: 0;
  padding-right: 10px;
  opacity: 1;
}
.header-menu ul ul li a {
  width: 186px;
  padding: 8px 20px;
  font-size: 16px;
  line-height: 1.25;
  position: relative;
  background: #081340;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  color: #979caf;
}
.main-header.sticky .header-menu ul ul li a {
  background: #081340;
  color: #979caf;
}
.header-menu ul ul li a i {
  position: absolute;
  right: 15px;
  top: 16px;
  font-size: 10px;
}

.header-menu ul ul li:hover > a,
.header-menu ul ul li > a:hover,
.header-menu ul ul li.active > a {
  color: #fff;
}
.main-header.sticky .header-menu ul ul li:hover > a,
.main-header.sticky .header-menu ul ul li > a:hover,
.main-header.sticky .header-menu ul ul li.active > a {
  color: #fff;
}
.menu-wraper {
  float: right;
}
.header-menu > ul {
  -webkit-transition: 0.3s all linear;
  transition: 0.3s all linear;
}
.header-menu > ul > li:last-child {
  margin-right: 0;
}
.header-menu ul ul ul,
.header-menu ul ul {
  padding: 8px 0;
  background: #fff;
}

.header-menu > ul > li > ul .has-sub-item {
  position: relative;
}

.header-menu > ul > li > ul .has-sub-item:after {
  content: ">";
  position: absolute;
  right: 10px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
.has-sub-item:hover:after {
  color: #53e1ff;
}
.logo img {
  max-height: 80px;
  filter: brightness(0) invert(1);
}
.logo .sticky-logo {
  display: none;
}
.logo .sticky-logo {
  display: none;
}
.main-header.sticky .logo .default-logo {
  display: none;
}
.main-header.sticky .logo .sticky-logo {
  display: block;
}
.main-header.sticky {
  position: fixed;
  width: 100%;
  animation-duration: 0.5s;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
}

.menu-button {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  justify-content: center;
}
.signup--out-btn {
  margin-left: 16px;
}
.main-header .header-menu ul ul li.active a:before {
  visibility: visible;
  opacity: 1;
  background: #53e1ff;
}
.main-header
  .header-menu
  ul
  .has-sub-item
  ul
  .has-sub-item
  ul
  li.active
  a:before {
  visibility: visible;
  opacity: 1;
  background: #53e1ff;
}
.main-header .header-menu ul .has-sub-item ul .has-sub-item ul li a:before {
  visibility: hidden;
  opacity: 0;
}
.main-header
  .header-menu
  ul
  .has-sub-item
  ul
  .has-sub-item
  ul
  li
  a:hover:before {
  visibility: visible;
  opacity: 1;
}
.header-style2 .header-menu > ul > li > a {
  padding: 40px 0 29px;
  font-size: 18px;
  color: #ffff;
  font-weight: 400;
}
.main-header.header-style2 {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.header-style2.sticky .main-logo {
  display: none;
}
.header-style2.sticky .sticky-logo {
  display: block !important;
}
.header-style2 .urgent-call a {
  color: #ffff;
}
.header-style2.sticky .urgent-call a {
  color: #333333;
}
.common-header .header-menu > ul > li > a {
  color: #333333;
}
.common-header .signup--out-btn a {
  background: #53e1ff;
  color: #fff;
}
.common-header .header-menu > ul > li:hover > a,
.common-header .header-menu > ul > li.active > a {
  color: #53e1ff;
}
.common-header .header-menu ul ul li a {
  background: #fff;
  color: #333333;
}
.common-header .header-menu ul ul li:hover > a,
.common-header .header-menu ul ul li > a:hover,
.common-header .header-menu ul ul li.active > a {
  color: #53e1ff;
}
.common-header .header-menu ul ul li.active a:before {
  visibility: visible;
  opacity: 1;
  background: #53e1ff;
}
/*=============================================
    04: Banner
==============================================*/
/*4.1: main banner 01*/
.banner-inner-area::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 200px; /* 👈 only bottom area */
  background-image: url(https://creativemela.com/themeforest_html/Fresh_Vial/demo/freeshvila/images/shape.png);
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: 100% auto; /* full width scaling */
  z-index: 1; /* keeps it above background */
}
.banner-inner-area,
.banner-inner-area > * {
  position: relative;
  z-index: 2; /* keeps text above the shape */
}
.banner-area1 .banner-text-wrap h1 {
  font-weight: 400;
  line-height: 80px;
  margin-bottom: 20px;
}
.banner-area1 .banner-text-wrap span {
  color: #e23e1d;
  font-size: 30px;
  margin-bottom: 7px;
  display: block;
}
.banner-area1 .banner-text-wrap {
  padding: 0;
}
.banner-area1 .banner-text-wrap .btn {
  background: #ffff;
}
.banner-area1 .banner-text-wrap .btn:hover:before {
  background: #081340;
}
.banner-image .ice1 {
  position: absolute !important;
  z-index: 1;
  bottom: 73px !important;
  left: -118px !important;
  top: auto !important;
}

.banner-image .bottle {
  text-align: center;
  z-index: 11;
  position: relative;
}

.banner-image {
  text-align: center;
  margin-top: 60px;
}

.banner-image .ice2 {
  position: absolute !important;
  bottom: 45px !important;
  right: -118px !important;
  top: auto !important;
  left: auto !important;
}
.banner-inner-area.banner-area1 {
  padding: 100px 0 0;
  background: #f4f6fb;
  position: relative;
  z-index: 11;
}
.banner-inner-area.banner-area1:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 220px;
  background: #fff;
  bottom: 0;
  left: 0;
}
.banner-inner-area.banner-area1:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 59px;
  background: url("../img/waves.png");
  bottom: 18%;
  left: 0;
  z-index: -1;
}
/*4.02: main banner home2
===============================*/
.banner-wrap.home-banner2 {
  background-repeat: no-repeat !important;
  background-size: cover !important;
  padding: 330px 0 200px;
}
.banner-text-wrap span {
  color: #e23e1d;
  font-size: 30px;
  margin-bottom: 13px;
  display: block;
}

.banner-text-wrap h1 {
  font-weight: 400;
  line-height: 68px;
  margin-bottom: 33px;
}

.banner-text-wrap {
  padding-top: 345px;
}
input.banner-form {
  border: none;
  margin-left: -4px;
  border-right: 1px solid #dae0ef;
  height: 80px;
  padding-left: 18px;
}
.inpout-feield-wrap {
  border-radius: 5px;
  background: #fff;
  position: relative;
}

.inpout-feield-wrap input.banner-form:first-child {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}
.inpout-feield-wrap button.btn {
  top: 50%;
  position: absolute;
  transform: translateY(-50%);
  right: 15px;
}
.banner-wrap.home-banner2 .banner-text-wrap {
  padding-top: 0;
  margin-bottom: 50px;
}
.banner-wrap.home-banner2 .banner-text-wrap h1 {
  line-height: 80px;
  margin-bottom: 0px;
}
input.banner-form:nth-child(4) {
  border-width: 0;
}
/* custom check box */
.checkbox-wrap {
  display: block;
  position: relative;
  padding-left: 35px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  vertical-align: middle;
  margin-bottom: 0;
  color: #fff;
  font-size: 18px;
}

/* Hide the browser's default checkbox */
.checkbox-wrap input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 9px;
  left: 0;
  height: 20px;
  width: 20px;
  background-color: transparent;
  border: 2px solid #fff;
  border-radius: 6px;
}

/* When the checkbox is checked, add a blue background */
.checkbox-wrap input:checked ~ .checkmark {
  background-color: #fff;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.checkbox-wrap input:checked ~ .checkmark:after {
  display: block;
  transform: rotate(45deg) scale(1);
}

/* Style the checkmark/indicator */
.checkbox-wrap .checkmark:after {
  left: 5px;
  top: 2px;
  width: 6px;
  height: 10px;
  border: solid #000;
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg) scale(2);
  border-radius: 2px;
}

/* type2 */
.type2 .checkbox-wrap {
  color: #70768e;
  font-size: 16px;
}

.type2 .checkmark {
  border: 1px solid #dae0ef;
}
.type2 .checkbox-wrap .checkmark:after {
  left: 6px;
  top: 3px;
}
/* 4.03: main banner home3
====================================*/
.single-banner-wrap {
  padding: 240px 0 140px;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}
.banner-slider3 .banner-text-wrap span {
  font-size: 30px;
  color: #e23e1d;
  margin-bottom: 10px;
  display: inline-block;
}

.banner-slider3 .banner-text-wrap h1 {
  font-weight: 400;
  margin-bottom: 30px;
}
.banner-delivery-form {
  background: #fff;
  border-radius: 5px;
  overflow: hidden;
  z-index: 100;
  position: relative;
  margin-top: 240px;
}
.banner-delivery-form .form-header {
  background: #081340;
  padding: 25px 0 33px;
}
.banner-delivery-form .form-header h2 {
  color: #fff;
  font-size: 30px;
  margin-bottom: 0;
}
.banner-delivery-form .theme-input-style {
  background: #fff;
  border-bottom: 1px solid #dae0ef;
  margin-bottom: 20px;
  font-size: 16px;
  color: #70768e;
}

.banner-delivery-form form {
  padding: 25px 40px 40px;
}
.form-checkbox ul li {
  display: inline-block;
  margin-right: 17px;
}

.form-checkbox {
  margin-bottom: 25px;
  margin-top: 10px;
}
.form-checkbox ul li span {
  margin-left: 5px;
}
.form-btn button {
  width: 100%;
}
.form-checkbox ul li span {
  font-size: 18px;
  color: #fff;
  font-weight: 500;
  transition: 0.2s all ease-in-out;
}
.banner-slider3 .form-checkbox ul li span {
  color: #333333;
}
.banner-delivery-form .theme-input-style::placeholde {
  color: #70768e !important;
}
.banner-delivery-form .theme-input-style {
  color: #000;
}
.banner_area1 {
  overflow: hidden;
  position: relative;
}

.finance .slider_inner_area {
  align-content: center;
  align-items: center;
  display: flex;
  height: 700px;
}

.banner_area .camera_overlayer {
  bottom: 0;
  height: 100%;
  left: 0;
  overflow: hidden;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
  z-index: 0;
  background: rgba(17, 17, 17, 0.6);
}
.camera_prevThumbs,
.camera_nextThumbs,
.camera_prev,
.camera_next,
.camera_commands,
.camera_thumbs_cont {
  background: transparent none repeat scroll 0 0;
}
.camera_next span,
.camera_prev span {
  border-radius: 50%;
  height: 60px;
  position: relative;
  width: 60px;
}

.banner_area.finance.camera_next span,
.banner_area.finance.camera_prev span {
  background: rgba(0, 0, 0, 0.2) none repeat scroll 0 0;
}
.camera_prev {
  left: 20px;
  top: calc(50% + 13px);
}
.camera_next {
  right: 40px;
  top: calc(50% + 13px);
}
.camera_next span,
.camera_prev span {
  border-radius: 50%;
  height: 60px;
  position: relative;
  width: 60px;
}
.camera_next span::before {
  content: "\f105";
  color: #fff;
  font-family: FontAwesome;
  font-size: 30px;
  left: 0;
  position: absolute;
  top: 0;
  right: 0px;
  left: 3px;
  text-align: center;
  line-height: 56px;
}
.camera_prev span::before {
  content: "\f104";
  color: #fff;
  font-family: FontAwesome;
  font-size: 30px;
  left: 3;
  position: absolute;
  top: 0;
  right: 0px;
  left: 0px;
  text-align: center;
  line-height: 56px;
}
.camera_next span,
.camera_prev span {
  /* background: rgba(0,0,0,.10); */
}
.camera_prevThumbs,
.camera_nextThumbs,
.camera_prev,
.camera_next,
.camera_commands,
.camera_thumbs_cont {
  background: transparent !important;
}
.camera_next > span,
.camera_prev > span {
  background: rgba(255, 255, 255, 0.2) !important;
  display: block;
  height: 60px !important;
  width: 60px !important;
  line-height: 56px !important;
  transition: 0.3s all linear;
}
.camera_next > span:hover,
.camera_prev > span:hover {
  background: #081340 !important;
}
.camera_prev,
.camera_next,
.camera_commands {
  top: 50% !important;
  transform: translate(-50%) !important;
}
.camera_next > span {
  right: 0px;
}
.camera_prev > span {
  left: 22px;
}
.banner_area1 .camera_overlayer {
  bottom: 0;
  height: 100%;
  left: 0;
  overflow: hidden;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
  z-index: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0.9;
}
@keyframes grow {
  from {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
  to {
    -webkit-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
  }
}

.grow {
  animation-name: grow;
  animation-duration: 30s;
  animation-delay: 1s;
}
.slider_overlay_area {
  position: absolute;
}
.slider_overlay_area {
  position: absolute;
  left: 0;
  width: 100%;
}

.slider_inner_area {
  position: relative;
  z-index: 10;
}
.slider_inner_area {
  display: flex;
  align-items: center;
  height: calc(100vh - 137px) !important;
}
.slider_inner_text {
  background: #fff;
  padding: 30px;
  border-top-right-radius: 15px;
}
.slider_inner_text p {
  color: #777;
}

/*==============================================
    05: Feature area
==============================================*/
.section-title h2 {
  color: #081340;
  font-weight: 400;
}
.section-title p {
  width: 600px;
  margin: 41px auto;
  color: #70768e;
  line-height: 30px;
}
.type2.section-title {
  margin-bottom: 30px;
}

.section-title {
  position: relative;
  margin-bottom: 40px;
}
.section-title:after {
  content: "";
  position: absolute;
  top: 105%;
  left: 50%;
  transform: translateX(-50%);
  background-image: url("../img/line.html");
  width: 36px;
  height: 7px;
}
.type3.section-title:after {
  top: 107px;
}

.section-title span {
  color: #e23e1d;
  font-weight: 400;
  font-size: 24px;
  display: block;
}
.type2.section-title:after {
  left: 0;
  transform: translateX(0%);
}
.single-feature-inner .feature-icon svg {
  width: 55px;
  height: 50px;
}

.single-feature-inner .feature-icon {
  display: inline-block;
  height: 130px;
  width: 130px;
  background: #e23e1d;
  line-height: 130px;
  border-radius: 50%;
  margin-bottom: 20px;
  transition: 0.3s all linear;
}
.single-feature-inner:hover .feature-icon {
  background: #081340;
}
.single-feature-inner h4 {
  font-weight: 400;
  color: #081340;
  margin-bottom: 30px;
  text-transform: capitalize;
  padding: 0 10px;
  line-height: 30px;
}

.single-feature-inner p {
  margin-bottom: 10px;
  text-transform: inherit;
  font-size: 16px;
  line-height: 30px;
}
.single-feature-inner a {
  font-weight: 500;
  font-size: 16px;
}
.single-feature-inner:after {
  content: "";
  position: absolute;
  height: 100%;
  width: 1px;
  background: #f4f6fb;
  top: 0;
  right: -17px;
}
.single-feature-inner {
  margin-bottom: 30px;
  padding: 0 30px;
  position: relative;
  margin-top: -30px;
}
.single-feature-inner a i {
  margin-right: 10px;
  color: #e23e1d;
}
.single-feature-inner .feature-icon svg path {
  fill: #fff;
}
.row .col-md-6.col-lg-3:last-child .single-feature-inner:after {
  display: none;
}

.single-testimonial {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 30px;
  text-align: center;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  position: relative;
}

.single-testimonial:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

/* Quote icon */
.single-testimonial .qurt-icon1 {
  width: 50px;
  height: auto;
  margin: 0 auto 20px auto;
  display: block;
  opacity: 0.8;
}

/* Testimonial text */
.single-testimonial p {
  font-size: 15px;
  line-height: 1.6;
  color: #444;
  margin-bottom: 25px;
  font-style: italic;
}

/* Author wrapper */
.single-testimonial .testimonial-author {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

/* Author image */
.single-testimonial .testimonial-author img {
  width: 55px;
  height: 55px;
  border-radius: 50%;
  border: 2px solid #e23e1d;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.single-testimonial:hover .testimonial-author img {
  transform: scale(1.1);
}

/* Author details */
.single-testimonial .testimonial-author-deg h4 {
  font-size: 16px;
  font-weight: 400;
  margin: 0;
  color: #222;
}

.single-testimonial .testimonial-author-deg p {
  font-size: 13px;
  color: #e23e1d;
  margin: 0;
}

/*5:01 feature type2*/
.features-inner.type2 {
  background: #ffff;
}
.type2 .single-feature h3 {
  color: #fff;
  font-weight: 400;
}

.type2 .single-feature svg {
  margin-bottom: 22px;
  height: 64px;
  width: 64px;
}

.type2 .single-feature {
  padding: 0px 50px;
  position: relative;
  margin-bottom: 30px;
}

.type2 .single-feature:after {
  content: "";
  background: #142155;
  position: absolute;
  width: 1px;
  height: 100%;
  top: 0;
  right: 0;
}
.features-inner.type2 .col-md-6:last-child .single-feature:after {
  display: none;
}
/*5:02 feature type3*/
.type3 .single-feature:hover {
  box-shadow: 0px 10px 30px rgba(218, 224, 239, 0.4);
}
.type3 .single-feature {
  padding: 54px 60px 50px;
  border: 1px solid #dae0ef;
  margin-bottom: 30px;
  transition: 0.3s all linear;
  border-radius: 4px;
}

.type3 .single-feature h4 {
  margin-bottom: 30px;
  font-weight: 400;
}
.type3 .single-feature p {
  margin-bottom: 0;
  font-size: 16px;
  line-height: 30px;
}

/*=========================================
    06: Video section
=========================================*/
.bottle-video-wrap .video-btn {
  height: 130px;
  width: 130px;
  background: #fff;
  line-height: 130px;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  font-size: 30px;
  padding-left: 10px;
}

.bottle-video-wrap {
  position: relative;
}
.background-shap {
  position: relative;
}

.background-shap:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 572px;
  background: #f4f6fb;
  top: 0;
  left: 0;
  z-index: -1;
}

.background-shap:after {
  position: absolute;
  content: "";
  width: 100%;
  height: 59px;
  left: 0;
  top: 65%;
  background-image: url(../img/waves.png);
  z-index: -1;
}
/*===============================================
    07: bottle delivery
===============================================*/ /* Bottle Card */
.single-bottle-inner {
  border: 1px solid #dae0ef;
  padding: 60px 40px 50px;
  margin-bottom: 30px;
  border-radius: 12px;
  background: #fff;
  transition: all 0.4s ease-in-out;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

/* Floating Animation */
.single-bottle-inner:hover {
  transform: translateY(-10px) scale(1.03);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
  border-color: transparent;
}

/* Bottle Image */
.single-bottle-inner .bottle-image {
  margin-bottom: 25px;
  transition: transform 0.4s ease;
}
.single-bottle-inner:hover .bottle-image {
  transform: rotate(-5deg) scale(1.1);
}

/* SVG Color Transition */
.single-bottle-inner .bottle-image svg path {
  fill: #ffff;
  transition: fill 0.4s ease;
}
.single-bottle-inner:hover .bottle-image svg path {
  fill: #e23e1d;
}

/* Heading */
.single-bottle-text h4 {
  color: #081340;
  margin-bottom: 20px;
  font-weight: 700;
  font-size: 20px;
  transition: color 0.3s ease;
}
.single-bottle-inner:hover .single-bottle-text h4 {
  color: #e23e1d;
}

/* Description */
.single-bottle-text p {
  color: #70768e;
  font-size: 15px;
  margin-bottom: 18px;
  line-height: 28px;
  transition: color 0.3s ease;
}
.single-bottle-inner:hover .single-bottle-text p {
  color: #444;
}

/* Order Button */
.single-bottle-text a {
  display: inline-flex;
  align-items: center;
  font-weight: 400;
  color: #081340;
  text-decoration: none;
  transition: all 0.3s ease;
  font-size: 16px;
  position: relative;
  z-index: 2;
}
.single-bottle-text a i {
  margin-right: 8px;
  color: #e23e1d;
  transition: transform 0.3s ease, color 0.3s ease;
}
.single-bottle-text a:hover {
  color: #e23e1d;
}
.single-bottle-text a:hover i {
  transform: translateX(5px);
  color: #081340;
}

/* Subtle Card Background Gradient on Hover */
.single-bottle-inner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(226, 62, 29, 0.05),
    rgba(8, 19, 64, 0.05)
  );
  opacity: 0;
  transition: opacity 0.4s ease;
  border-radius: 12px;
}
.single-bottle-inner:hover::after {
  opacity: 1;
}

/* All cards default */
.single-bottle-inner {
  border: 1px solid #dae0ef;
  padding: 20px 10px;
  margin-bottom: 30px;
  border-radius: 12px;
  background: #fff;
  transition: all 0.4s ease-in-out;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

/* Hover effects for all cards */
.single-bottle-inner:hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
  border-color: transparent;
}

.single-bottle-inner:hover .bottle-image img {
  animation: shakeBottle 1.2s ease-in-out infinite;
}

.single-bottle-inner:hover .bottle-image svg path {
  fill: #e23e1d;
}

.single-bottle-inner:hover .single-bottle-text h4 {
  color: #e23e1d;
}

.single-bottle-inner:hover .single-bottle-text p {
  color: #444;
}

.single-bottle-inner:hover .single-bottle-text a i {
  transform: translateX(5px);
  color: #081340;
}

.single-bottle-inner:hover::after {
  opacity: 1;
}

/* Gradient overlay */
.single-bottle-inner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(226, 62, 29, 0.05),
    rgba(8, 19, 64, 0.05)
  );
  opacity: 0;
  transition: opacity 0.4s ease;
  border-radius: 12px;
}

/* ---- CENTER CARD ALWAYS ACTIVE ---- */
.single-bottle-inner.center {
  transform: translateY(-10px) scale(1.02);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
  border-color: transparent;
}

.single-bottle-inner.center .bottle-image img {
  animation: shakeBottle 1.2s ease-in-out infinite;
}

.single-bottle-inner.center .bottle-image svg path {
  fill: #e23e1d;
}

.single-bottle-inner.center .single-bottle-text h4 {
  color: #e23e1d;
}

.single-bottle-inner.center .single-bottle-text p {
  color: #444;
}

.single-bottle-inner.center .single-bottle-text a i {
  transform: translateX(5px);
  color: #081340;
}

.single-bottle-inner.center::after {
  opacity: 1;
}

/* Shake animation */
@keyframes shakeBottle {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(3deg);
  }
  50% {
    transform: rotate(-3deg);
  }
  75% {
    transform: rotate(2deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

/*=============================================
    08: start about section
=============================================*/
.single-counter-inner .counter-image img {
  width: 100%;
  height: 300px;
}

.single-counter-inner .counter-image svg path {
  fill: #ffff;
}

.single-counter-inner .counter-image {
  margin-bottom: 15px;
}

.single-counter-inner span {
  font-size: 40px;
  font-weight: 400;
  color: #081340;
}

.single-counter-inner p {
  color: #70768e;
  margin-bottom: 0;
}

.single-counter-inner {
  background: #ffffff;
  padding: 20px;
  border-radius: 5px;
}

.about-wrap {
  padding-left: 40px;
}
.about-image img {
  max-height: 605px;
  height: 605px;
  object-fit: cover;
}

.about-image {
  border-radius: 5px;
  overflow: hidden;
}
.about-wrap .about-area-text p {
  margin-bottom: 52px;
}
.about-wrap .single-counter-inner p {
  margin-bottom: 0;
}
/*safer area*/
.single-safer-inner .safer-image svg {
  width: 65px;
  height: 65px;
}

.single-safer-inner .safer-image svg path {
  fill: #ffff;
  transition: 0.3s all linear;
}
.single-safer-inner:hover .safer-image svg path {
  fill: #fff;
}
.single-safer-inner .safer-image {
  height: 130px;
  width: 130px;
  margin: 0 auto;
  line-height: 130px;
  border-radius: 50%;
  background: #f4f6fb;
  margin-bottom: 25px;
  transition: 0.3s all linear;
}
.single-safer-inner:hover .safer-image {
  background: #081340;
}
.single-safer-inner h4 {
  font-weight: 400;
  color: #081340;
}

.single-safer-inner p {
  color: #70768e;
  margin-bottom: 0;
  line-height: 30px;
  font-size: 16px;
}

.single-safer-inner {
  background: #ffffff;
  padding: 40px 37px 32px;
  margin-bottom: 30px;
}
.safer-text {
  margin-top: 34px;
}
.life-safer-image img {
  width: 100%;
}
.urgent-call a {
  font-weight: 700;
  color: #ffff;
}
/*==========================================
    09: start our team
==========================================*/
.member-info .team-social-wrap li {
  display: inline-block;
  margin: 0 2px;
}

.member-info .team-social-wrap li a {
  height: 45px;
  width: 45px;
  display: inline-block;
  background: #f4f6fb;
  line-height: 45px;
  text-align: center;
  border-radius: 50%;
  transition: 0.3s all linear;
}
.member-info .team-social-wrap li a:hover {
  background: #e23e1d;
  color: #fff;
}
.member-info {
  padding-top: 25px;
}

.member-info h4 {
  margin-bottom: 0;
}

.member-info p {
  margin-bottom: 10px;
  font-size: 16px;
}

.single-team-member {
  margin-bottom: 30px;
  position: relative;
  overflow: hidden;
  text-align: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.single-team-member img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.4s ease;
}

/* overlay effect */
.single-team-member::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(226, 62, 29, 0.7); /* #E23E1D with opacity */
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 1;
}

/* social icons wrapper */
.team-social-wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  gap: 15px;
  list-style: none;
  margin: 0;
  padding: 0;
  z-index: 2; /* above overlay */
}

.team-social-wrap li {
  opacity: 0;
  transform: translateY(80px);
  transition: all 0.4s ease;
}

.single-team-member:hover::before {
  opacity: 1; /* show overlay */
}

.single-team-member:hover img {
  transform: scale(1.1); /* zoom effect */
}

.single-team-member:hover .team-social-wrap li {
  opacity: 1;
  transform: translateY(0);
}

/* stagger animation */
.single-team-member:hover .team-social-wrap li:nth-child(1) {
  transition-delay: 0.1s;
}
.single-team-member:hover .team-social-wrap li:nth-child(2) {
  transition-delay: 0.2s;
}
.single-team-member:hover .team-social-wrap li:nth-child(3) {
  transition-delay: 0.3s;
}

/* icon style */
.team-social-wrap li a {
  display: inline-block;
  width: 40px;
  height: 40px;
  background: #fff;
  color: #e23e1d;
  border-radius: 50%;
  line-height: 40px;
  text-align: center;
  font-size: 16px;
  transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease;
}

/* bounce hover effect on icon */
.team-social-wrap li a:hover {
  background: #e23e1d;
  color: #fff;
  transform: translateY(-6px) scale(1.1);
}

/*===========================================
        10: subscribe area
===========================================*/
.boxed-shadow {
  box-shadow: 1px -1px 0 #dae0ef;
}
.primary-form .btn {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  padding: 16px 29px;
}
.primary-form input.theme-input-style:not([type="submit"]) {
  height: 78px;
  padding: 0 30px;
  font-size: 14px;
}
.subscribe-heading span {
  font-size: 24px;
  color: #e23e1d;
}

.subscribe-heading h2 {
  font-weight: 400;
}
.single-testimonial {
  background: #fff;
  border-radius: 12px;
  padding: 30px 25px;
  margin: 15px;
  position: relative;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  text-align: center;
}

.single-testimonial:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.15);
}

/* quotation icon */
.qurt-icon1 {
  width: 50px;
  margin: 0 auto 15px;
  display: block;
  opacity: 0.2;
}

/* testimonial text */
.single-testimonial p {
  font-size: 15px;
  color: #555;
  font-style: italic;
  line-height: 1.7;
  margin-bottom: 25px;
  position: relative;
}

/* author section */
.testimonial-author {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.testimonial-author img {
  width: 55px;
  height: 55px;
  border-radius: 50%;
  border: 3px solid #e23e1d;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.single-testimonial:hover .testimonial-author img {
  transform: scale(1.1);
}

.testimonial-author-deg h4 {
  font-size: 16px;
  font-weight: 400;
  margin: 0;
  color: #222;
}

.testimonial-author-deg p {
  font-size: 14px;
  margin: 0;
  color: #e23e1d;
  font-weight: 500;
  letter-spacing: 0.5px;
}

/*============================================
    11: testimonial area
============================================*/
.style3 .owl-nav {
  display: none;
}
.testimonial-carousel .owl-prev,
.testimonial-carousel .owl-next {
  display: none;
}
.testimonial-carousel .single-testimonial p {
  margin-bottom: 15px;
}
.testimonial-carousel .testimonial-author-deg p {
  margin-bottom: 0px;
}
.testimonial-carousel .single-testimonial p {
  font-size: 18px;
  line-height: 36px;
  z-index: 11;
  position: relative;
}
.single-testimonial {
  padding: 30px 20px;
  background: #fff;
  border-radius: 3px;
}

.testimonial-author {
  border-top: 1px solid #dae0ef;
  padding-top: 15px;
  align-items: center;
}

.single-testimonial p {
  margin-bottom: 30px;
  font-size: 24px;
}

.testimonial-author-deg h4 {
  margin-bottom: 0;
  color: #ffff;
  line-height: 1.3;
  font-weight: 400;
}

.testimonial-author-deg p {
  margin-bottom: 0;
  line-height: 1;
  font-size: 16px;
}

.testimonial-author-deg {
  margin-left: 20px;
}
.testimonial-author img {
  width: inherit !important;
}
.testimonial-carousel button.owl-dot {
  height: 7px;
  width: 7px;
  background: #ffffff !important;
  margin-right: 5px;
  border-radius: 50%;
  opacity: 0.2;
  vertical-align: middle;
  transition: 0.3s all linear;
}

.testimonial-carousel .owl-dots {
  text-align: center;
  margin-top: 41px;
}

.testimonial-carousel button.owl-dot.active {
  height: 10px;
  width: 10px;
  background: #ffff !important;
  opacity: 1;
}
.testimonial-carousel button.owl-next,
.testimonial-carousel button.owl-prev {
  width: 70px;
  height: 70px;
  background: rgba(255, 255, 255, 0.2) !important;
  border-radius: 50%;
  position: absolute;
  top: 33%;
  transform: translate(-50%);
  transition: 0.3s all linear;
}
.testimonial-carousel button.owl-next:hover,
.testimonial-carousel button.owl-prev:hover {
  background: rgba(255, 255, 255, 1) !important;
}
.testimonial-carousel button.owl-prev {
  left: -55px;
}
.testimonial-carousel button.owl-next {
  right: -125px;
}
.testimonial-carousel button.owl-next i,
.testimonial-carousel button.owl-prev i {
  font-size: 18px;
}
.single-testimonial .qurt-icon1 {
  width: inherit !important;
  position: absolute;
  top: 41px;
  left: 35px;
  opacity: 0.4;
}
/*11: 01 testimonial area type2*/
.type2 .single-testimonial {
  padding: 50px 135px 103px;
  position: relative;
}
.type2 .testimonial-author img {
  width: inherit !important;
  position: absolute;
  left: 51%;
  transform: translate(-50%);
  bottom: -61px;
}
.type2 .testimonial-author {
  border-top: 1px solid #dae0ef;
  padding-top: 0;
  align-items: center;
  border-width: 0;
}
.type2.testionial-carousel-wrap .owl-stage-outer {
  position: relative;
  overflow: hidden;
  -webkit-transform: translate3d(0, 0, 0);
  overflow-y: -webkit-paged-y;
}
.testionial-carousel2 .testi-quate img {
  width: inherit !important;
  margin: 0 auto 30px;
}
.testionial-carousel2 button.owl-next,
.testionial-carousel2 button.owl-prev {
  width: 70px;
  height: 70px;
  background: rgba(255, 255, 255, 0.2) !important;
  border-radius: 50%;
  position: absolute;
  top: 33%;
  transform: translate(-50%);
  transition: 0.3s all linear;
}
.testionial-carousel2 button.owl-next:hover,
.testionial-carousel2 button.owl-prev:hover {
  background: rgba(255, 255, 255, 1) !important;
}
.testionial-carousel2 button.owl-prev {
  left: -55px;
}
.testionial-carousel2 button.owl-next {
  right: -125px;
}
.testionial-carousel2 button.owl-next i,
.testionial-carousel2 button.owl-prev i {
  font-size: 18px;
}
/*==============================================
    12: our location
==============================================*/
.our-location:hover {
  transform: scale(1);
  z-index: 10;
}
.our-location {
  position: absolute;
  height: 20px;
  width: 20px;
  background: #ffff;
  border-radius: 50%;
  cursor: pointer;
  transition: 0.3s all linear;
  border: 2px solid #fff;
  transform: scale(0.9);
}
.our-location:hover .our-location-details {
  visibility: visible;
  opacity: 1;
}

.our-location:hover {
  background: #081340;
}
.our-location-wrap {
  position: relative;
}

.our-location-details {
  width: 280px;
  height: 150px;
  background: #fff;
  position: absolute;
  left: -88px;
  top: 20px;
  box-shadow: 1px 0 30px #dae0ef;
  border: 1px solid #dae0ef;
  text-align: left;
  padding: 34px 0px 34px 40px;
  visibility: hidden;
  opacity: 0;
  transition: 0.3s all linear;
  z-index: 10;
  border-radius: 5px;
}

.our-location-details p {
  margin-bottom: 11px;
  font-size: 16px;
  line-height: 1.3;
}

.our-location-details a {
  font-size: 16px;
  display: block;
  line-height: 1.3;
  margin-bottom: 8px;
  color: #70768e;
}
.our-location.marker1 {
  top: 20%;
  left: 20%;
}
.our-location.marker2 {
  top: 43%;
  left: 47%;
}
.our-location.marker3 {
  top: 66%;
  left: 29%;
}
.our-location.marker4 {
  top: 20%;
  left: 68%;
}
.our-location.marker5 {
  top: 77%;
  left: 81%;
}
/*====================================
    13: our partner
====================================*/
.partner-carousel img {
  width: inherit !important;
  margin: 0 auto;
  vertical-align: middle;
}
/*=========================================
    14: our quality feature
=========================================*/
.our-quality-inner p {
  font-size: 16px;
  line-height: 30px;
}
.our-quality-right,
.our-quality-left {
  width: 49%;
}
.our-quality-right ul li span,
.our-quality-left ul li span {
  width: 45px;
  height: 45px;
  background: #081340;
  display: inline-block;
  text-align: center;
  line-height: 45px;
  border-radius: 50%;
  margin-right: 15px;
  color: #fff;
  font-weight: 400;
  font-size: 15px;
}
.our-quality-right ul li,
.our-quality-left ul li {
  font-size: 20px;
  font-weight: 400;
  color: #081340;
}
.our-quality-right ul li:not(:last-child),
.our-quality-left ul li:not(:last-child) {
  padding-bottom: 18px;
}
.quality {
  background-size: cover !important;
  border-bottom: 1px solid #dae0ef;
}
.border-container {
  border: 1px solid #dae0ef;
  border-radius: 5px;
  border-top: 0;
}
/*14:01 quality type2*/
.bottle-detailes h3 {
  font-weight: 400;
  margin-bottom: 31px;
}
.our-quality-inner p {
  font-size: 16px;
  line-height: 30px;
  margin-bottom: 53px;
}
.our-quality-inner.bottle-detailes p {
  margin-bottom: 0;
}
.bottle-detailes .our-quality-feature {
  margin: 50px 0 60px;
}
.bottle-detailes .order-btn {
  margin-top: 51px;
}

.bottle-detailes .order-btn a + a {
  margin-left: 10px;
  background: #081340;
}
.quality-bottle-details {
  padding-left: 60px;
}

.bottle-image {
  position: relative;
  margin-bottom: 20px;
}

.image-sell-offer {
  width: 130px;
  height: 130px;
  position: absolute;
  background: #e23e1d;
  border-radius: 50%;
  text-align: center;
  top: 50px;
  right: 40px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 10px 30px rgba(255, 162, 29, 0.3);
}
.figure-caption .image-sell-offer {
  top: 31px;
  right: 114px;
  z-index: 100;
}
.image-sell-offer h5 {
  color: #ffff;
  font-size: 22px;
  font-family: "Utopia Std", cursive;
  margin-bottom: 0;
}

.image-sell-offer h5 span {
  display: block;
}
.bottle-price ul {
  background: #ffff;
  padding: 21px 38px;
  border-radius: 4px;
  justify-content: space-between;
}

.bottle-price ul li {
  font-size: 20px;
  font-weight: 400;
  color: #fff;
}

.qulity-bottle-nav {
  margin-bottom: 59px;
  background: #ffff;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.qulity-bottle-nav span {
  background: #081340;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}
.qulity-bottle-nav a.active {
  background: #081340;
  color: #fff;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
}
.qulity-bottle-nav span,
.qulity-bottle-nav a {
  padding: 18px 0;
  display: inline-block;
  color: #fff;
}
.qulity-bottle-nav * {
  width: 16.6671%;
  text-align: center;
}
/*=================================================
    15: our blog area
=================================================*/
.single-blog-inner .post-date p {
  margin-bottom: 0;
  line-height: 25px;
  text-align: center;
  margin-top: 10px;
  font-size: 16px;
  color: #081340;
  font-weight: 400;
}

.single-blog-inner .post-image {
  position: relative;
}

.single-blog-inner .post-date {
  position: absolute;
  top: 10px;
  height: 65px;
  width: 65px;
  background: #fff;
  border-radius: 50%;
  left: 10px;
  text-align: center;
  line-height: 65px;
}

.single-blog-inner .post-date p span {
  display: block;
  line-height: 1;
}

.single-blog-inner .post-title h3 {
  margin-top: -7px;
  margin-bottom: 30px;
  font-weight: 400;
}
.single-blog-inner .post-title h3 a {
  transition: 0.3s all linear;
}
.single-blog-inner .post-title h3:hover a {
  color: #00c3ee;
}

.single-blog-inner {
  transition: 0.3s all linear;
  border: 1px solid #dae0ef;
  border-radius: 3px;
  margin-bottom: 30px;
  background: #fff;
}
.single-blog-inner:hover {
  box-shadow: 0px 10px 30px rgba(218, 224, 239, 0.4);
}
.single-blog-inner .post-content {
  padding: 60px;
}

.single-blog-inner .post-details p {
  font-size: 16px;
  line-height: 30px;
  margin-bottom: 9px;
}
.single-blog-inner .post-details a i,
.single-blog-inner .post-details a {
  transition: 0.3s all linear;
}
.single-blog-inner .post-details a:hover i,
.single-blog-inner .post-details a:hover {
  color: #00c3ee;
}
.single-blog-inner .post-details a i {
  margin-right: 6px;
  color: #e23e1d;
}

.single-blog-inner .post-info {
  justify-content: space-between;
  margin-top: 20px;
  border-top: 1px solid #dae0ef;
  padding-top: 28px;
}

.single-blog-inner .post-info a {
  color: #70768e;
  font-weight: 400;
  font-size: 14px;
  line-height: 1;
}
.about-me.single-blog-inner .post-content {
  padding: 60px 60px 50px 60px;
}
.single-blog-inner .post-image img {
  width: 100%;
}
/*===========================================
    16: Bloge details page
===========================================*/
/*16:01 blog details*/
.blog-details-image {
  position: relative;
}
.blog-details-image .post-image {
  position: relative;
}

.blog-details-image .post-date {
  position: absolute;
  top: 10px;
  height: 65px;
  width: 65px;
  background: #ffff;
  border-radius: 50%;
  left: 10px;
  text-align: center;
  line-height: 65px;
}
.blog-details-image .post-date p {
  margin-bottom: 0;
  line-height: 25px;
  text-align: center;
  margin-top: 10px;
  font-size: 16px;
  color: #081340;
  font-weight: 400;
}
.blog-details-image .post-date p span {
  display: block;
  line-height: 1;
}

.blog-details-image .post-title h3 {
  margin-top: -7px;
  margin-bottom: 30px;
  font-weight: 400;
}
.blog-details-head {
  margin-top: 20px;
}

.blog-details-head h2 {
  font-size: 40px;
  font-weight: 400;
  margin-bottom: 0;
}

.post-info a {
  color: #ffff;
  font-size: 16px;
  font-weight: 400;
}

.post-info a + a {
  margin-left: 20px;
}

.blog-details-wrap .post-info {
  margin-bottom: 26px;
}

.blog-details-body p {
  font-size: 16px;
  line-height: 30px;
  color: #70768e;
}

.post-tag-share .post-tag h4 {
  display: inline-block;
}

.post-tag-share .post-tag a {
  margin-left: 10px;
  font-size: 16px;
  color: #ffff;
}

.post-tag-share {
  justify-content: space-between;
  align-items: center !important;
  padding-top: 33px;
  border-top: 1px solid #dae0ef;
  padding-bottom: 34px;
  margin-top: 51px;
}

.post-share ul li {
  display: inline-block;
  margin-left: 5px;
}

/* --- Base Styling (The original foundation) --- */
.social-list {
  /* Assuming m-0, list-unstyled, d-flex, gap-3, mb-0 from Bootstrap are handling the list's structure and spacing */
  padding: 0;
  margin: 0;
  display: flex;
  list-style: none;
  gap: 5px; /* Adjust space between icons */
}

/* --- Icon Link Styling --- */
.social-list li a {
  /* Shape and Sizing */
  height: 40px; /* Increased size slightly */
  width: 40px; /* Increased size slightly */
  display: flex; /* Use flexbox for perfect centering */
  align-items: center;
  justify-content: center;

  /* Look and Feel */
  background: #ffffff; /* Brighter background */
  color: #4b5563; /* Darker, modern text color */
  border-radius: 50%;
  border: 1px solid #e5e7eb; /* Subtle border for definition */

  /* Effects */
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Smooth transition for all changes */
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -2px rgba(0, 0, 0, 0.06); /* Default subtle shadow */
}

/* --- Hover Effects (The "More Effects" part) --- */
.social-list li a:hover {
  /* Color Change */
  background: #e23e1d; /* Primary accent color */
  color: #fff; /* White icon on hover */
  border-color: #e23e1d; /* Match border to background */

  /* Transformation */
  transform: translateY(-3px) scale(1.05); /* Lifts the icon up and makes it slightly bigger */

  /* Shadow Change (More pronounced lift) */
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

/* --- Active/Click Effect (Adding a "Pressed" look) --- */
.social-list li a:active {
  background: #c33519; /* Slightly darker background when clicked */
  transform: translateY(1px) scale(1.01); /* Pushes the icon down slightly */
  box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.2); /* Inner shadow for a "pressed" effect */
}

/* --- Link Styling (The core changes) --- */
.footer-links li a {
  /* Initial look */
  color: #555 !important; /* Darker initial color than 'text-muted' or 'text-secondary' */
  font-size: 1rem;
  position: relative; /* Needed for the animated underline */
  display: inline-block;

  /* Smooth transition for color and transform */
  transition: color 0.3s ease, transform 0.3s ease;
}

/* --- Animated Underline Effect --- */
.footer-links li a::after {
  content: "";
  position: absolute;
  bottom: 6px; /* Position below the text */
  left: 0;
  width: 0; /* Starts with zero width (invisible) */
  height: 2px;
  background-color: #e23e1d; /* Your accent color */
  transition: width 0.3s ease-out; /* Smooth transition for width change */
}

/* --- Hover Effect --- */
.footer-links li a:hover {
  color: #e23e1d !important; /* Change text color to the accent color */
  transform: translateX(5px); /* Subtle slide/nudge effect */
}

/* --- Underline Animation on Hover --- */
.footer-links li a:hover::after {
  width: 100%; /* Expands the underline from left to right */
}

.author-details a {
  text-decoration: underline;
  color: #ffff;
}
.post-author-inner {
  display: flex;
  padding: 60px 0 60px 60px;
  border: 1px solid #dae0ef;
  border-radius: 5px;
  margin-bottom: 70px;
}

.post-author-inner img {
  align-self: flex-start;
}

.author-details {
  margin-left: 40px;
  flex: 1;
}

.author-details h4 {
  font-weight: 400;
  font-size: 24px;
  margin-bottom: 34px;
}

.author-details p {
  margin-bottom: 11px;
  font-size: 16px;
  line-height: 30px;
}

.post-comment h3 {
  font-size: 30px;
  font-weight: 400;
  margin-bottom: 55px;
}

.comment-author-content {
  margin-left: 30px;
}

.comment-author-content h5 {
  font-size: 18px;
  font-weight: 400;
  margin-bottom: 10px;
}

.comment-author-content h6 {
  font-size: 16px;
  margin-bottom: 34px;
  color: #ffff;
}

.comment-author-details p {
  font-size: 16px;
  line-height: 30px;
  margin-bottom: 0;
}

.comment-author-details {
  border-bottom: 1px solid #dae0ef;
  position: relative;
  padding-bottom: 50px;
  margin-bottom: 50px;
}

.comment-author-content a {
  position: absolute;
  top: 0;
  right: 0;
  padding: 9px 20px;
}

.contact-page-form h3 {
  font-size: 30px;
  font-weight: 400;
  margin-bottom: 55px;
}

/*blog side bar*/
.search-form {
  position: relative;
}
.single-sidebar-widget input {
  border-radius: 5px;
  border: 1px solid #dae0ef;
  padding: 15px 25px;
  width: 100%;
  transition: 0.3s all linear;
}

.sidebar-title h4 {
  font-weight: 400;
}

.sidebar-title {
  margin-bottom: 26px;
}

.single-sidebar-widget:not(:first-child) {
  padding: 44px 50px;
  border: 1px solid #dae0ef;
  border-radius: 5px;
}

.latest-poat h6 {
  font-weight: 400;
  font-size: 16px;
  margin-left: 20px;
  color: #70768e;
}
.treading-posts li:not(:last-child) {
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid #dae0ef;
}
.single-sidebar-widget input:focus {
  box-shadow: 0px 1px 30px #dae0ef;
}
.single-sidebar-widget ul.catagory-widget li a {
  position: relative;
  padding-left: 24px;
  transition: 0.3s all linear;
  color: #70768e;
}
.single-sidebar-widget ul.catagory-widget li a:hover {
  color: #ffff;
}
.single-sidebar-widget ul.catagory-widget li a:before {
  content: "\f18e";
  position: absolute;
  font-family: FontAwesome;
  font-size: 16px;
  left: 0;
  top: 1px;
  line-height: 1.4;
  color: #e23e1d;
  transition: 0.3s all linear;
}
.single-sidebar-widget ul.catagory-widget li a:hover:before {
  color: #081340;
}
.single-sidebar-widget ul li {
  padding-bottom: 8px;
}
.tag-clouds a {
  font-size: 16px;
  line-height: 30px;
}
.treading-posts .latest-poat h6 a {
  color: #70768e;
  transition: 0.3s all linear;
}
.treading-posts li:hover h6 a {
  color: #081340;
}
.single-sidebar-widget ul li:last-chils {
  padding-bottom: 0;
}

/*===========================================
    17: map area
===========================================*/
.google-map #google-map {
  height: 560px;
  width: 100%;
}
/*==============================================
    18: Conatct page
==============================================*/
/*18:01 conatct info*/
.top-shape {
  position: relative;
  z-index: 1;
}
.top-shape:after {
  content: "";
  position: absolute;
  left: 0;
  top: -23px;
  background-image: url(../img/waves.png);
  height: 59px;
  width: 100%;
}

.top-shape2 {
  position: relative;
  z-index: 1;
}
.top-shape2:after {
  content: "";
  position: absolute;
  left: 0;
  top: -23px;
  background-image: url(../img/waves3.html);
  height: 59px;
  width: 100%;
}

.single-conatct-info {
  border: 1px solid #dae0ef;
  padding: 53px 20px 49px 60px;
  border-radius: 3px;
  transition: all 0.3s linear;
  margin-bottom: 30px;
}
.single-conatct-info:hover {
  box-shadow: 0px 6px 25px rgb(218, 224, 239);
}
.single-conatct-info p {
  margin-bottom: 0;
  font-size: 16px;
  line-height: 30px;
}

.single-conatct-info h4 {
  font-weight: 400;
  margin-bottom: 32px;
}

.single-conatct-info a {
  display: block;
  font-size: 16px;
  color: #70768e;
  line-height: 30px;
}
.contact-page-form .theme-input-style {
  font-size: 16px;
  height: 70px;
  padding: 0 20px;
  margin-bottom: 25px;
  position: relative;
}
.contact-page-form .theme-input-style + .parsley-errors-list {
  top: 0;
}
/*===================================
19: Call to action
===================================*/
.callto-heading span {
  color: #e23e1d;
  font-size: 30px;
}
.call-action-btn .btn:hover:before {
  background: #0b1e70;
  left: 0;
  width: 100%;
}
/*==============================================
    20: Footer
==============================================*/
.top-footer .logo img {
  max-height: 150px;
}

.top-footer {
  padding-bottom: 30px;
  margin-bottom: 30px;
  border-bottom: 1px solid #dae0ef;
}

.bottom-footer {
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid #dae0ef;
}

/*20.01: footer top*/
.footer-widget {
  color: #979caf;
  position: relative;
  padding-right: 40px;
}

.footer-widget .widget-title h3 {
  color: #0d0a11;
  font-weight: 400;
}

.footer-top {
  padding-top: 110px;
}

.footer-widget .widget-title {
  margin-bottom: 30px;
}

.footer-social-area ul li {
  display: inline-block;
  margin: 0 2px;
}

.footer-social-area ul li a {
  height: 45px;
  width: 45px;
  display: inline-block;
  background: #e23e1d;
  line-height: 45px;
  text-align: center;
  border-radius: 50%;
  color: #fff;
  transition: 0.3s all linear;
}
.footer-social-area ul li a:hover {
  background-color: #ffff;
}
.footer-widget:before {
  content: "";
  height: 130px;
  width: 1px;
  position: absolute;
  right: 0;
  top: 0;
  background: #142155;
}

.footer-widget.text-right {
  padding-right: 0;
  padding-left: 30px;
}

.footer-top .col-md-4:last-child .footer-widget:before {
  display: none;
}
.footer-widget p {
  margin-bottom: 0;
}

.footer-widget .footer-contact-info a {
  display: block;
  color: #979caf;
}
.footer-widget {
  margin-bottom: 40px;
}
/*20.02: footer bottom*/
.footer-bottom {
  padding: 20px 0 0;
  position: relative;
}

.footer-bottom p {
  margin-bottom: 0;
  line-height: 1;
  color: #979caf;
}

.footer-bottom p a {
  color: #979caf;
}

/*=============================================
    21: Others
==============================================*/

h1 span {
  color: #53e1ff;
}
/*21.01: pettrns*/
.crypto-patern {
  background-image: url(../img/Crypto_Pattern20.html);
  background-repeat: repeat;
  background-position: top center;
}
.vpn-patern {
  background-image: url(../img/VPN_Pattern.html);
  background-repeat: repeat;
  background-position: top center;
}
.vc-patern {
  background-image: url(../img/VC_Pattern.html);
  background-repeat: repeat;
  background-position: top center;
}
.map {
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.swiper-container-wrap {
  overflow: hidden;
  margin-left: -15px;
  margin-right: -15px;
}
.swiper-container-wrap .swiper-container {
  overflow: visible;
  padding-left: 15px;
  padding-right: 15px;
}

/*21.02: About block */
.about-content h1 {
  margin-top: -12px;
}
.about-content p {
  margin-bottom: -5px;
}

/* 21.03: Why us */
.single-reason {
  border: 1px solid #ecf7fe;
  padding: 30px 15px 25px;
}
.single-reason i {
  font-size: 30px;
  color: #00c544;
}
.single-reason .h5 {
  font-weight: bold;
  margin-top: 20px;
  margin-bottom: 14px;
}
.single-reason span {
  color: #4c4f60;
}

/* 21.04: Subscription */
.primary-form {
  position: relative;
}
.primary-form input:not([type="submit"]) {
  height: 60px;
  padding: 0 20px;
  font-size: 14px;
}
.primary-form .parsley-errors-list {
  display: none;
}

/* 21.05: Carousel controls */
.carousel-control {
  border: 1px solid #e2e6fb;
  width: 40px;
  height: 40px;
  color: #8388a8;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  cursor: pointer;
}
.carousel-control:hover,
.carousel-control:focus {
  color: #fff;
  background-color: #00c544;
  border-color: #00c544;
  outline: none;
}
.swiper-button-disabled {
  pointer-events: none;
}

/* 21.06: Slider pagination style */
.slider-pagination-style .swiper-pagination-bullet {
  width: 15px;
  height: 5px;
  border: 1px solid #e2e6fb;
  border-radius: 0;
  background: transparent;
  opacity: 1;
  margin: 0 5px;
}
.slider-pagination-style .swiper-pagination-bullet-active {
  width: 15px;
  height: 10px;
  background: #e2e6fb;
}
.slider-pagination-style .swiper-pagination-bullet:focus {
  outline: none;
}

/* 21.07: Social icons */
.social-icons li:not(:last-child) {
  margin-right: 25px;
}

/* 21.08: Back to top */
.back-to-top {
  opacity: 0;
  visibility: hidden;
  -webkit-transition: 0.3s all linear;
  transition: 0.3s all linear;
}

.back-to-top.show {
  bottom: 30px;
  opacity: 1;
  visibility: visible;
  z-index: 999;
}
.back-to-top a {
  width: 50px;
  height: 50px;
  background: #ffff;
  box-shadow: 1px 5px 19px rgba(0, 0, 0, 0.15);
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  font-size: 16px;
  color: #fff;
  border-radius: 50%;
  display: inline-block;
  text-align: center;
  line-height: 35px;
  bottom: 10%;
  right: 4%;
  position: fixed;
  z-index: 999;
  border: 1px solid #fff;
}

.back-to-top a i:before {
  color: #081340;
}
.back-to-top a:hover {
  background: #fff;
  color: #53e1ff;
}
.back-to-top.home6 a {
  background: #00c6c6;
}
.back-to-top.home6 a:hover {
  background: #fff;
}

.back-to-top.home5 a {
  background: #e48f0b;
}
.back-to-top.home5 a:hover {
  color: #fff;
}
.back-to-top.home4 a {
  background: #ffb565;
  color: #6c771e;
}
.back-to-top.home4 a:hover {
  color: #fff;
}
.back-to-top.home3 a {
  background: #53e1ff;
  color: #fff;
}
.back-to-top.home3 a:hover {
  color: #53e1ff;
  background: #fff;
}

.back-to-top a i {
  -webkit-animation: bounce2 3s linear infinite;
  animation: bounce2 3s linear infinite;
  font-size: 30px;
  line-height: 50px;
}

@-webkit-keyframes bounce2 {
  0% {
    -webkit-transform: translateY(3px);
    transform: translateY(3px);
  }
  50% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }
  100% {
    -webkit-transform: translateY(3px);
    transform: translateY(3px);
  }
}

@keyframes bounce2 {
  0% {
    -webkit-transform: translateY(3px);
    transform: translateY(3px);
  }
  50% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }
  100% {
    -webkit-transform: translateY(3px);
    transform: translateY(3px);
  }
}

/* 21.09: Preloader */
.preLoader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  z-index: 99999;
  overflow: hidden;
}
.preload-img {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 21.10: Form validation */
.parsley-errors-list {
  list-style: none;
  padding: 0;
  position: absolute;
  left: 0;
  margin: -10px 0 0;
  top: 100%;
  text-align: center;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
.parsley-errors-list li {
  font-size: 13px;
  line-height: 1.5;
  background: red;
  color: #fff;
  padding: 0 10px;
  padding: 0 10px;
}

/* 21.11: Content animation */
[data-animate] {
  visibility: hidden;
  -webkit-animation-duration: 0.6s;
  animation-duration: 0.6s;
}
[data-animate].animated {
  visibility: visible;
}

/* ======================== */

.hero-section {
  display: flex;
  padding: 20px;
  height: 100vh;
  color: white;
  min-height: 500px;
  text-align: center;
  align-items: center;
  background-size: cover;
  position: relative;
  justify-content: center;
  background-position: center;
  background-image: url(../img/banner-01.jpeg);
}

.hero-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4); /* Dark overlay for text readability */
}

.hero-content {
  position: relative;
  z-index: 10;
  max-width: 800px;
}

.hero-content h1 {
  font-size: 3em;
  margin-bottom: 0.5em;
  line-height: 1.2;
}

.hero-content p {
  font-size: 1.2em;
  margin-bottom: 1.5em;
}

.cta-button {
  display: inline-block;
  background-color: #007bff; /* A nice blue color for water */
  color: white;
  padding: 15px 30px;
  text-decoration: none;
  border-radius: 5px;
  font-weight: bold;
  transition: background-color 0.3s ease;
}

.cta-button:hover {
  background-color: #0056b3;
}

.home-hero-slider {
  position: relative;
  width: 100%;
  height: 100vh;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center bottom;
  display: flex;
  align-items: center;
  background-image: url(../img/banner/main-banner.jpg);
}
/* You could also try 'center top' or 'left center' depending on the image */

.single-slide {
  height: 100vh;
  display: flex;
  align-items: center;
}

.slide-content {
  text-align: left;
  max-width: 550px;
  margin-left: 5%;
  position: relative;
  z-index: 2;
  padding: 15px 30px;
  border-radius: 15px;
  color: #fff;
  /* backdrop-filter: blur(4px);
  background: rgba(255, 255, 255, 0.1); */
}

.slide-content h1 {
  font-size: 5rem;
  line-height: 5rem;
  color: #fff;
}

.slide-content p {
  font-size: 18px;
  line-height: 20px;
}

.slide-content .btn {
  padding: 18px 70px;
  border-radius: 5px;
  font-size: 1rem;
  text-decoration: none;
  transition: 0.3s ease;
}

.btn-primary {
  background: #e23e1d;
  color: #fff;
}

.btn-primary:hover {
  background: #b53115;
}

.btn-secondary {
  background: #fff;
  color: #e23e1d;
  border: 1px solid #e23e1d;
}

.btn-secondary:hover {
  background: #ddd;
}

/* .home-hero-slider */

/* Position menu-primary-menu-container buttons */
/* .home-hero-slider .owl-nav {
  position: absolute;
  top: 50%;
  width: 100%;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  pointer-events: none; 
}

.home-hero-slider .owl-nav button {
  background: rgba(0, 0, 0, 0.5) !important;
  color: #fff !important;
  border: none !important;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  font-size: 20px !important;
  cursor: pointer !important;
  transition: all 0.3s ease;
  pointer-events: all;
  display: flex;
  align-items: center;
  justify-content: center;
}

.home-hero-slider .owl-nav button:hover {
  background: #ff6600;
  transform: scale(1.1);
}

.home-hero-slider .owl-nav button.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.home-hero-slider .owl-nav i {
  font-size: 18px;
  line-height: 1;
} */

.background-gradient {
  background: linear-gradient(180deg, #ffffff 8.36%, #c5f0fb 91.45%);
}